{% extends "base.html" %}
{% import "macros/ui.html" as m %}
{% block title %}{{ ws_name }} — Backlog{% endblock %}
{% block nav_workspaces %}btn-active{% endblock %}

{% block content %}
{{ m::ws_tabs(ws_name=ws_name, active=ws_active_tab, ws_envs=ws_envs, ws_has_clusters=ws_has_clusters, ws_has_workflows=ws_has_workflows, current_env=current_env) }}

<div class="flex items-center gap-3 mb-1">
  <h2 class="text-xl font-bold font-mono">Backlog
    <span class="text-base-content/30 font-normal text-sm ml-2">{{ ws_name }}</span>
  </h2>
  {% if can_operate and has_root %}
  <button class="btn btn-xs btn-primary ml-auto font-mono" onclick="document.getElementById('modal-add-backlog').showModal()">+ New</button>
  {% endif %}
</div>
<p class="text-base-content/50 text-sm mb-6">
  Items from <code class="font-mono">reflection/backlog.ncl</code>.
</p>

{% if can_operate and has_root %}
<dialog id="modal-add-backlog" class="modal">
  <div class="modal-box max-w-lg">
    <h3 class="font-bold text-lg font-mono mb-4">New backlog item</h3>
    <form method="post" action="/ui/workspaces/{{ ws_name }}/backlog/add">
      <div class="space-y-3">
        <label class="form-control w-full">
          <span class="label-text text-xs mb-1">Title</span>
          <input name="title" type="text" required placeholder="Short description" class="input input-bordered input-sm w-full font-mono" />
        </label>
        <div class="grid grid-cols-3 gap-2">
          <label class="form-control">
            <span class="label-text text-xs mb-1">Kind</span>
            <select name="kind" class="select select-bordered select-sm font-mono">
              <option>Bug</option>
              <option>Todo</option>
              <option selected>Feature</option>
              <option>Ops</option>
              <option>Refactor</option>
            </select>
          </label>
          <label class="form-control">
            <span class="label-text text-xs mb-1">Priority</span>
            <select name="priority" class="select select-bordered select-sm font-mono">
              <option>High</option>
              <option selected>Medium</option>
              <option>Low</option>
            </select>
          </label>
          <label class="form-control">
            <span class="label-text text-xs mb-1">Status</span>
            <select name="status" class="select select-bordered select-sm font-mono">
              <option selected>Open</option>
              <option>InProgress</option>
              <option>Done</option>
            </select>
          </label>
        </div>
        <label class="form-control w-full">
          <span class="label-text text-xs mb-1">Notes</span>
          <textarea name="notes" rows="3" placeholder="Optional details..." class="textarea textarea-bordered textarea-sm w-full font-mono"></textarea>
        </label>
      </div>
      <div class="modal-action mt-4">
        <button type="button" class="btn btn-ghost btn-sm" onclick="document.getElementById('modal-add-backlog').close()">Cancel</button>
        <button type="submit" class="btn btn-primary btn-sm font-mono">Add item</button>
      </div>
    </form>
  </div>
  <form method="dialog" class="modal-backdrop"><button>close</button></form>
</dialog>
{% endif %}

{% if not has_root %}
<div class="alert alert-warning mb-4">
  <span>Workspace path not resolved.</span>
</div>
{% endif %}

{% if backlog.items %}
<div class="space-y-2">
  {% for item in backlog.items %}
  <div class="card bg-base-200 shadow-sm">
    <div class="card-body p-4">
      <div class="flex items-start gap-3">
        <div class="flex-1 min-w-0">
          <div class="flex items-center gap-2 flex-wrap">
            <span class="font-mono text-xs text-base-content/40">{{ item.id }}</span>
            {% if item.priority == "High" %}
            <span class="badge badge-error badge-xs">high</span>
            {% elif item.priority == "Medium" %}
            <span class="badge badge-warning badge-xs">medium</span>
            {% else %}
            <span class="badge badge-ghost badge-xs">{{ item.priority | lower }}</span>
            {% endif %}
            {% if item.kind == "Bug" %}
            <span class="badge badge-error badge-xs font-mono">bug</span>
            {% elif item.kind == "Todo" %}
            <span class="badge badge-info badge-xs font-mono">todo</span>
            {% else %}
            <span class="badge badge-ghost badge-xs font-mono">{{ item.kind | lower }}</span>
            {% endif %}
            {% if item.status == "Open" %}
            <span class="badge badge-outline badge-xs">open</span>
            {% elif item.status == "Done" %}
            <span class="badge badge-success badge-xs">done</span>
            {% else %}
            <span class="badge badge-ghost badge-xs">{{ item.status | lower }}</span>
            {% endif %}
          </div>
          <p class="text-sm font-medium mt-1">{{ item.title }}</p>
          {% if item.detail %}
          <p class="text-xs text-base-content/50 mt-1">{{ item.detail }}</p>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% elif has_root %}
<div class="alert">
  <span class="text-sm">No backlog items found in <code class="font-mono">reflection/backlog.ncl</code>.</span>
</div>
{% endif %}
{% endblock %}