{% extends "base.html" %}
{% load i18n %}
{% block title %}
    {% translate "Change Password" %} - Eenos
{% endblock title %}
{% block content %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "Change Password" %}</h1>
            <div class="eenos-page-subtitle">
                {% translate "Update the password used to sign in to your user 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>{% translate "Account Settings" %}</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 "Change Password" %}</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 "Control Panel Password" %}</div>
                        <div class="eenos-panel-subtitle">{% translate "Choose a strong, unique password and store it securely." %}</div>
                    </div>
                    <i data-lucide="key-round" class="eenos-card-action-icon"></i>
                </div>
                <div class="eenos-notice eenos-notice-warning mb-4">
                    <div class="eenos-notice-icon" aria-hidden="true">
                        <i data-lucide="log-out"></i>
                    </div>
                    <div class="eenos-notice-content">
                        <div class="eenos-notice-title">{% translate "You will be signed out" %}</div>
                        <div class="eenos-notice-text">
                            {% translate "After the password is changed, sign in again using your new password." %}
                        </div>
                    </div>
                </div>
                <form method="post" class="eenos-form" id="eenos-form">
                    {% csrf_token %}
                    <input type="hidden" name="change_password" id="change_password" value="" />
                    <div class="row g-4">
                        <div class="col-12 col-xl-8">
                            <label for="id_password" class="form-label">{% translate "New Password" %}</label>
                            <div class="eenos-password-generator">
                                <div class="input-group">
                                    <div class="eenos-password-control">
                                        <input type="password"
                                               class="form-control eenos-password-input"
                                               name="password"
                                               id="id_password"
                                               required
                                               minlength="8"
                                               maxlength="128"
                                               autocomplete="new-password"
                                               placeholder="{% translate 'Enter a new password' %}"
                                               data-parsley-required-message="{% translate 'Please enter the new password.' %}"
                                               data-parsley-minlength-message="{% translate 'The password must contain at least 8 characters.' %}" />
                                    </div>
                                    <button type="button"
                                            class="btn btn-outline-secondary eenos-password-toggle"
                                            title="{% translate 'Show password' %}"
                                            aria-label="{% translate 'Show password' %}">
                                        <i data-lucide="eye"></i>
                                    </button>
                                    <button type="button"
                                            class="btn btn-outline-primary eenos-password-generate"
                                            title="{% translate 'Generate secure password' %}"
                                            aria-label="{% translate 'Generate secure password' %}">
                                        <i data-lucide="wand-sparkles"></i>
                                        <span class="d-none d-sm-inline">{% translate "Generate" %}</span>
                                    </button>
                                </div>
                                <div class="eenos-password-strength mt-2">
                                    <div class="progress" style="height: 5px">
                                        <div class="progress-bar eenos-password-strength-progress"
                                             role="progressbar"
                                             style="width: 0%"
                                             aria-valuemin="0"
                                             aria-valuemax="100"></div>
                                    </div>
                                    <small class="eenos-password-strength-text text-muted"></small>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-xl-8">
                            <label for="id_confirm" class="form-label">{% translate "Confirm New Password" %}</label>
                            <input type="password"
                                   class="form-control"
                                   name="confirm"
                                   id="id_confirm"
                                   required
                                   minlength="8"
                                   maxlength="128"
                                   autocomplete="new-password"
                                   placeholder="{% translate 'Enter the new password again' %}"
                                   data-parsley-equalto="#id_password"
                                   data-parsley-required-message="{% translate 'Please confirm the new password.' %}"
                                   data-parsley-minlength-message="{% translate 'The password must contain at least 8 characters.' %}"
                                   data-parsley-equalto-message="{% translate 'The passwords do not match.' %}" />
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="d-grid d-sm-flex justify-content-sm-start gap-2 mt-4">
        <button type="button" class="btn btn-primary change">
            <i data-lucide="key-round"></i>
            {% translate "Change Password" %}
        </button>
    </div>
    <div class="modal fade"
         id="changePasswordModal"
         tabindex="-1"
         aria-labelledby="changePasswordModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title d-flex align-items-center gap-2"
                            id="changePasswordModalLabel">
                            <i data-lucide="key-round"></i>
                            {% translate "Confirm Password Change" %}
                        </h5>
                        <div class="text-muted small mt-1">{% translate "Update the password for your control panel account." %}</div>
                    </div>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex align-items-center gap-3 mb-4">
                        <div class="flex-shrink-0" aria-hidden="true">
                            <i data-lucide="circle-user-round" class="eenos-card-action-icon"></i>
                        </div>
                        <div>
                            <div class="small text-muted">{% translate "Control panel account" %}</div>
                            <div class="fw-semibold">{{ request.session.user }}</div>
                        </div>
                    </div>
                    <div class="eenos-notice eenos-notice-warning mb-0">
                        <div class="eenos-notice-icon" aria-hidden="true">
                            <i data-lucide="triangle-alert"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-title">{% translate "Your current session will end" %}</div>
                            <div class="eenos-notice-text">{% translate "After changing the password, you will be signed out and must sign in again with the new password. Make sure you have saved it securely before continuing." %}</div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">
                        <i data-lucide="x"></i>
                        {% translate "Keep Current Password" %}
                    </button>
                    <button type="button" class="btn btn-primary" id="confirm_password_change">
                        <i data-lucide="key-round"></i>
                        {% translate "Change Password" %}
                    </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("changePasswordModal"));
          $(".change").on("click", function () {
            const parsleyForm = $form.parsley();
            parsleyForm.validate();
            if (parsleyForm.isValid()) modal.show();
          });
          $("#confirm_password_change").on("click", function () {
            $("#change_password").val("yes");
            document.getElementById("eenos-form").submit();
          });
        });
      })(jQuery);
    </script>
{% endblock extra_js %}