{% extends "base.html" %}
{% block content %}
<div class="page-head">
  <h1 class="page-title">{{ title }} (Projekte)</h1>
  <div class="page-actions">
    <button class="btn" id="open-new-ticket">Neues Ticket</button>
    <div class="dropdown">
      <button class="btn ghost" id="bulk-actions-btn">Aktionen ▾</button>
      <div class="dropdown-menu" id="bulk-menu" hidden>
        <div class="sz" style="padding:6px 10px">Status fuer Auswahl setzen:</div>
        <button class="dropdown-item" data-bulk-status="In Bearbeitung">In Bearbeitung</button>
        <button class="dropdown-item" data-bulk-status="Warten">Warten</button>
        <button class="dropdown-item" data-bulk-status="Geloest">Geloest</button>
        <button class="dropdown-item" data-bulk-status="Geschlossen">Geschlossen</button>
      </div>
    </div>
    <a class="btn ghost" href="">⟳</a>
  </div>
</div>

<div class="kpi-row">
  {% for k in kpis %}
  <div class="kpi">
    <div class="lbl">{{ k.label }}</div>
    <div class="val">{{ k.value }}</div>
    <div class="kpi-foot">
      <span class="delta {{ k.delta_class }}">{{ k.delta }}</span>
      <svg class="spark" viewBox="0 0 70 20" preserveAspectRatio="none"><polyline points="{{ k.spark }}"/></svg>
    </div>
  </div>
  {% endfor %}
</div>

<div class="toolbar">
  <div class="tabs">
    {% for t in tabs %}<a href="{{ t.href }}" class="{% if t.active %}active{% endif %}">{{ t.label }}</a>{% endfor %}
  </div>
  <form class="toolbar-search" method="get" action="">
    <input type="text" name="q" placeholder="Tickets suchen..." value="{{ q }}">
    <button class="btn ghost" type="submit">Filter</button>
  </form>
</div>

<div id="new-ticket-modal" class="modal" hidden>
  <div class="modal-box">
    <div class="modal-head"><h3>Neues Ticket</h3><button class="linklike" id="close-new-ticket">✕</button></div>
    <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</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>

<table class="tickets">
  <thead><tr>
    <th class="chk"><input type="checkbox" id="check-all"></th>
    <th>Ticket-Nr.</th><th>Titel (Projekt)</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 class="chk"><input type="checkbox" class="row-check" value="{{ r.id }}"></td>
      <td><span class="ticket-nr">{{ r.nr }}</span></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><span class="avatar sm">{{ r.initials }}</span> <span class="sz">{{ r.zugewiesen }}</span></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="9" class="sz">Keine Tickets.</td></tr>{% endif %}
  </tbody>
</table>
<div class="table-foot">
  <span class="sz">{{ pagination.label }}</span>
  <div class="pager">
    {% for p in pagination.pages %}
    <a href="{{ p.href }}" class="{% if p.active %}active{% endif %}">{{ p.num }}</a>
    {% endfor %}
  </div>
</div>
{% endblock %}