{% extends "base.html" %}
{% block title %}Quick Replies{% endblock %}
{% block page_title %}Quick Replies{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
  <p style="color:var(--muted);font-size:13px;margin:0;">
    Pre-written responses that IT staff can insert into ticket comments with one click.
  </p>
  <a href="{{ url_for('admin.canned_response_new') }}" class="btn btn-primary">
    <i class="bi bi-plus-circle me-1"></i>New Quick Reply
  </a>
</div>

{% if items %}
{% set ns = namespace(last_cat='') %}
{% for item in items %}
  {% if item.category and item.category != ns.last_cat %}
  <h6 style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;
             color:var(--muted);margin:20px 0 8px;">{{ item.category }}</h6>
  {% set ns.last_cat = item.category %}
  {% elif not item.category and ns.last_cat %}
  <h6 style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;
             color:var(--muted);margin:20px 0 8px;">Uncategorised</h6>
  {% set ns.last_cat = '' %}
  {% endif %}

  <div class="card mb-2 {% if not item.is_active %}opacity-50{% endif %}">
    <div class="card-body py-3 px-4 d-flex align-items-start gap-3">
      <div style="flex:1;min-width:0;">
        <div class="d-flex align-items-center gap-2 mb-1">
          <span style="font-size:14px;font-weight:600;">{{ item.title }}</span>
          {% if not item.is_active %}
          <span class="badge bg-secondary" style="font-size:10px;">Inactive</span>
          {% endif %}
        </div>
        <div style="font-size:13px;color:var(--muted);white-space:pre-wrap;max-height:60px;overflow:hidden;text-overflow:ellipsis;">{{ item.body }}</div>
        <div style="font-size:11px;color:var(--muted2);margin-top:4px;">
          Added by {{ item.creator.full_name }} · {{ item.created_at.strftime('%b %d, %Y') }}
        </div>
      </div>
      <div class="d-flex gap-2 flex-shrink-0">
        <a href="{{ url_for('admin.canned_response_edit', item_id=item.id) }}"
           class="btn btn-secondary btn-sm"><i class="bi bi-pencil"></i></a>
        <form method="POST"
              action="{{ url_for('admin.canned_response_delete', item_id=item.id) }}"
              data-confirm="Delete this quick reply?" data-confirm-title="Delete Quick Reply" data-confirm-ok="Delete">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
          <button type="submit" class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
        </form>
      </div>
    </div>
  </div>
{% endfor %}
{% else %}
<div class="card">
  <div class="p-5 text-center" style="color:var(--muted);">
    <i class="bi bi-chat-square-text" style="font-size:40px;display:block;margin-bottom:12px;"></i>
    No quick replies yet. Create one to speed up IT responses.
  </div>
</div>
{% endif %}
{% endblock %}