{% extends "user_layout.html" %}

{% block title %}My Settings - BZOD{% endblock %}

{% block active_settings %}active{% endblock %}

{% block header_title %}Account Settings{% endblock %}

{% block content %}
{% if let Some(msg) = success %}
    <div class="alert alert-success">
        {{ msg }}
    </div>
{% endif %}
{% if let Some(err) = error %}
    <div class="alert alert-error">
        {{ err }}
    </div>
{% endif %}

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start;">
    <div class="card">
        <h3 style="font-size: 1.1rem; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem;">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
            Change Password
        </h3>

        <form action="/user/settings/password" method="POST">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
            <div class="form-group">
                <label for="current_password">Current Password</label>
                <input type="password" id="current_password" name="current_password" class="form-input" required autocomplete="current-password">
            </div>
            <div class="form-group">
                <label for="new_password">New Password</label>
                <input type="password" id="new_password" name="new_password" class="form-input" required minlength="8" autocomplete="new-password">
            </div>
            <button type="submit" class="btn">Update Password</button>
        </form>
    </div>

    <div class="card">
        <h3 style="font-size: 1.1rem; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem;">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
            Backup & Restore
        </h3>

        <div style="display: flex; flex-direction: column; gap: 1rem;">
            <a class="btn" href="/user/settings/backup">Download Backup</a>
            <form action="/user/settings/restore" method="POST" enctype="multipart/form-data">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                <div class="form-group">
                    <label for="backup_file">Restore Backup File</label>
                    <input type="file" id="backup_file" name="backup_file" class="form-input" accept=".tar.gz" required>
                </div>
                <div class="form-group">
                    <label for="confirm_text">Type RESTORE to confirm</label>
                    <input type="text" id="confirm_text" name="confirm_text" class="form-input" required autocomplete="off">
                </div>
                <button type="submit" class="btn btn-danger">Restore Backup</button>
            </form>
        </div>
    </div>
</div>
{% endblock %}