{% extends "base_generic.html" %}
{% load crispy_forms_tags %}

{% block pagetitle %}Service Token Creation{% endblock %}


{% block content %}
    {% if form.errors %}
        <script>
            {% for field in form %}
                {% for error in field.errors %}
                    displayToastTop({type:'error', string:'{{ error|escapejs }}', context:'form'});
                {% endfor %}
            {% endfor %}
            {% for error in form.non_field_errors %}
                displayToastTop({type:'error', string:'{{ error|escapejs }}', context:'form'});
            {% endfor %}
        </script>
    {% endif %}

    <div class="resource-form-shell token-create-editor">
        {% crispy form form.helper %}
    </div>
{% endblock %}

{% block morescripts %}
    <script>
        $(document).ready(function () {
            const tokenPresetField = $("#id_token_preset");
            const existingPrincipalField = $("#id_service_principal");
            const newPrincipalNameField = $("#id_new_service_principal_name");
            const oplogRow = $("#service-token-oplog-row");
            const projectScopeRow = $("#service-token-project-scope-row");
            const clientsRow = $("#service-token-clients-row");
            const projectsRow = $("#service-token-projects-row");
            const oplogField = $("#id_oplog");
            const projectScopeField = $("#id_project_scope");
            const clientsField = $("#id_clients");
            const projectsField = $("#id_projects");

            function toggleScopeFields() {
                const preset = tokenPresetField.val();
                const isOplogPreset = preset === "oplog_rw";
                const isAllAccessibleProjectScope = projectScopeField.val() === "all_accessible";
                const isSelectedClientScope = projectScopeField.val() === "selected_clients";
                const showClientFields = !isOplogPreset && isSelectedClientScope;
                const showProjectFields = !isOplogPreset && !isAllAccessibleProjectScope && !isSelectedClientScope;

                oplogRow.toggle(isOplogPreset);
                projectScopeRow.toggle(!isOplogPreset);
                clientsRow.toggle(showClientFields);
                projectsRow.toggle(showProjectFields);

                oplogField.prop("disabled", !isOplogPreset);
                projectScopeField.prop("disabled", isOplogPreset);
                clientsField.prop("disabled", !showClientFields);
                projectsField.prop("disabled", !showProjectFields);

                if (isOplogPreset) {
                    projectScopeField.val("selected");
                    clientsField.val([]);
                    projectsField.val([]);
                } else if (isAllAccessibleProjectScope) {
                    clientsField.val([]);
                    projectsField.val([]);
                } else if (isSelectedClientScope) {
                    projectsField.val([]);
                } else {
                    oplogField.val("");
                    clientsField.val([]);
                }
            }

            function toggleNewPrincipalField() {
                const hasExistingPrincipal = Boolean(existingPrincipalField.val());
                newPrincipalNameField.prop("disabled", hasExistingPrincipal);

                if (hasExistingPrincipal) {
                    newPrincipalNameField.val("");
                }
            }

            tokenPresetField.on("change", toggleScopeFields);
            projectScopeField.on("change", toggleScopeFields);
            existingPrincipalField.on("change", toggleNewPrincipalField);
            toggleScopeFields();
            toggleNewPrincipalField();
        });
    </script>
{% endblock %}