{% extends "base.html" %}
{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}
{% block title %}
    {% translate "Set Default Language" %} - Eenos
{% endblock title %}
{% block content %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "Default Language" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Choose the default language for your reseller control panel." %}</div>
        </div>
    </div>
    <nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}">
        <a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span>{% translate "My Account" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span class="eenos-breadcrumb-current" aria-current="page">{% translate "Default Language" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="row mt-4">
        <div class="col-12">
            <div class="eenos-card">
                <div class="eenos-card-header">
                    <div>
                        <div class="eenos-panel-title">{% translate "Language Preference" %}</div>
                        <div class="eenos-panel-subtitle">
                            {% translate "The selected language will be used by default when you sign in." %}
                        </div>
                    </div>
                    <i data-lucide="languages" class="eenos-card-action-icon"></i>
                </div>
                <form method="post" class="eenos-form" id="eenos-form">
                    {% csrf_token %}
                    <input type="hidden" name="change_language" id="change_language" value="" />
                    <div class="row">
                        <div class="col-12 col-md-8 col-xl-6">
                            <label for="id_language" class="form-label">{% translate "Language" %}</label>
                            <select class="form-select eenos-select-search"
                                    name="language"
                                    id="id_language"
                                    required
                                    data-parsley-required-message="{% translate 'Please select a language.' %}">
                                <option value="">{% translate "Select a language" %}</option>
                                {% for lang in LANGUAGES %}
                                    <option value="{{ lang.0 }}"
                                            {% if lang.0 == LANGUAGE_CODE %}selected{% endif %}>{{ lang.1 }} ({{ lang.0 }})</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="eenos-card-footer justify-content-start">
                        <button type="button" class="btn btn-primary change">
                            <i data-lucide="save"></i>
                            {% translate "Save Language" %}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade"
         id="changeLanguageModal"
         tabindex="-1"
         aria-labelledby="changeLanguageModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title d-flex align-items-center gap-2"
                        id="changeLanguageModalLabel">
                        <i data-lucide="languages"></i>
                        {% translate "Change Default Language" %}
                    </h5>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-0">{% translate "Use the selected language as your default control panel language?" %}</p>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                    <button type="button" class="btn btn-primary" id="confirm_language_change">
                        <i data-lucide="check"></i>
                        {% translate "Confirm" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock content %}
{% block extra_js %}
    <script>
      (function ($) {
        "use strict";
        $(function () {
          const $form = $("#eenos-form");
          const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById("changeLanguageModal"));
          $(".change").on("click", function () {
            const parsleyForm = $form.parsley();
            parsleyForm.validate();
            if (parsleyForm.isValid()) modal.show();
          });
          $("#confirm_language_change").on("click", function () {
            $("#change_language").val("yes");
            document.getElementById("eenos-form").submit();
          });
        });
      })(jQuery);
    </script>
{% endblock extra_js %}