{% extends 'index.html' %} {% block content %} {% load i18n %} {% load widget_tweaks %} {% load basefilters %}
<main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
    <section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">
        <div class="oh-main__titlebar oh-main__titlebar--left">
            <h1 class="oh-main__titlebar-title fw-bold">
                {% trans "Question Template" %}
            </h1>
            <a class="oh-main__titlebar-search-toggle" role="button" aria-label="Toggle Search"
                @click="searchShow = !searchShow">
                <ion-icon name="search-outline" class="oh-main__titlebar-serach-icon"></ion-icon>
            </a>
        </div>
        <div class="oh-main__titlebar oh-main__titlebar--right">
            <div class="oh-main__titlebar-button-container">
                <div class="oh-btn-group ml-2">
                    {% if perms.pms.add_questiontemplate or request.user|filtersubordinates %}
                        <div>
                            <button class="oh-btn oh-btn--secondary" role="button" data-toggle="oh-modal-toggle"
                                data-target="#objectCreateModal" hx-get="{% url 'question-template-creation' %}"
                                hx-target="#objectCreateModalTarget">
                                <ion-icon name="add-outline"></ion-icon>
                                {% trans "Create" %}
                            </button>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </section>
    <div class="oh-wrapper">
        <div id="questionTemplateList">
            {% include "feedback/question_template/question_template_list.html" %}
        </div>
    </div>
</main>

<script>
    var errorElement = $("#id_question_template_error");
    $(errorElement).hide();

    $("form").on("submit", function (event) {
        event.preventDefault();

        var fieldValue = $("#id_question_template").val();

        if (fieldValue.trim() === "") {
            $(errorElement).show();
            errorElement.text("This field is required.");
            errorElement.insertAfter($("#id_question_template"));
        } else if (fieldValue.length > 100) {
            $(errorElement).show();
            errorElement.text("The field cannot contain more than 100 characters.");
            errorElement.insertAfter($("#id_question_template"));
        } else {
            errorElement.text("");
            errorElement.remove();
            // Submit the form
            this.submit();
        }
    });
</script>

{% endblock content %}