{% extends "base.html" %}

{% block title %}Change Password - Enterprise VPN Hub{% endblock %}

{% block content %}
<div style="max-width: 480px; margin: 2rem auto;">
    <div class="card">
        <div class="card-header">
            <div>
                <h2 class="card-title">{% if forced %}Mandatory Password Change{% else %}Change Password{% endif %}</h2>
                <p style="color: var(--text-muted); font-size: 0.85rem; margin-top: 0.25rem;">
                    {% if forced %}
                        First administrative login detected. You must change the default password before proceeding.
                    {% else %}
                        Update your administrator password
                    {% endif %}
                </p>
            </div>
        </div>

        {% if forced %}
        <div class="alert alert-warning">
            <span><strong>Security Notice:</strong> The default administrator password must be updated immediately to secure this VPN appliance. All other admin pages are locked until completed.</span>
        </div>
        {% endif %}

        <form method="POST" action="/admin/change-password">
            <div class="form-group">
                <label for="curr_password">Current Password</label>
                <input type="password" id="curr_password" name="curr_password" required autofocus placeholder="Enter current password">
            </div>

            <div class="form-group">
                <label for="new_password">New Password (minimum 6 characters)</label>
                <input type="password" id="new_password" name="new_password" required minlength="6" placeholder="Enter new strong password">
            </div>

            <div class="form-group">
                <label for="confirm_password">Confirm New Password</label>
                <input type="password" id="confirm_password" name="confirm_password" required minlength="6" placeholder="Re-type new password">
            </div>

            <button type="submit" class="btn btn-primary" style="width: 100%; padding: 0.75rem;">
                Save New Password & Continue
            </button>
        </form>
    </div>
</div>
{% endblock %}