{% extends "base.html" %}
{% load i18n %}
{% block title %}
    {% translate "Set Default Theme" %} - Eenos
{% endblock title %}
{% block content %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "Default Theme" %}</h1>
            <div class="eenos-page-subtitle">
                {% translate "Choose the default interface theme 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 Theme" %}</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 "Theme Preference" %}</div>
                        <div class="eenos-panel-subtitle">
                            {% translate "The selected theme will become your default reseller panel interface." %}
                        </div>
                    </div>
                    <i data-lucide="palette" class="eenos-card-action-icon"></i>
                </div>
                <form method="post" class="eenos-form" id="eenos-form">
                    {% csrf_token %}
                    <input type="hidden" name="change_theme" id="change_theme" value="" />
                    <div class="row">
                        <div class="col-12 col-md-8 col-xl-6">
                            <label for="id_theme" class="form-label">{% translate "Theme" %}</label>
                            <select class="form-select eenos-select-search"
                                    name="theme"
                                    id="id_theme"
                                    required
                                    data-parsley-required-message="{% translate 'Please select a theme.' %}">
                                <option value="">{% translate "Select a theme" %}</option>
                                {% for available_theme in themes %}
                                    <option value="{{ available_theme }}"
                                            {% if available_theme == theme %}selected{% endif %}>{{ available_theme }}</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 Theme" %}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade"
         id="changeThemeModal"
         tabindex="-1"
         aria-labelledby="changeThemeModalLabel"
         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="changeThemeModalLabel">
                        <i data-lucide="palette"></i>
                        {% translate "Change Default Theme" %}
                    </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 theme as your default control panel theme?" %}</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_theme_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("changeThemeModal"));
          $(".change").on("click", function () {
            const parsleyForm = $form.parsley();
            parsleyForm.validate();
            if (parsleyForm.isValid()) modal.show();
          });
          $("#confirm_theme_change").on("click", function () {
            $("#change_theme").val("yes");
            document.getElementById("eenos-form").submit();
          });
        });
      })(jQuery);
    </script>
{% endblock extra_js %}