{% extends "base.html" %}
{% block title %}Ticket Templates{% endblock %}
{% block page_title %}Ticket Templates{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
  <p style="font-size:13px;color:var(--muted);margin:0;">
    Pre-filled ticket scaffolds that employees can select on the New Ticket form to speed up submission.
  </p>
  <a href="{{ url_for('admin.ticket_template_new') }}" class="btn btn-primary btn-sm">
    <i class="bi bi-plus-lg me-1"></i>New Template
  </a>
</div>

<div class="card">
  <div class="card-header">
    <i class="bi bi-layout-text-window-reverse me-2"></i>Templates
    <span style="font-size:12px;color:var(--muted);font-family:'Space Mono',monospace;">({{ templates|length }})</span>
  </div>
  <div class="card-body p-0">
    {% if templates %}
    <div class="table-responsive">
    <table class="table mb-0">
      <thead>
        <tr>
          <th style="width:36px;"></th>
          <th>Name</th>
          <th>Category</th>
          <th>Priority</th>
          <th>Title Hint</th>
          <th>Order</th>
          <th>Status</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for t in templates %}
        <tr>
          <td style="color:var(--accent);font-size:18px;"><i class="bi {{ t.icon }}"></i></td>
          <td style="font-weight:600;font-size:13px;">{{ t.name }}</td>
          <td style="font-size:12px;color:var(--muted);">{{ t.category.replace('_',' ').title() }}</td>
          <td><span class="badge badge-{{ t.priority }}">{{ t.priority.upper() }}</span></td>
          <td style="font-size:12px;color:var(--muted);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
            {{ t.title_hint or '—' }}
          </td>
          <td style="font-size:12px;color:var(--muted);">{{ t.sort_order }}</td>
          <td>
            {% if t.is_active %}
            <span style="font-size:12px;color:var(--success);"><i class="bi bi-check-circle-fill"></i> Active</span>
            {% else %}
            <span style="font-size:12px;color:var(--muted);"><i class="bi bi-dash-circle"></i> Inactive</span>
            {% endif %}
          </td>
          <td>
            <div class="d-flex gap-1">
              <a href="{{ url_for('admin.ticket_template_edit', tmpl_id=t.id) }}"
                 class="btn btn-secondary btn-sm" title="Edit"><i class="bi bi-pencil"></i></a>
              <form method="POST" action="{{ url_for('admin.ticket_template_delete', tmpl_id=t.id) }}"
                    data-confirm="Delete template {{ t.name }}? This cannot be undone."
                    data-confirm-title="Delete Template" data-confirm-ok="Delete" style="margin:0;">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                <button type="submit" class="btn btn-sm"
                        style="background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.2);color:var(--danger);"
                        title="Delete"><i class="bi bi-trash"></i></button>
              </form>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    </div>
    {% else %}
    <div class="p-5 text-center" style="color:var(--muted);">
      <i class="bi bi-layout-text-window-reverse" style="font-size:40px;display:block;margin-bottom:12px;"></i>
      No templates yet. <a href="{{ url_for('admin.ticket_template_new') }}" style="color:var(--accent3);">Create your first template →</a>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}