{% extends "layouts/app.twig" %}

{% block title %}{{ __('New Support Ticket') }}{% endblock %}

{% block content %}
      <div class="page-wrapper">
        <!-- Page header -->
        <div class="page-header d-print-none">
          <div class="container-xl">
            <div class="row g-2 align-items-center">
              <div class="col">
                <!-- Page pre-title -->
                <div class="page-pretitle">
                  {{ __('Overview') }}
                </div>
                <h2 class="page-title">
                  {{ __('New Support Ticket') }}
                </h2>
              </div>
            </div>
          </div>
        </div>
        <!-- Page body -->
        <div class="page-body">
          <div class="container-xl">
            <div class="col-12">
            {% include 'partials/flash.twig' %}
              <div class="card">
                <div class="card-body">
                    <form action="/support/new" method="post">
                    {{ csrf.field | raw }}
                        <div class="mb-3">
                            <label for="category" class="form-label required">{{ __('Category') }}</label>
                            <select class="form-select" name="category" id="category" required>
                                <option selected disabled value="">{{ __('Select a category') }}...</option>
                                {% for category in categories %}
                                    <option value="{{ category.id }}">{{ category.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="subject" class="form-label required">{{ __('Subject') }}</label>
                            <input type="text" class="form-control" id="subject" name="subject" required>
                        </div>
                        <div class="mb-3">
                            <label for="message" class="form-label required">{{ __('Message') }}</label>
                            <textarea class="form-control" id="message" name="message" rows="5" required></textarea>
                        </div>
                </div>
                <div class="card-footer text-end">
                  <div class="d-flex">
                    <button type="submit" class="btn btn-primary">{{ __('Create Ticket') }}</button>
                  </div>
                </div>
                    </form>
              </div>
            </div>
          </div>
        </div>
        {% include 'partials/footer.twig' %}
      </div>
{% endblock %}