{% 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' %}" />
<link rel="stylesheet" href="{% static 'workflows/css/request_timeline.css' %}" />
{% 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="page-stack">
<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>

  {% if custom_field_details %}
  <section class="timeline-custom-fields">
    <h2>{% trans "Benutzerdefinierte Felder" %}</h2>
    <div class="timeline-custom-grid">
      {% for item in custom_field_details %}
      <div class="timeline-custom-item">
        <strong>{{ item.label }}</strong>
        <span>{{ item.value }}</span>
      </div>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  <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>
</div>
{% endblock %}