{% extends 'base.html' %}
{% block content %}
{% set s = ticket.status %}
{% set status_class = 'bg-secondary' %}
{% if s == 'open' %}{% set status_class = 'bg-warning text-dark' %}
{% elif s == 'in_progress' %}{% set status_class = 'bg-info text-dark' %}
{% elif s == 'closed' %}{% set status_class = 'bg-success' %}{% endif %}
{% set p = ticket.priority %}
{% set priority_class = 'bg-secondary' %}
{% if p == 'low' %}{% set priority_class = 'bg-secondary' %}
{% elif p == 'normal' %}{% set priority_class = 'bg-primary' %}
{% elif p == 'high' %}{% set priority_class = 'bg-danger' %}
{% elif p == 'urgent' %}{% set priority_class = 'bg-danger' %}{% endif %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <h2 class="mb-0">#{{ ticket.id }} — {{ ticket.title }}
    <span class="badge rounded-pill {{ status_class }} ms-2 align-middle">{{ ticket.status }}</span>
    <span class="badge rounded-pill {{ priority_class }} ms-1 align-middle">{{ ticket.priority }}</span>
  </h2>
  <a class="btn btn-outline-secondary" href="/tickets">Zurück</a>
</div>

<div class="row g-3">
  <div class="col-md-8">
    <div class="card mb-3">
      <div class="card-header">Beschreibung</div>
      <div class="card-body">
        <p class="mb-0" style="white-space: pre-wrap">{{ ticket.description or '–' }}</p>
      </div>
    </div>

    <div class="card mb-3">
      <div class="card-header">Aktivität & Kommentare</div>
      <div class="card-body">
        <form class="mb-3" method="post" action="/tickets/{{ticket.id}}/comment">
          <div class="row g-2 align-items-start">
            <div class="col-sm-3">
              <input class="form-control" name="author" placeholder="Dein Name (optional)">
            </div>
            <div class="col-sm-7">
              <input class="form-control" name="content" placeholder="Kommentar hinzufügen..." required>
            </div>
            <div class="col-sm-2 d-grid">
              <button class="btn btn-primary" type="submit">Posten</button>
            </div>
          </div>
        </form>
        <div class="list-group">
          {% for a in activities %}
          <div class="list-group-item">
            <div class="d-flex justify-content-between align-items-start">
              <div>
                <span class="badge bg-secondary me-2">{{ a.type }}</span>
                <span class="fw-semibold">{{ a.author or 'System' }}</span>
                <span class="text-muted small ms-2">{{ a.created_at }}</span>
              </div>
            </div>
            <div class="mt-1" style="white-space: pre-wrap">{{ a.message }}</div>
          </div>
          {% else %}
          <div class="list-group-item text-muted">Noch keine Aktivitäten.</div>
          {% endfor %}
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-header d-flex justify-content-between align-items-center">
        <span>Anhänge</span>
        <form class="d-flex" method="post" action="/tickets/{{ticket.id}}/upload" enctype="multipart/form-data">
          <input class="form-control form-control-sm me-2" type="file" name="file" required>
          <button class="btn btn-sm btn-primary" type="submit">Upload</button>
        </form>
      </div>
      <div class="card-body">
        <div class="row g-3">
          {% for a in attachments %}
          <div class="col-md-6">
            <div class="border rounded p-2 h-100">
              <div class="d-flex justify-content-between align-items-start">
                <div>
                  <div class="fw-semibold small">{{ a.filename }}</div>
                  <div class="text-muted small">{{ a.uploaded_at }}</div>
                </div>
                <form method="post" action="/attachments/{{a.id}}/delete" onsubmit="return confirm('Anhang löschen?');">
                  <button class="btn btn-sm btn-outline-danger">Löschen</button>
                </form>
              </div>
              <div class="mt-2">
                {% if a.content_type and a.content_type.startswith('image/') %}
                  <a href="/uploads/{{ a.stored_name }}" target="_blank"><img class="attachment-thumb" src="/uploads/{{ a.stored_name }}" alt="{{ a.filename }}"></a>
                {% else %}
                  <a href="/uploads/{{ a.stored_name }}" target="_blank">Download</a>
                {% endif %}
              </div>
            </div>
          </div>
          {% else %}
          <div class="col-12 text-muted">Keine Anhänge.</div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-header">Details</div>
      <div class="card-body">
        <form method="post">
          <div class="mb-3">
            <label class="form-label">Projekt</label>
            <input type="text" class="form-control" value="{{ ticket.project_name }}" readonly>
          </div>
          <div class="mb-3">
            <label class="form-label">Status</label>
            <select class="form-select" name="status">
              {% for s in ['open','in_progress','closed'] %}
              <option value="{{s}}" {% if ticket.status==s %}selected{% endif %}>{{ s }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label">Priorität</label>
            <select class="form-select" name="priority">
              {% for p in ['low','normal','high','urgent'] %}
              <option value="{{p}}" {% if ticket.priority==p %}selected{% endif %}>{{ p }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label">Zuständig</label>
            <input class="form-control" name="assignee" value="{{ ticket.assignee or '' }}">
          </div>
          <div class="d-grid">
            <button class="btn btn-primary" type="submit">Speichern</button>
          </div>
        </form>
        <hr>
        <div class="small text-muted">
          <div>Reporter: {{ ticket.reporter or '–' }}</div>
          <div>Erstellt: {{ ticket.created_at }}</div>
          <div>Aktualisiert: {{ ticket.updated_at }}</div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}