{% extends "base.html" %}

{% block title %}Submit a Ticket · RelayDesk{% endblock %}
{% block meta_description %}Submit a support ticket with requester details, category, priority, and issue description.{% endblock %}

{% block content %}
<section class="page-hero py-5">
  <div class="container">
    <div class="row align-items-center g-4">
      <div class="col-lg-7">
        <span class="eyebrow">New support request</span>
        <h1 class="display-5 fw-bold mt-3">Tell the team what needs attention.</h1>
        <p class="lead text-muted">Your submission creates a trackable ticket with a dedicated reply thread and status timeline.</p>
      </div>
      <div class="col-lg-5">
        <div class="mini-panel">
          <strong>What happens next?</strong>
          <p class="mb-0">We’ll create your ticket, show a confirmation page, and add it to the searchable support queue.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="container mb-5">
  <div class="row justify-content-center">
    <div class="col-lg-9">
      <div class="support-card">
        <form method="post" novalidate>
          {% csrf_token %}
          {% include "core/partials/form_errors.html" with form=form %}
          <div class="row g-4">
            <div class="col-md-6">
              <label class="form-label" for="{{ form.requester_name.id_for_label }}">{{ form.requester_name.label }}</label>
              {{ form.requester_name }}
              {% include "core/partials/field_errors.html" with field=form.requester_name %}
            </div>
            <div class="col-md-6">
              <label class="form-label" for="{{ form.requester_email.id_for_label }}">{{ form.requester_email.label }}</label>
              {{ form.requester_email }}
              {% include "core/partials/field_errors.html" with field=form.requester_email %}
            </div>
            <div class="col-md-6">
              <label class="form-label" for="{{ form.category.id_for_label }}">Category</label>
              {{ form.category }}
              {% include "core/partials/field_errors.html" with field=form.category %}
            </div>
            <div class="col-md-6">
              <label class="form-label" for="{{ form.priority.id_for_label }}">Priority</label>
              {{ form.priority }}
              {% include "core/partials/field_errors.html" with field=form.priority %}
            </div>
            <div class="col-12">
              <label class="form-label" for="{{ form.subject.id_for_label }}">Subject</label>
              {{ form.subject }}
              {% include "core/partials/field_errors.html" with field=form.subject %}
            </div>
            <div class="col-12">
              <label class="form-label" for="{{ form.description.id_for_label }}">{{ form.description.label }}</label>
              {{ form.description }}
              {% include "core/partials/field_errors.html" with field=form.description %}
            </div>
          </div>
          <div class="d-flex flex-column flex-sm-row gap-3 mt-4">
            <button class="btn btn-primary btn-lg" type="submit">Submit ticket</button>
            <a class="btn btn-outline-dark btn-lg" href="{% url 'ticket_list' %}">View queue</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>
{% endblock %}