{% extends "base.html" %}
{% block title %}#{{ ticket.number }} · EPI-Support{% endblock %}
{% block content %}

<p><a class="back" href="{{ url_for('index') }}">← zurück zur Übersicht</a></p>

<section class="panel">
  <div class="panel-head">
    <h2>#{{ ticket.number }} – {{ ticket.title }}</h2>
    <a class="btn-sm" href="{{ zammad_url }}/#ticket/zoom/{{ ticket.id }}"
       target="_blank" rel="noopener">in Zammad öffnen ↗</a>
  </div>
  <dl class="meta">
    <div><dt>Status</dt><dd><span class="state state-{{ ticket.state }}">{{ ticket.state }}</span></dd></div>
    <div><dt>Priorität</dt><dd>{{ ticket.priority }}</dd></div>
    <div><dt>Bearbeiter</dt><dd>{{ ticket.owner if ticket.owner and ticket.owner != '-' else '—' }}</dd></div>
    <div><dt>Gruppe</dt><dd>{{ ticket.group }}</dd></div>
    <div><dt>Artikel</dt><dd>{{ ticket.article_count }}</dd></div>
    <div><dt>erstellt</dt><dd>{{ ticket.zammad_created_at|dt }}</dd></div>
    <div><dt>zuletzt geändert</dt><dd>{{ ticket.zammad_updated_at|dt }}</dd></div>
    <div><dt>geschlossen</dt><dd>{{ ticket.last_close_at|dt }}</dd></div>
  </dl>
</section>

<section class="panel">
  <div class="panel-head">
    <h2>Konversation{% if conversation %} ({{ conversation|length }}){% endif %}</h2>
  </div>
  {% if conv_error %}
    <p class="muted">Konversation konnte nicht geladen werden: {{ conv_error }}</p>
  {% elif conversation %}
    <div class="thread">
      {% for a in conversation %}
        <article class="msg msg-{{ a.sender|lower if a.sender else 'system' }}">
          <header class="msg-head">
            <span class="who">
              <span class="role role-{{ a.sender|lower if a.sender else 'system' }}">{{ a.sender or 'System' }}</span>
              {{ a.frm }}
            </span>
            <time>{{ a.created_at|dt }}</time>
          </header>
          {% if a.subject %}<div class="msg-subj">{{ a.subject }}</div>{% endif %}
          <div class="msg-body">{{ a.body }}</div>
          {% if a.attachments %}
            <div class="msg-att">📎 {{ a.attachments|join(', ') }}</div>
          {% endif %}
        </article>
      {% endfor %}
    </div>
  {% else %}
    <p class="muted">Keine Nachrichten vorhanden.</p>
  {% endif %}

  {% if ticket.state != 'closed' %}
  <form method="post" action="{{ url_for('reply_preview', ticket_id=ticket.id) }}" class="reply-form">
    <textarea name="body" rows="4" required
              placeholder="Antwort an den EPI-Support verfassen…"></textarea>
    <div class="form-actions">
      <span class="hint-inline">Geht nach Bestätigung live an EPI.</span>
      <button class="btn-sm" type="submit">Antworten →</button>
    </div>
  </form>
  {% else %}
  <p class="muted">Ticket ist geschlossen – zum Antworten ggf. ein neues Ticket anlegen.</p>
  {% endif %}
</section>

<section class="panel">
  <div class="panel-head"><h2>Verlauf (von uns erfasst)</h2></div>
  {% if timeline %}
    <ul class="timeline">
      {% for c in timeline %}
        <li>
          <span class="tag tag-{{ c.field }}">{{ c.label }}</span>
          <div class="chg">{{ c.old_value or '–' }} → <b>{{ c.new_value or '–' }}</b>
            {% if c.detail %}<div class="detail">{{ c.detail }}</div>{% endif %}
          </div>
          <time>{{ c.detected_at|dt }}</time>
        </li>
      {% endfor %}
    </ul>
  {% else %}
    <p class="muted">Seit Beobachtungsbeginn keine Änderung erfasst.</p>
  {% endif %}
</section>
{% endblock %}