{% extends "base.html" %}

{% block title %}Change Password - Raccoon Timekeeper{% endblock %}
{% block tagline %}Update your password{% endblock %}

{% block content %}
<section class="card" style="max-width: 500px; margin: 0 auto;">
    <div class="card-header">
        <h2>Change Password</h2>
    </div>

    <form method="POST" class="auth-form" style="padding: 24px;">
        <div class="form-group">
            <label for="current_password">Current Password</label>
            <input type="password" id="current_password" name="current_password" required
                   placeholder="Enter your current password">
        </div>

        <div class="form-group">
            <label for="new_password">New Password</label>
            <input type="password" id="new_password" name="new_password" required
                   placeholder="Min 8 characters" minlength="8">
        </div>

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

        <div class="form-actions" style="border-top: none; background: none; padding: 16px 0 0 0;">
            <a href="{{ url_for('index') }}" class="btn btn-secondary">Cancel</a>
            <button type="submit" class="btn btn-primary">Update Password</button>
        </div>
    </form>
</section>

<script>
    document.querySelector('form').addEventListener('submit', function(e) {
        const newPass = document.getElementById('new_password').value;
        const confirm = document.getElementById('confirm_password').value;
        
        if (newPass !== confirm) {
            e.preventDefault();
            alert('New passwords do not match!');
        }
    });
</script>
{% endblock %}