{% extends "base.html" %}

{% block title %}{{ task.title }} — gest{% endblock %}
{% block nav_tasks %}class="active"{% endblock %}

{% block content %}
<h1 class="section-heading">{{ task.title }}</h1>
<div class="summary">
  <a href="/tasks">&larr; tasks</a>
  &middot;
  <a href="/tasks/{{ task.id }}/edit">edit</a>
</div>

<div class="term">
  <div class="term-bar">
<span class="term-title">gest task show {{ task.id.short() }}</span>
  </div>
  <div class="term-body">
    <table>
      <tbody>
        <tr>
          <td class="c-pewter" style="width:120px">ID</td>
          <td>
            <span class="id-prefix">{{ task.id.short() }}</span>
          </td>
        </tr>
        <tr>
          <td class="c-pewter">Title</td>
          <td>{{ task.title }}</td>
        </tr>
        <tr>
          <td class="c-pewter">Status</td>
          <td>
            {% if is_blocked %}
              <span class="status-blocked">⊗ blocked</span>
            {% else %}
              {% match task.status %}
                {% when Status::Open %}
                  <span class="status-open">○ open</span>
                {% when Status::InProgress %}
                  <span class="status-in-progress">◐ in-progress</span>
                {% when Status::Done %}
                  <span class="status-done">● done</span>
                {% when Status::Cancelled %}
                  <span class="status-cancelled">✗ cancelled</span>
              {% endmatch %}
              {% if blocking.is_blocking %}<span class="status-blocking"> (blocking)</span>{% endif %}
            {% endif %}
          </td>
        </tr>
        {% match task.priority %}
          {% when Some with (p) %}
          <tr>
            <td class="c-pewter">Priority</td>
            <td><span class="priority">P{{ p }}</span></td>
          </tr>
          {% when None %}
        {% endmatch %}
        {% match task.phase %}
          {% when Some with (ph) %}
          <tr>
            <td class="c-pewter">Phase</td>
            <td>{{ ph }}</td>
          </tr>
          {% when None %}
        {% endmatch %}
        {% match task.assigned_to.as_deref() %}
          {% when Some with (who) %}
          <tr>
            <td class="c-pewter">Assigned to</td>
            <td>{{ who }}</td>
          </tr>
          {% when None %}
        {% endmatch %}
        {% if !task.tags.is_empty() %}
        <tr>
          <td class="c-pewter">Tags</td>
          <td>
            {% for tag in task.tags.iter() %}
              <a href="/search?q=tag:{{ tag }}" class="tag">#{{ tag }}</a>{{ " " }}
            {% endfor %}
          </td>
        </tr>
        {% endif %}
        <tr>
          <td class="c-pewter">Created</td>
          <td class="c-dim">{{ task.created_at.format("%Y-%m-%d %H:%M UTC") }}</td>
        </tr>
        <tr>
          <td class="c-pewter">Updated</td>
          <td class="c-dim">{{ task.updated_at.format("%Y-%m-%d %H:%M UTC") }}</td>
        </tr>
      </tbody>
    </table>

    {% if !task.description.is_empty() %}
    <hr class="rule">
    <h2 class="section-heading">Description</h2>
    <div class="md-content">
      {{ description_html|safe }}
    </div>
    {% endif %}

    {% if !display_links.is_empty() %}
    <hr class="rule">
    <h2 class="section-heading">Links</h2>
    <table>
      <tbody>
        {% for link in display_links.iter() %}
        <tr>
          <td class="c-pewter" style="width:120px">{{ link.rel }}</td>
          <td>
            {% match link.href %}
              {% when Some with (url) %}
                <a href="{{ url }}"><span class="id-prefix">{{ link.display_text }}</span></a>
              {% when None %}
                {{ link.display_text }}
            {% endmatch %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% endif %}

    {% if is_blocked %}
    <hr class="rule">
    <h2 class="section-heading" style="color: var(--error);">Blocked by</h2>
    {% for bid in blocking.blocked_by_ids.iter() %}
      <a href="/tasks/{{ bid }}"><span class="c-azure">{{ bid[..8] }}</span></a>{{ " " }}
    {% endfor %}
    {% endif %}

    {% if !task.metadata.is_empty() %}
    <hr class="rule">
    <h2 class="section-heading">Metadata</h2>
    <table>
      <tbody>
        {% for (key, val) in task.metadata.iter() %}
        <tr>
          <td class="c-pewter" style="width:120px">{{ key }}</td>
          <td>{{ val }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% endif %}
  </div>
</div>

<h2 class="section-heading" style="margin-top: 24px;">Activity</h2>

{% for entry in timeline.iter() %}
  {% match entry %}
    {% when TimelineEntry::Event with (event) %}
    <div class="note-card event-card">
      <div class="note-header">
        <img class="note-avatar" src="{{ event.avatar_url }}" alt="{{ event.author }}">
        <div class="note-meta">
          <span class="c-dim">{{ event.description }}</span>
        </div>
      </div>
      <div class="note-header" style="padding-top: 0;">
        <div class="note-meta" style="margin-left: 44px;">
          <span class="c-pewter">{{ event.author }}</span>
          {% if event.is_agent %}<span class="note-agent-badge">agent</span>{% endif %}
          <span class="c-dim">&middot; {{ event.created_at }}</span>
        </div>
      </div>
    </div>
    {% when TimelineEntry::Note with (note) %}
    <div class="note-card">
      <div class="note-header">
        <img class="note-avatar" src="{{ note.avatar_url }}" alt="{{ note.author }}">
        <div class="note-meta">
          <span class="c-silver bold">{{ note.author }}</span>
          {% if note.is_agent %}<span class="note-agent-badge">agent</span>{% endif %}
          <span class="c-dim">&middot; {{ note.created_at }}</span>
        </div>
        <span class="c-dim" style="margin-left: auto;">{{ note.id_short }}</span>
      </div>
      <div class="note-body md-content">
        {{ note.body_html|safe }}
      </div>
    </div>
  {% endmatch %}
{% endfor %}

<div class="note-card">
  <form method="post" action="/tasks/{{ task.id }}/notes">
    <div class="form-group md-preview-container">
      <label for="note-body">Add a note</label>
      <button type="button" class="btn md-preview-btn md-preview-toggle" data-target="note-body">Preview</button>
      <textarea
        id="note-body"
        name="body"
        class="form-textarea"
        placeholder="Write a note… (Markdown supported)"
        rows="3"
        style="min-height: 80px;"
      ></textarea>
      <div id="note-body-preview" class="md-preview md-content"></div>
    </div>
    <div class="form-actions" style="margin-top: 12px;">
      <button type="submit" class="btn btn-primary">Add Note</button>
    </div>
  </form>
</div>
{% endblock %}