{% extends "base.html" %}
{% block title %}{{ 'Edit' if item else 'New' }} Quick Reply{% endblock %}
{% block page_title %}{{ 'Edit' if item else 'New' }} Quick Reply{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-7">
    <div class="card">
      <div class="card-header">
        <i class="bi bi-chat-square-text me-2"></i>
        {{ 'Edit Quick Reply' if item else 'Create Quick Reply' }}
      </div>
      <div class="card-body">
        <form method="POST">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>

          <div class="mb-3">
            <label class="form-label">Title *
              <span class="text-muted fw-normal" style="font-size:12px;">
                — shown in the dropdown menu on ticket comments
              </span>
            </label>
            <input type="text" class="form-control" name="title" required maxlength="120"
                   value="{{ item.title if item else '' }}"
                   placeholder="e.g. Please restart and confirm"/>
          </div>

          <div class="mb-3">
            <label class="form-label">Category
              <span class="text-muted fw-normal" style="font-size:12px;">— optional grouping label</span>
            </label>
            <input type="text" class="form-control" name="category" maxlength="50"
                   value="{{ item.category if item and item.category else '' }}"
                   placeholder="e.g. Hardware, Software, Escalation"/>
          </div>

          <div class="mb-3">
            <label class="form-label">Response Body *
              <span class="text-muted fw-normal" style="font-size:12px;">— Markdown supported</span>
            </label>
            <textarea class="form-control" name="body" rows="8" required
                      placeholder="Please restart your device and let us know if the issue persists.">{{ item.body if item else '' }}</textarea>
            <div class="form-text">
              Use **bold**, _italic_, `code`, and - lists. This text will be inserted
              directly into the comment box when selected.
            </div>
          </div>

          {% if item %}
          <div class="mb-4 d-flex align-items-center gap-2">
            <input type="checkbox" id="is_active" name="is_active"
                   {% if item.is_active %}checked{% endif %}
                   style="accent-color:var(--accent);width:16px;height:16px;"/>
            <label for="is_active" style="font-size:14px;margin:0;cursor:pointer;">
              Active (visible to IT staff in the quick replies dropdown)
            </label>
          </div>
          {% endif %}

          <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary">
              <i class="bi bi-check2 me-2"></i>{{ 'Save Changes' if item else 'Create Quick Reply' }}
            </button>
            <a href="{{ url_for('admin.canned_responses') }}" class="btn btn-secondary">Cancel</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}