{% extends "base.html" %}
{% block title %}{{ 'Edit' if t else 'New' }} Template{% endblock %}
{% block page_title %}{{ 'Edit' if t else 'New' }} Ticket Template{% 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-layout-text-window-reverse me-2"></i>
        {{ 'Edit: ' + t.name if t else 'New Template' }}
      </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">Template Name *</label>
            <input type="text" class="form-control" name="name" required
                   value="{{ t.name if t else '' }}"
                   placeholder="e.g. VPN Access Issue"/>
          </div>

          <div class="row g-3 mb-3">
            <div class="col-md-6">
              <label class="form-label">Category</label>
              <select class="form-select" name="category">
                {% for cat in categories %}
                <option value="{{ cat }}" {% if t and t.category == cat %}selected{% endif %}>
                  {{ cat.replace('_',' ').title() }}
                </option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label">Default Priority</label>
              <select class="form-select" name="priority">
                {% for p in priorities %}
                <option value="{{ p }}" {% if t and t.priority == p %}selected{% elif not t and p == 'medium' %}selected{% endif %}>
                  {{ p.upper() }}
                </option>
                {% endfor %}
              </select>
            </div>
          </div>

          <div class="mb-3">
            <label class="form-label">Title Hint
              <span style="font-size:11px;color:var(--muted);font-weight:400;">
                — pre-fills the ticket title field
              </span>
            </label>
            <input type="text" class="form-control" name="title_hint"
                   value="{{ t.title_hint if t else '' }}"
                   placeholder="e.g. Cannot connect to VPN"/>
          </div>

          <div class="mb-3">
            <label class="form-label">Description Template
              <span style="font-size:11px;color:var(--muted);font-weight:400;">
                — pre-fills the description textarea (use newlines as prompts)
              </span>
            </label>
            <textarea class="form-control" name="description" rows="7"
                      placeholder="Steps to reproduce:&#10;1. &#10;&#10;Error message:&#10;&#10;Device / OS:">{{ t.description if t else '' }}</textarea>
          </div>

          <div class="row g-3 mb-3">
            <div class="col-md-6">
              <label class="form-label">Bootstrap Icon class
                <span style="font-size:11px;color:var(--muted);font-weight:400;">
                  — e.g. bi-shield-lock
                </span>
              </label>
              <div class="input-group">
                <span class="input-group-text" id="icon-preview" style="font-size:18px;color:var(--accent);">
                  <i class="bi {{ t.icon if t else 'bi-file-text' }}" id="icon-el"></i>
                </span>
                <input type="text" class="form-control" name="icon" id="icon-input"
                       value="{{ t.icon if t else 'bi-file-text' }}"
                       oninput="document.getElementById('icon-el').className='bi '+this.value"/>
              </div>
              <div class="form-text">
                Browse icons at
                <a href="https://icons.getbootstrap.com/" target="_blank" style="color:var(--accent3);">
                  icons.getbootstrap.com
                </a>
              </div>
            </div>
            <div class="col-md-3">
              <label class="form-label">Sort Order</label>
              <input type="number" class="form-control" name="sort_order" min="0"
                     value="{{ t.sort_order if t else 0 }}"/>
              <div class="form-text">Lower = shown first</div>
            </div>
            <div class="col-md-3 d-flex align-items-center" style="padding-top:28px;">
              <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" role="switch"
                       name="is_active" id="is-active"
                       {% if not t or t.is_active %}checked{% endif %}
                       style="width:40px;height:22px;cursor:pointer;"/>
                <label class="form-check-label ms-2" for="is-active"
                       style="font-size:13px;font-weight:600;">Active</label>
              </div>
            </div>
          </div>

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