{% extends "base.html" %}
{% block content %}
<section class="section"><div class="container">
  <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>
  <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>
  <article class="box">
    <h2 class="title is-6">External Sync</h2>
    <table class="table is-fullwidth is-size-7">
      <thead><tr><th>When</th><th>Provider</th><th>Status</th><th>Error</th></tr></thead>
      <tbody>
        {% for row in sync_events %}
          <tr><td>{{ row.updated_at }}</td><td>{{ row.provider }}</td><td>{{ row.status }}</td><td>{{ row.error }}</td></tr>
        {% empty %}
          <tr><td colspan="4">No sync 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 %}