{% extends "admin/base_site.html" %}
{% load i18n %}

{% comment %}
Task detail page for django-taskly.

Displays all fields of a single TaskSnapshot in a structured layout.
If last_error_traceback is present it is rendered inside a <pre> block.

Context variables
-----------------
task  TaskSnapshot — the snapshot instance looked up by task_id
{% endcomment %}

{% block title %}{{ task.task_name }} | {% trans "Django Taskly" %}{% endblock %}

{% block extrahead %}
  {{ block.super }}
  <style>
    /* ------------------------------------------------------------------ */
    /* Back link                                                            */
    /* ------------------------------------------------------------------ */
    .taskly-back-link {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      margin-bottom: 1.25rem;
      font-size: 0.875rem;
      text-decoration: none;
      color: var(--primary, #417690);
    }

    .taskly-back-link:hover {
      text-decoration: underline;
    }

    /* ------------------------------------------------------------------ */
    /* Section                                                              */
    /* ------------------------------------------------------------------ */
    .taskly-section {
      margin-bottom: 2rem;
    }

    .taskly-section-title {
      font-size: 1rem;
      font-weight: 600;
      color: var(--body-fg, #333);
      margin: 0 0 0.75rem;
      padding-bottom: 0.4rem;
      border-bottom: 1px solid var(--border-color, #ddd);
    }

    /* ------------------------------------------------------------------ */
    /* Detail grid                                                          */
    /* ------------------------------------------------------------------ */
    .taskly-detail-grid {
      display: grid;
      grid-template-columns: minmax(160px, 220px) 1fr;
      row-gap: 0;
      border: 1px solid var(--border-color, #ddd);
      border-radius: 4px;
      overflow: hidden;
      font-size: 0.875rem;
    }

    .taskly-detail-label,
    .taskly-detail-value {
      padding: 0.55rem 0.85rem;
      border-bottom: 1px solid var(--border-color, #eee);
    }

    .taskly-detail-grid > *:nth-last-child(-n+2) {
      border-bottom: none;
    }

    .taskly-detail-label {
      font-weight: 600;
      background: var(--darkened-bg, #f8f8f8);
      color: var(--body-quiet-color, #555);
      white-space: nowrap;
    }

    .taskly-detail-value {
      background: var(--body-bg, #fff);
      word-break: break-all;
    }

    /* ------------------------------------------------------------------ */
    /* Status badges                                                        */
    /* ------------------------------------------------------------------ */
    .taskly-badge {
      display: inline-block;
      padding: 0.15em 0.55em;
      border-radius: 3px;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .taskly-badge--success { background: #e8f5e9; color: #2e7d32; }
    .taskly-badge--danger  { background: #ffebee; color: #c62828; }
    .taskly-badge--info    { background: #e3f2fd; color: #1565c0; }
    .taskly-badge--warning { background: #fff3e0; color: #e65100; }

    /* ------------------------------------------------------------------ */
    /* Traceback block                                                      */
    /* ------------------------------------------------------------------ */
    .taskly-traceback {
      margin: 0;
      padding: 1rem;
      background: #1e1e1e;
      color: #f8f8f2;
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
      font-size: 0.8rem;
      line-height: 1.6;
      overflow-x: auto;
      border-radius: 4px;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .taskly-no-error {
      color: var(--body-quiet-color, #888);
      font-style: italic;
      font-size: 0.875rem;
    }

    /* ------------------------------------------------------------------ */
    /* Slow indicator                                                       */
    /* ------------------------------------------------------------------ */
    .taskly-slow-badge {
      display: inline-block;
      margin-left: 0.5rem;
      padding: 0.1em 0.45em;
      background: #fff3e0;
      color: #e65100;
      border-radius: 3px;
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      vertical-align: middle;
    }
  </style>
{% endblock %}

{% block content %}
  <a class="taskly-back-link" href="{% url 'django_taskly:task_list' %}">
    &larr; {% trans "Back to Task List" %}
  </a>

  <h1>{{ task.task_name }}</h1>

  {# -------------------------------------------------------------------- #}
  {# Identity                                                              #}
  {# -------------------------------------------------------------------- #}
  <div class="taskly-section">
    <h2 class="taskly-section-title">{% trans "Identity" %}</h2>
    <div class="taskly-detail-grid">
      <span class="taskly-detail-label">{% trans "Task ID" %}</span>
      <span class="taskly-detail-value"><code>{{ task.task_id }}</code></span>

      <span class="taskly-detail-label">{% trans "Task Name" %}</span>
      <span class="taskly-detail-value">{{ task.task_name }}</span>

      <span class="taskly-detail-label">{% trans "Task Module" %}</span>
      <span class="taskly-detail-value">{{ task.task_module }}</span>
    </div>
  </div>

  {# -------------------------------------------------------------------- #}
  {# Status & Backend                                                      #}
  {# -------------------------------------------------------------------- #}
  <div class="taskly-section">
    <h2 class="taskly-section-title">{% trans "Status & Backend" %}</h2>
    <div class="taskly-detail-grid">
      <span class="taskly-detail-label">{% trans "Status" %}</span>
      <span class="taskly-detail-value">
        {% if task.status == 'SUCCESSFUL' %}
          <span class="taskly-badge taskly-badge--success">{{ task.get_status_display }}</span>
        {% elif task.status == 'FAILED' %}
          <span class="taskly-badge taskly-badge--danger">{{ task.get_status_display }}</span>
        {% elif task.status == 'RUNNING' %}
          <span class="taskly-badge taskly-badge--info">{{ task.get_status_display }}</span>
        {% else %}
          <span class="taskly-badge taskly-badge--warning">{{ task.get_status_display }}</span>
        {% endif %}
      </span>

      <span class="taskly-detail-label">{% trans "Backend" %}</span>
      <span class="taskly-detail-value">{{ task.backend }}</span>
    </div>
  </div>

  {# -------------------------------------------------------------------- #}
  {# Timing                                                                #}
  {# -------------------------------------------------------------------- #}
  <div class="taskly-section">
    <h2 class="taskly-section-title">{% trans "Timing" %}</h2>
    <div class="taskly-detail-grid">
      <span class="taskly-detail-label">{% trans "Enqueued At" %}</span>
      <span class="taskly-detail-value">
        {% if task.enqueued_at %}{{ task.enqueued_at|date:"Y-m-d H:i:s" }}{% else %}&mdash;{% endif %}
      </span>

      <span class="taskly-detail-label">{% trans "Started At" %}</span>
      <span class="taskly-detail-value">
        {% if task.started_at %}{{ task.started_at|date:"Y-m-d H:i:s" }}{% else %}&mdash;{% endif %}
      </span>

      <span class="taskly-detail-label">{% trans "Finished At" %}</span>
      <span class="taskly-detail-value">
        {% if task.finished_at %}{{ task.finished_at|date:"Y-m-d H:i:s" }}{% else %}&mdash;{% endif %}
      </span>

      <span class="taskly-detail-label">{% trans "Duration" %}</span>
      <span class="taskly-detail-value">
        {% if task.duration_seconds is not None %}
          {{ task.duration_seconds|floatformat:2 }}s
          {% if task.is_slow %}
            <span class="taskly-slow-badge">{% trans "slow" %}</span>
          {% endif %}
        {% else %}
          &mdash;
        {% endif %}
      </span>
    </div>
  </div>

  {# -------------------------------------------------------------------- #}
  {# Attempts & Errors                                                     #}
  {# -------------------------------------------------------------------- #}
  <div class="taskly-section">
    <h2 class="taskly-section-title">{% trans "Attempts & Errors" %}</h2>
    <div class="taskly-detail-grid">
      <span class="taskly-detail-label">{% trans "Attempts" %}</span>
      <span class="taskly-detail-value">{{ task.attempts }}</span>

      <span class="taskly-detail-label">{% trans "Error Class" %}</span>
      <span class="taskly-detail-value">
        {% if task.last_error_class %}
          <code>{{ task.last_error_class }}</code>
        {% else %}
          <span class="taskly-no-error">{% trans "None" %}</span>
        {% endif %}
      </span>
    </div>

    <div style="margin-top: 1rem;">
      <div class="taskly-section-title" style="font-size: 0.875rem;">{% trans "Error Traceback" %}</div>
      {% if task.last_error_traceback %}
        <pre class="taskly-traceback">{{ task.last_error_traceback }}</pre>
      {% else %}
        <p class="taskly-no-error">{% trans "No traceback recorded." %}</p>
      {% endif %}
    </div>
  </div>

  {# -------------------------------------------------------------------- #}
  {# Audit                                                                 #}
  {# -------------------------------------------------------------------- #}
  <div class="taskly-section">
    <h2 class="taskly-section-title">{% trans "Audit" %}</h2>
    <div class="taskly-detail-grid">
      <span class="taskly-detail-label">{% trans "Created At" %}</span>
      <span class="taskly-detail-value">{{ task.created_at|date:"Y-m-d H:i:s" }}</span>

      <span class="taskly-detail-label">{% trans "Updated At" %}</span>
      <span class="taskly-detail-value">{{ task.updated_at|date:"Y-m-d H:i:s" }}</span>
    </div>
  </div>
{% endblock %}