{% extends "helpdesk/base.html" %}{% load i18n %}

{% block helpdesk_title %}{% translate "Create Ticket" %}{% endblock %}

{% block helpdesk_breadcrumb %}
    <li class="breadcrumb-item">
        <a href="#">{% translate "Tickets" %}</a>
    </li>
    <li class="breadcrumb-item active">{% translate "Create Ticket" %}</li>
{% endblock %}

{% block helpdesk_head %}
{% endblock %}

{% block helpdesk_body %}
    <div class="container">
        <div class="card card-register mx-auto mt-5">
            <div class="card-header">{% translate "Submit a Ticket" %}</div>
            <div class="card-body">
                <p>
                    {% translate "Unless otherwise stated, all fields are required." %}
                    {% translate "Please provide as descriptive a title and description as possible." %}
                </p>

                {% if form.errors %}
                    {% include 'helpdesk/include/alert_form_errors.html' %}
                {% endif %}

                <form method='post' enctype='multipart/form-data'>
                    {% csrf_token %}
                    {% for field in form %}
                        {% if field.is_hidden %}
                            {{ field }}
                        {% else %}
                            <div class="mb-3">
                                <label for='id_{{ field.name }}'>
                                    {{ field.label }}
                                    {% if not field.field.required %}
                                        ({% translate "Optional" %})
                                    {% endif %}
                                </label>
                                {{ field }}
                                {% if field.errors %}
                                    <small class='error'>{{ field.errors }}</small>
                                {% endif %}
                                {% if field.help_text %}
                                    <small class='form_help_text help-block'>{% translate field.help_text %}</small>
                                {% endif %}
                            </div>
                        {% endif %}
                    {% endfor %}
                    <button type="submit" class="btn btn-primary btn-lg btn-block">
                        <i class="fa fa-send"></i> {% translate "Submit Ticket" %}
                    </button>
                </form>
            </div>
        </div>
    </div>

{% endblock %}

{% block helpdesk_js %}
    {{ form.media.js }}
    <script>
        // this function listens for changes on any file input, and
        // emits the appropriate event to update the input's text.
        // Needed to have properly styled file input buttons! (this really shouldn't be this hard...)
        $(document).on('change', ':file', function () {
            const input = $(this),
                inputWidgetNum = $(this).attr('id').split("file")[1],
                numFiles = input.get(0).files ? input.get(0).files.length : 1,
                label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
            input.trigger('fileselect', [numFiles, label, inputWidgetNum]);
        });
    </script>
{% endblock %}