{% extends "base.html" %}
{% import "macros.html" as macros %}

{% block title %}{{ task.title }} — td{% endblock %}

{% block content %}
<nav aria-label="Breadcrumb">
  <ol class="unstyled hstack">
    <li><a href="/" class="unstyled">Projects</a></li>
    <li aria-hidden="true">/</li>
    <li><a href="/projects/{{ project_name }}" class="unstyled">{{ project_name }}</a></li>
    <li aria-hidden="true">/</li>
    <li><a href="/projects/{{ project_name }}/tasks/{{ task.full_id }}" class="unstyled" aria-current="page"><strong>{{ task.short_id }}</strong></a></li>
    <li>
      <button class="outline small js-copy-id" hidden aria-label="Copy task ID {{ task.short_id }}" data-copy="{{ task.short_id }}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg></button>
    </li>
  </ol>
</nav>

<article class="card mt-4">
  <header>
    <h1 class="task-title">{{ task.title }}</h1>
    <span class="badge{% if task.status == "closed" %} success{% elif task.status == "in_progress" %} secondary{% endif %}">{{ task.status }}</span>
  </header>

  {% if !task.description.is_empty() %}
  <div>{{ task.description|safe }}</div>
  {% endif %}

  <hr>
  <footer>
    <p class="text-light">{{ task.task_type }} · {{ task.priority }} priority · {{ task.effort }} effort<br>Created <time datetime="{{ task.created_at }}">{{ task.created_at_display }}</time> · Updated <time datetime="{{ task.updated_at }}">{{ task.updated_at_display }}</time></p>
  </footer>

  <div class="hstack gap-2 mt-4">
    <ot-dropdown>
      <button popovertarget="status-menu" class="outline small">
        Change status
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
      </button>
      <menu popover id="status-menu">
        <button role="menuitemradio" aria-checked="{{ task.status == "open" }}" {% if task.status == "open" %}disabled{% else %}form="set-open"{% endif %}>Open</button>
        <button role="menuitemradio" aria-checked="{{ task.status == "in_progress" }}" {% if task.status == "in_progress" %}disabled{% else %}form="set-in-progress"{% endif %}>In progress</button>
        <button role="menuitemradio" aria-checked="{{ task.status == "closed" }}" {% if task.status == "closed" %}disabled{% else %}form="set-closed"{% endif %}>Closed</button>
      </menu>
    </ot-dropdown>
    {% if task.status != "open" %}
    <form id="set-open" method="post" action="/projects/{{ project_name }}/tasks/{{ task.full_id }}" hidden>
      <input type="hidden" name="status" value="open">
    </form>
    {% endif %}
    {% if task.status != "in_progress" %}
    <form id="set-in-progress" method="post" action="/projects/{{ project_name }}/tasks/{{ task.full_id }}" hidden>
      <input type="hidden" name="status" value="in_progress">
    </form>
    {% endif %}
    {% if task.status != "closed" %}
    <form id="set-closed" method="post" action="/projects/{{ project_name }}/tasks/{{ task.full_id }}" hidden>
      <input type="hidden" name="status" value="closed">
    </form>
    {% endif %}
    <ot-dropdown>
      <button popovertarget="confirm-delete" class="outline small danger">Delete</button>
      <article class="card" popover id="confirm-delete">
        <header>
          <h4>Are you sure?</h4>
          <p>This will delete <strong>{{ task.short_id }}</strong>.</p>
        </header>
        <br>
        <footer class="hstack gap-2">
          <button class="outline small" popovertarget="confirm-delete">Cancel</button>
          <button data-variant="danger" class="small" form="delete-task" type="submit">Delete</button>
        </footer>
      </article>
    </ot-dropdown>
    <form id="delete-task" method="post" action="/projects/{{ project_name }}/tasks/{{ task.full_id }}/delete" hidden></form>
  </div>

  {% if !task.labels.is_empty() %}
  <section class="mt-4" aria-label="Labels">
    <h2>Labels</h2>
    <div class="hstack gap-2">
      {% for l in task.labels %}
      <form method="post" action="/projects/{{ project_name }}/tasks/{{ task.full_id }}/labels" class="inline">
        <input type="hidden" name="action" value="rm">
        <input type="hidden" name="label" value="{{ l }}">
        <button type="submit" class="badge outline small" aria-label="Remove label {{ l }}" title="Remove">{{ l }} ×</button>
      </form>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  <section class="mt-4" aria-label="Add label">
    <form method="post" action="/projects/{{ project_name }}/tasks/{{ task.full_id }}/labels">
      <input type="hidden" name="action" value="add">
      <fieldset class="group">
        <input type="text" name="label" placeholder="Label…" required aria-label="New label">
        <button type="submit">Add label</button>
      </fieldset>
    </form>
  </section>

  <details class="mt-4">
    <summary>Work log ({{ task.logs.len() }})</summary>
    {% for log in task.logs %}
    <div><time datetime="{{ log.timestamp }}">{{ log.timestamp_display }}</time> — {{ log.message|safe }}</div>
    {% endfor %}
    <form method="post" action="/projects/{{ project_name }}/tasks/{{ task.full_id }}/log" class="mt-4">
      <label for="log-message">Add log entry</label>
      <textarea id="log-message" name="message" rows="3" required placeholder="What happened…"></textarea>
      <button type="submit" class="outline small mt-2">Add log</button>
    </form>
  </details>
</article>

<article class="card mt-4">
  <h2>Blockers</h2>
  {% if !blockers_open.is_empty() || !blockers_resolved.is_empty() %}
  <ul>
    {% for b in blockers_open %}
    <li class="hstack items-center gap-2">
      <a href="/projects/{{ project_name }}/tasks/{{ b.full_id }}"><code>{{ b.short_id }}</code></a> <span class="badge warning">open</span>
      <form method="post" action="/projects/{{ project_name }}/tasks/{{ task.full_id }}/deps" class="inline">
        <input type="hidden" name="action" value="rm">
        <input type="hidden" name="blocker" value="{{ b.short_id }}">
        <button type="submit" class="outline small" aria-label="Remove blocker {{ b.short_id }}">×</button>
      </form>
    </li>
    {% endfor %}
    {% for b in blockers_resolved %}
    <li class="hstack items-center gap-2">
      <a href="/projects/{{ project_name }}/tasks/{{ b.full_id }}"><code>{{ b.short_id }}</code></a> <span class="badge success">resolved</span>
      <form method="post" action="/projects/{{ project_name }}/tasks/{{ task.full_id }}/deps" class="inline">
        <input type="hidden" name="action" value="rm">
        <input type="hidden" name="blocker" value="{{ b.short_id }}">
        <button type="submit" class="outline small" aria-label="Remove blocker {{ b.short_id }}">×</button>
      </form>
    </li>
    {% endfor %}
  </ul>
  {% endif %}
  <form method="post" action="/projects/{{ project_name }}/tasks/{{ task.full_id }}/deps" class="mt-2">
    <input type="hidden" name="action" value="add">
    <fieldset class="group">
      <input type="text" name="blocker" placeholder="Task ID…" required aria-label="Blocker task ID">
      <button type="submit">Add blocker</button>
    </fieldset>
  </form>
</article>

{% if !subtasks.is_empty() %}
<article class="card mt-4">
  <h2>Subtasks</h2>
  {% call macros::task_table(project_name, subtasks, "Subtasks") %}{% endcall %}
</article>
{% endif %}
{% endblock %}