{% extends 'workflows/base_shell.html' %}
{% load static i18n %}

{% block title %}{% trans "Request Timeline" %}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'workflows/css/admin_tools.css' %}" />
<style>
.timeline-summary-grid { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:16px; margin-bottom:20px; }
.timeline-stat { border:1px solid #d9e3f8; border-radius:20px; padding:16px 18px; background:linear-gradient(180deg,#ffffff 0%,#f7faff 100%); box-shadow:0 18px 40px rgba(23,39,90,.08); }
.timeline-stat label { display:block; margin-bottom:6px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#7081a5; }
.timeline-stat strong { display:block; font-size:18px; line-height:1.35; color:#20345f; }
.timeline-list { position:relative; display:grid; gap:18px; padding-left:28px; }
.timeline-list::before { content:""; position:absolute; top:6px; bottom:6px; left:11px; width:2px; background:linear-gradient(180deg,#cad8f8 0%,#e8eefc 100%); }
.timeline-item { position:relative; border:1px solid #d9e3f8; border-radius:20px; padding:18px 20px 18px 22px; background:#fff; box-shadow:0 18px 40px rgba(23,39,90,.08); }
.timeline-item::before { content:""; position:absolute; top:22px; left:-24px; width:16px; height:16px; border-radius:999px; background:#1e2bb8; box-shadow:0 0 0 4px #eef3ff; }
.timeline-item[data-kind="document"]::before { background:#1f7a45; }
.timeline-item[data-kind="audit"]::before { background:#6a5acd; }
.timeline-item[data-kind="session"]::before { background:#b86b12; }
.timeline-item[data-kind="email"]::before { background:#c2354e; }
.timeline-item[data-kind="milestone"]::before { background:#0d7c88; }
.timeline-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:8px; }
.timeline-title-wrap { display:grid; gap:8px; }
.timeline-kind { display:inline-flex; align-items:center; width:max-content; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:#eef3ff; color:#27407a; }
.timeline-item[data-kind="document"] .timeline-kind { background:#edf8f0; color:#20623c; }
.timeline-item[data-kind="audit"] .timeline-kind { background:#f2efff; color:#5b49aa; }
.timeline-item[data-kind="session"] .timeline-kind { background:#fff2df; color:#8a560a; }
.timeline-item[data-kind="email"] .timeline-kind { background:#ffe8ee; color:#9f2749; }
.timeline-item[data-kind="milestone"] .timeline-kind { background:#e8fbfd; color:#0e6a72; }
.timeline-stamp { font-size:13px; color:#6b7a9b; white-space:nowrap; }
.timeline-title { margin:0; font-size:20px; color:#20345f; }
.timeline-summary { margin:0; font-size:15px; color:#22324d; line-height:1.55; }
.timeline-meta { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.timeline-chip { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:#f7faff; border:1px solid #d8e1f5; color:#4d6087; font-size:12px; }
.timeline-actions { margin-top:14px; }
.timeline-details { margin-top:14px; padding-top:14px; border-top:1px dashed #d7e0f5; display:grid; gap:8px; }
.timeline-detail-row { display:grid; grid-template-columns:160px 1fr; gap:12px; font-size:13px; }
.timeline-detail-row strong { color:#566886; }
.timeline-detail-list { margin:0; padding-left:18px; color:#4f617f; }
@media (max-width: 1160px) { .timeline-summary-grid { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width: 820px) { .timeline-summary-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px) { .timeline-summary-grid { grid-template-columns:1fr; } .timeline-head { flex-direction:column; } .timeline-stamp { white-space:normal; } .timeline-detail-row { grid-template-columns:1fr; } }
</style>
{% endblock %}

{% block shell_body %}
{% include 'workflows/includes/app_header.html' with header_show_home=1 header_show_dashboard=1 header_inside_shell=1 %}

<div class="toolbar">
  <div>
    <h1>{% trans "Request Timeline" %}</h1>
    <p class="sub">{{ request_label }}</p>
  </div>
  <div class="actions">
    <a class="btn btn-secondary" href="/requests/">{% trans "Zum Dashboard" %}</a>
  </div>
</div>

<div class="card">
  <div class="timeline-summary-grid">
    <div class="timeline-stat">
      <label>{% trans "Typ" %}</label>
      <strong>{{ request_kind|capfirst }}</strong>
    </div>
    <div class="timeline-stat">
      <label>{% trans "Name" %}</label>
      <strong>{{ request_obj.full_name }}</strong>
    </div>
    <div class="timeline-stat">
      <label>{% trans "Status" %}</label>
      <strong>{{ request_obj.get_processing_status_display }}</strong>
    </div>
    <div class="timeline-stat">
      <label>{% trans "E-Mail" %}</label>
      <strong>{{ request_obj.work_email }}</strong>
    </div>
    <div class="timeline-stat">
      <label>{% trans "Hardware-Übergabetermin" %}</label>
      <strong>{% if handover_date %}{{ handover_date|date:"Y-m-d" }}{% else %}-{% endif %}</strong>
    </div>
  </div>

  <div class="timeline-list">
    {% for row in timeline_rows %}
      <article class="timeline-item" data-kind="{{ row.kind }}">
        <div class="timeline-head">
          <div class="timeline-title-wrap">
            <span class="timeline-kind">{{ row.kind }}</span>
            <h2 class="timeline-title">{{ row.title }}</h2>
          </div>
          <div class="timeline-stamp">{{ row.created_at|date:"Y-m-d H:i:s" }}</div>
        </div>

        <p class="timeline-summary">{{ row.summary }}</p>

        {% if row.meta %}
          <div class="timeline-meta">
            <span class="timeline-chip">{{ row.meta }}</span>
          </div>
        {% endif %}

        {% if row.url %}
          <div class="timeline-actions">
            <a class="btn btn-secondary" href="{{ row.url }}" target="_blank" rel="noopener">{% trans "PDF öffnen" %}</a>
          </div>
        {% endif %}

        {% if row.details %}
          <div class="timeline-details">
            {% for key, value in row.details.items %}
              <div class="timeline-detail-row">
                <strong>{{ key }}</strong>
                <div>
                  {% if key == 'request_labels' and value %}
                    <ul class="timeline-detail-list">
                      {% for item in value %}
                        <li>{{ item }}</li>
                      {% endfor %}
                    </ul>
                  {% else %}
                    {{ value }}
                  {% endif %}
                </div>
              </div>
            {% endfor %}
          </div>
        {% endif %}
      </article>
    {% empty %}
      <div class="empty-state">{% trans "Noch keine Timeline-Einträge vorhanden." %}</div>
    {% endfor %}
  </div>
</div>
{% endblock %}