{% extends "base.html" %}
{% block content %}
  <section class="section"><div class="container gia-page-shell">
    <div class="gia-page-header">
      <div>
        <h1 class="title is-4">Task #{{ task.reference_code }}: {{ task.title }}</h1>
        <p class="subtitle is-6">{{ task.project.name }}{% if task.epic %} / {{ task.epic.name }}{% endif %} · {{ task.status_snapshot }}</p>
      </div>
    </div>
    <p class="is-size-7 has-text-grey" style="margin-top:-0.65rem; margin-bottom: 0.65rem;">
      Created by {{ task.creator_label|default:"Unknown" }}
      {% if task.origin_message_id %}
        · Source message <code>{{ task.origin_message_id }}</code>
      {% endif %}
    </p>
    <div class="buttons">
      <a class="button is-small is-light" href="{% url 'tasks_hub' %}">Back</a>
    </div>
    <article class="box">
      <h2 class="title is-6">Events</h2>
      <table class="table is-fullwidth is-size-7">
        <thead><tr><th>When</th><th>Type</th><th>Actor</th><th>Payload</th></tr></thead>
        <tbody>
          {% for row in events %}
            <tr>
              <td>{{ row.created_at }}</td>
              <td>{{ row.event_type }}</td>
              <td>
                {{ row.actor_display|default:"Unknown" }}
                {% if row.actor_identifier and row.actor_identifier != row.actor_display %}
                  <div class="has-text-grey"><code>{{ row.actor_identifier }}</code></div>
                {% endif %}
              </td>
              <td>
                {% if row.payload_view.summary_items %}
                  <div class="tags" style="margin-bottom: 0.35rem;">
                    {% for item in row.payload_view.summary_items %}
                      <span class="tag task-ui-badge"><strong>{{ item.0 }}</strong>: {{ item.1 }}</span>
                    {% endfor %}
                  </div>
                {% endif %}
                <details>
                  <summary class="is-size-7 has-text-link" style="cursor:pointer;">View payload JSON</summary>
                <pre class="task-event-payload">{{ row.payload_view.pretty_text }}</pre>
                </details>
              </td>
            </tr>
          {% empty %}
            <tr><td colspan="4">No events.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </article>
  </div></section>
  <style>
    .task-event-payload {
      margin-top: 0.35rem;
      padding: 0.6rem;
      border-radius: 8px;
      border: 1px solid rgba(127, 127, 127, 0.25);
      background: rgba(245, 245, 245, 0.75);
      color: #1f1f1f;
      max-width: 72ch;
      overflow: auto;
      white-space: pre-wrap;
      word-break: break-word;
    }
    [data-theme="dark"] .task-event-payload {
      background: rgba(35, 35, 35, 0.75);
      color: #f5f5f5;
      border-color: rgba(200, 200, 200, 0.35);
    }
  </style>
{% endblock %}