{% extends "base.html" %}
{% block title %}Ticket Priorities{% endblock %}
{% block breadcrumb %}
<nav class="mb-4" aria-label="Breadcrumb">
  <ol class="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
    <li><a href="{% url 'dashboard' %}" class="hover:text-gray-700 dark:hover:text-gray-300">Dashboard</a></li>
    <li class="text-gray-300 dark:text-gray-600">/</li>
    <li class="text-gray-900 dark:text-white font-medium" aria-current="page">Ticket Priorities</li>
  </ol>
</nav>
{% endblock %}
{% block extra_head %}

{% endblock %}
{% block content %}
<div class="mb-6 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
  <div>
    <h1 class="text-2xl font-bold">Ticket Priorities</h1>
    <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">{{ priorities.count }} priorities</p>
  </div>
</div>

{% if request.user.role != 'member' %}
<div class="dk-card divide-y divide-gray-200 dark:divide-gray-600 mb-6">
  <div class="px-6 py-4"><h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Add New Priority</h3><p class="text-xs text-gray-500 mt-0.5">Create a new ticket priority level</p></div>
  <div class="px-6 py-5">
    <form method="post" action="{% url 'ticket-priority-add' %}" class="flex items-end gap-3">
      {% csrf_token %}
      <div class="flex-1">
        <label class="block text-xs font-medium text-gray-500 mb-1">Name</label>
        <input type="text" name="name" required
          class="w-full text-sm border border-gray-200 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-950 focus:outline-none focus:ring-2 focus:ring-blue-500">
      </div>
      <div x-data="{ addColor: '#6B7280' }">
        <label class="block text-xs font-medium text-gray-500 mb-1">Color</label>
        <div class="flex items-center gap-2">
           <toolcool-color-picker popup-position="right" :color="addColor" @change="addColor = $event.detail.hex"></toolcool-color-picker>
           <input type="hidden" name="color" :value="addColor">
        </div>
      </div>
      <button type="submit" class="dk-btn dk-btn-primary"><i class="fas fa-plus"></i> Add</button>
    </form>
  </div>
</div>
{% endif %}

<div class="dk-card overflow-hidden divide-y divide-gray-200 dark:divide-gray-600">
  <div class="px-6 py-4"><h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Existing Priorities</h3><p class="text-xs text-gray-500 mt-0.5">{{ priorities.count }} priority level{{ priorities.count|pluralize }}</p></div>
  <div class="overflow-x-auto">
    <table class="w-full text-sm">
      <thead>
        <tr class="border-b border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800">
          <th class="text-left px-4 py-3 font-semibold text-xs text-gray-500 dark:text-gray-400">Color</th>
          <th class="text-left px-4 py-3 font-semibold text-xs text-gray-500 dark:text-gray-400">Name</th>
          {% if request.user.role != 'member' %}
          <th class="text-right px-4 py-3 font-semibold text-xs text-gray-500 dark:text-gray-400">Actions</th>
          {% endif %}
        </tr>
      </thead>
      <tbody>
        {% for p in priorities %}
        <tr x-data="{ editing: false, showEditPicker: false, name: '{{ p.name|escapejs }}', color: '{{ p.color|escapejs }}' }" class="border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800/50">
          <td class="px-4 py-3">
            <div class="flex items-center gap-2">
              <div x-show="!editing" class="w-6 h-6 rounded-full border border-gray-200" style="background-color: {{ p.color }}"></div>
              {% if request.user.role != 'member' %}
              <div x-show="editing" class="relative">
                <toolcool-color-picker popup-position="left" :color="color" @change="color = $event.detail.hex"></toolcool-color-picker>
                <input type="hidden" name="color" :value="color" form="edit-form-{{ p.id }}">
              </div>
              {% endif %}
            </div>
          </td>
          <td class="px-4 py-3">
            <span x-show="!editing" class="font-medium" x-text="name"></span>
            {% if request.user.role != 'member' %}
            <input x-show="editing" type="text" x-model="name" name="name" form="edit-form-{{ p.id }}" required
              class="w-full text-sm border border-gray-200 dark:border-gray-600 rounded-lg px-2 py-1 bg-white dark:bg-gray-950 focus:outline-none focus:ring-2 focus:ring-blue-500">
            {% endif %}
          </td>
          {% if request.user.role != 'member' %}
          <td class="px-4 py-3 text-right">
            <div x-show="!editing" class="flex justify-end gap-1">
              <button @click="editing = true" class="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors shadow-sm">
                Edit
              </button>
              <form method="post" action="{% url 'ticket-priority-delete' p.id %}" class="inline">
                {% csrf_token %}
                <button type="button" @click="confirmAction({title:'Delete Priority', message:'Delete this priority?', confirmText:'Delete', danger:true, onConfirm:function(){ $el.closest('form').submit() }})" class="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-red-600 dark:text-red-400 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors shadow-sm">Delete</button>
              </form>
            </div>
            <div x-show="editing" class="flex justify-end gap-1">
              <form method="post" action="{% url 'ticket-priority-edit' p.id %}" id="edit-form-{{ p.id }}" class="inline">
                {% csrf_token %}
                <input type="hidden" name="name" x-bind:value="name">
                <input type="hidden" name="color" x-bind:value="color">
              </form>
              <button type="submit" form="edit-form-{{ p.id }}" class="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-white bg-blue-600 border border-transparent rounded-lg hover:bg-blue-700 transition-colors shadow-sm">
                Save
              </button>
              <button @click="editing = false; name = '{{ p.name|escapejs }}'; color = '{{ p.color|escapejs }}'" class="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors shadow-sm">
                Cancel
              </button>
            </div>
          </td>
          {% endif %}
        </tr>
        {% empty %}
        <tr><td colspan="{% if request.user.role != 'member' %}3{% else %}2{% endif %}" class="text-center py-12 text-gray-400">No priorities defined yet</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}