{% extends "base.html" %}

{% block title %}Change Password - Dango{% endblock %}

{% block header %}{% endblock %}
{% block nav %}{% endblock %}
{% block footer %}{% endblock %}

{% block content %}
<main class="min-h-screen flex items-center justify-center bg-gray-50 px-4">
    <div class="max-w-md w-full" x-data="changePasswordForm()">
        <div class="text-center mb-8">
            <div class="text-5xl mb-3">🍡</div>
            <h1 class="text-2xl font-bold text-gray-900">Change Password</h1>
            <p class="text-sm text-gray-500 mt-1">Please set a new password to continue</p>
        </div>

        <div class="bg-white rounded-lg shadow-md p-8">
            <div x-show="success" x-cloak class="mb-4 p-3 bg-green-50 border border-green-200 rounded-md">
                <p class="text-sm text-green-700">Password changed successfully. Redirecting...</p>
            </div>

            <form @submit.prevent="submit()" x-show="!success">
                <div class="mb-4">
                    <label for="current" class="block text-sm font-medium text-gray-700 mb-1">Current Password</label>
                    <input type="password" id="current" x-model="currentPassword" required autocomplete="current-password"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-dango-500 focus:border-transparent">
                </div>

                <div class="mb-4">
                    <label for="new" class="block text-sm font-medium text-gray-700 mb-1">New Password</label>
                    <input type="password" id="new" x-model="newPassword" required autocomplete="new-password"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-dango-500 focus:border-transparent">
                    <p class="text-xs text-gray-400 mt-1">At least 8 characters</p>
                </div>

                <div class="mb-6">
                    <label for="confirm" class="block text-sm font-medium text-gray-700 mb-1">Confirm New Password</label>
                    <input type="password" id="confirm" x-model="confirmPassword" required autocomplete="new-password"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-dango-500 focus:border-transparent">
                </div>

                <div x-show="error" x-cloak class="mb-4 p-3 bg-red-50 border border-red-200 rounded-md">
                    <p class="text-sm text-red-700" x-text="error"></p>
                </div>

                <button type="submit" :disabled="loading"
                        class="w-full py-2 px-4 bg-dango-600 text-white rounded-md hover:bg-dango-700 focus:outline-none focus:ring-2 focus:ring-dango-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
                    <span x-show="!loading">Change Password</span>
                    <span x-show="loading" x-cloak>Updating...</span>
                </button>
            </form>
        </div>

        <p class="text-center text-xs text-gray-400 mt-6">Dango v{{ version }}</p>
    </div>
</main>
{% endblock %}

{% block scripts %}
<script>
function changePasswordForm() {
    return {
        currentPassword: '', newPassword: '', confirmPassword: '',
        error: '', success: false, loading: false,
        async submit() {
            this.error = '';
            if (this.newPassword !== this.confirmPassword) {
                this.error = 'Passwords do not match';
                return;
            }
            this.loading = true;
            try {
                const res = await fetch('/api/auth/change-password', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest'},
                    body: JSON.stringify({
                        current_password: this.currentPassword,
                        new_password: this.newPassword
                    })
                });
                if (res.ok) {
                    this.success = true;
                    setTimeout(() => { window.location.href = '/'; }, 1500);
                    return;
                }
                const data = await res.json();
                if (data.issues) {
                    this.error = data.issues.join('. ');
                } else {
                    this.error = data.message || 'Failed to change password';
                }
            } catch (e) {
                this.error = 'Unable to connect to server';
            }
            this.loading = false;
        }
    }
}
</script>
{% endblock %}