{% extends "base.html" %}
{% load i18n %}
{% block title %}
    {% translate "Change Root Password" %} - Eenos
{% endblock %}
{% block content %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "Change Root Password" %}</h1>
            <div class="eenos-page-subtitle">
                {% translate "Change the root password used to access and administer this server." %}
            </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 "Preferences" %}</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 Root Password" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <form method="POST" class="eenos-form">
        {% csrf_token %}
        <div class="row">
            <div class="col-xl-8 col-lg-10">
                <div class="eenos-card">
                    <div class="eenos-panel-title">{% translate "Change Root Password" %}</div>
                    <div class="eenos-panel-subtitle mb-4">{% translate "Set a strong password for the server root account." %}</div>
                    <div class="eenos-password-generator mb-4">
                        <label for="new_root_pass" class="form-label">{% translate "New Root Password" %}</label>
                        <div class="input-group input-group-sm">
                            <input type="password"
                                   class="form-control eenos-password-input"
                                   id="new_root_pass"
                                   name="new_root_pass"
                                   autocomplete="new-password"
                                   data-parsley-required="true"
                                   data-parsley-required-message="{% translate 'Please enter a new root password.' %}">
                            <button type="button"
                                    class="btn btn-outline-secondary eenos-password-toggle"
                                    aria-label="{% translate 'Show password' %}"
                                    title="{% translate 'Show password' %}">
                                <i data-lucide="eye"></i>
                            </button>
                            <button type="button"
                                    class="btn btn-outline-secondary eenos-password-generate"
                                    aria-label="{% translate 'Generate password' %}"
                                    title="{% translate 'Generate password' %}">
                                <i data-lucide="refresh-cw"></i>
                            </button>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="eenos-password-strength mt-2">
                            <div class="eenos-password-strength-bar">
                                <div class="eenos-password-strength-progress"></div>
                            </div>
                            <div class="eenos-password-strength-text form-text">{% translate "Enter a password" %}</div>
                        </div>
                        <div class="form-text">
                            {% translate "Use at least 8 characters with a combination of letters, numbers, and special characters." %}
                        </div>
                    </div>
                    <div class="mb-4">
                        <label for="re_enter_pass" class="form-label">{% translate "Confirm New Root Password" %}</label>
                        <input type="password"
                               class="form-control form-control-sm"
                               id="re_enter_pass"
                               name="re_enter_pass"
                               autocomplete="new-password"
                               data-parsley-required="true"
                               data-parsley-required-message="{% translate 'Please re-enter the new root password.' %}"
                               data-parsley-equalto="#new_root_pass"
                               data-parsley-equalto-message="{% translate 'The passwords do not match.' %}">
                    </div>
                    <div class="eenos-form-actions">
                        <button type="submit" class="btn btn-primary btn-sm" name="change_password">
                            <i data-lucide="key-round"></i>
                            {% translate "Change Password" %}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
{% endblock %}
{% block extra_js %}{% endblock %}