{% extends "base.html" %}
{% block title %}New Support Ticket — Echo{% endblock %}
{% block content %}
<div class="max-w-2xl mx-auto">
  <header class="text-center mb-10">
    <h1 class="text-4xl font-bold tracking-tight text-zinc-100">New Ticket</h1>
  </header>
  <div class="bg-zinc-900 border border-zinc-800 rounded-lg p-6 shadow-sm">
    {% if message %}
      <div class="mb-4 border border-green-800 bg-green-900 text-green-300 rounded p-3">
        {{ message }}
      </div>
    {% endif %}

    <form method="post" action="/tickets/new" class="space-y-4">
      <div>
        <label for="title" class="block text-2xl font-medium text-zinc-300">Subject</label>
        <input type="text" id="title" name="title" required
               class="mt-1 block w-full rounded-md border border-zinc-700 bg-zinc-900 text-zinc-100 placeholder-zinc-500 shadow-sm focus:border-blue-500 focus:ring-blue-500"
               placeholder="Short summary of your issue" />
      </div>

      <div>
        <label for="description" class="block text-2xl font-medium text-zinc-300">Description</label>
        <textarea id="description" name="description" rows="6" required
                  class="mt-1 block w-full rounded-md border border-zinc-700 bg-zinc-900 text-zinc-100 placeholder-zinc-500 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                  placeholder="Describe the problem in detail..."></textarea>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label for="category" class="block text-2xl font-medium text-zinc-300">Category</label>
          <select id="category" name="category"
                  class="mt-1 block w-full rounded-md border border-zinc-700 bg-zinc-900 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
            <option value="general">General</option>
            <option value="hardware">Hardware</option>
            <option value="software">Software</option>
            <option value="network">Network</option>
            <option value="access">Account/Access</option>
          </select>
        </div>

        <div>
          <label for="priority" class="block text-2xl font-medium text-zinc-300">Priority</label>
          <select id="priority" name="priority"
                  class="mt-1 block w-full rounded-md border border-zinc-700 bg-zinc-900 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
            <option value="low">Low</option>
            <option value="medium" selected>Medium</option>
            <option value="high">High</option>
          </select>
        </div>
      </div>
      {% if templates and templates|length > 0 %}
        <div>
          <label for="form_template" class="block text-2xl font-medium text-zinc-300">Form Template</label>
          {% set sel_id = selected_template_id | default(None) %}
          <select id="form_template" name="context_template_id"
                  class="mt-1 block w-full rounded-md border border-zinc-700 bg-zinc-900 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
            <option value="">Select a template (optional)</option>
            {% for template in templates %}
              <option value="{{ template.id }}" {% if sel_id == template.id %}selected{% endif %}>{{ template.name }}</option>
            {% endfor %}
          </select>
        </div>
      {% endif %}
      <div id="context-fields" class="space-y-4"></div>
      <input type="hidden" id="context_payload" name="context_payload" value="[]" />

      <div class="flex items-center justify-end gap-3">
        {% set role_href = (user.role | lower) if user and user.role else 'end_user' %}
        <a href="/dashboard/{{ role_href }}" class="text-zinc-400 hover:text-zinc-100">Cancel</a>
        <button type="submit"
                class="inline-flex justify-center rounded-md bg-blue-600 px-4 py-2 text-white font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900">
          Submit Ticket
        </button>
      </div>
    </form>
  </div>
</div>
{% endblock %}

{% block scripts %}
  <script src="/static/js/submission_form.js"></script>
{% endblock %}