{% extends "base.html" %}
{% block content %}
<h1 class="page-title">{{ title }}</h1>
<div class="kpi-row">
  {% for kpi in kpis %}
  <div class="kpi"><div class="lbl">{{ kpi.0 }}</div><div class="val">{{ kpi.1 }}</div></div>
  {% endfor %}
</div>

<div class="panel">
  <h3 style="margin-top:0">Neues Ticket</h3>
  <form method="post" action="/tickets/new">
    <input type="hidden" name="_csrf" value="{{ ctx.csrf }}">
    <div class="formrow"><input type="text" name="titel" placeholder="Titel" required></div>
    <div class="formrow"><textarea name="beschreibung" placeholder="Beschreibung"></textarea></div>
    <div class="grid-2">
      <div class="formrow"><label>Kategorie</label>
        <select name="kategorie" id="new-kategorie">
          {% for c in categories %}<option value="{{ c }}">{{ c }}</option>{% endfor %}
        </select>
      </div>
      <div class="formrow" id="change-typ-row" hidden><label>Change-Typ (Freigabe: Standard = vorautorisiert, Normal = CAB, Emergency = nachtraeglich)</label>
        <select name="change_typ">
          {% for t in change_types %}<option value="{{ t }}">{{ t }}</option>{% endfor %}
        </select>
      </div>
    </div>
    <div class="grid-2">
      <div class="formrow"><label>Impact (Auswirkung)</label>
        <select name="impact">
          {% for l in impact_levels %}<option value="{{ l }}" {% if l == "Mittel" %}selected{% endif %}>{{ l }}</option>{% endfor %}
        </select>
      </div>
      <div class="formrow"><label>Urgency (Dringlichkeit)</label>
        <select name="urgency">
          {% for l in impact_levels %}<option value="{{ l }}" {% if l == "Mittel" %}selected{% endif %}>{{ l }}</option>{% endfor %}
        </select>
      </div>
    </div>
    <div class="hint">Die Prioritaet ergibt sich automatisch aus der ITIL-Matrix Impact x Urgency.</div>
    <div class="formrow">
      <select name="service_id">
        <option value="">(kein Service)</option>
        {% for s in services %}<option value="{{ s.0 }}">{{ s.1 }}</option>{% endfor %}
      </select>
    </div>
    <button class="btn" type="submit">Anlegen</button>
  </form>
</div>

<div class="tabs">
  {% for t in tabs %}<a href="{{ t.href }}" class="{% if t.active %}active{% endif %}">{{ t.label }}</a>{% endfor %}
</div>

<table class="tickets">
  <thead><tr>
    <th>Ticket-Nr</th><th>Titel (Service)</th><th>Status</th><th>Prioritaet</th>
    <th>Kategorie</th><th>Zugewiesen an</th><th>Aktualisiert</th><th>Fortschritt</th>
  </tr></thead>
  <tbody>
  {% for r in rows %}
    <tr class="row" data-ticket-id="{{ r.id }}">
      <td>{{ r.nr }}</td>
      <td><b>{{ r.titel }}</b><div class="sz">{{ r.service }}</div></td>
      <td><span class="pill {{ r.status_class }}">{{ r.status_label }}</span></td>
      <td><span class="pill {{ r.prio_class }}">{{ r.prio }}</span></td>
      <td>{{ r.kategorie }}{% if !r.badge.is_empty() %}<div class="sz">{{ r.badge }}</div>{% endif %}</td>
      <td class="sz">{{ r.zugewiesen }}</td>
      <td class="sz">{{ r.updated }}</td>
      <td><div class="bar-track"><div class="bar-fill" style="width:{{ r.fortschritt }}%"></div></div> {{ r.fortschritt }}%</td>
    </tr>
  {% endfor %}
  {% if rows.is_empty() %}<tr><td colspan="8" class="sz">Keine Tickets.</td></tr>{% endif %}
  </tbody>
</table>
{% endblock %}