{% extends "base.html" %}

{% block title %}Pengaturan{% endblock %}
{% block page_title %}Pengaturan Akun{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="islamic-pattern-bg px-8 py-6">
            <h3 class="text-xl font-bold text-white">Profil & Preferensi</h3>
            <p class="text-emerald-100 text-sm mt-1">Perbarui informasi akun dan pengaturan bahasa Anda.</p>
        </div>

        <form method="POST" class="p-8">
            {{ form.hidden_tag() }}
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- Profile Section -->
                <div class="space-y-6">
                    <h4 class="text-lg font-semibold text-gray-800 border-b pb-2">Informasi Pribadi</h4>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Nama Lengkap</label>
                        {{ form.name(class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all") }}
                        {% for error in form.name.errors %}
                        <span class="text-red-500 text-xs mt-1">{{ error }}</span>
                        {% endfor %}
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                        {{ form.email(class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all") }}
                        {% for error in form.email.errors %}
                        <span class="text-red-500 text-xs mt-1">{{ error }}</span>
                        {% endfor %}
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Bahasa / Language / اللغة</label>
                        {{ form.language(class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all") }}
                        <p class="text-xs text-gray-500 mt-1 italic">* Perubahan bahasa akan diterapkan pada antarmuka utama.</p>
                    </div>
                </div>

                <!-- Password Section -->
                <div class="space-y-6 bg-gray-50 p-6 rounded-2xl border border-gray-100">
                    <h4 class="text-lg font-semibold text-gray-800 border-b pb-2">Keamanan</h4>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Password Saat Ini</label>
                        {{ form.current_password(class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all", placeholder="Wajib jika ganti password") }}
                        {% for error in form.current_password.errors %}
                        <span class="text-red-500 text-xs mt-1">{{ error }}</span>
                        {% endfor %}
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Password Baru</label>
                        {{ form.new_password(class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all") }}
                        {% for error in form.new_password.errors %}
                        <span class="text-red-500 text-xs mt-1">{{ error }}</span>
                        {% endfor %}
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Konfirmasi Password Baru</label>
                        {{ form.confirm_password(class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all") }}
                        {% for error in form.confirm_password.errors %}
                        <span class="text-red-500 text-xs mt-1">{{ error }}</span>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <div class="mt-8 pt-6 border-t flex items-center justify-end gap-4">
                <a href="{{ url_for('index') }}" class="px-6 py-2.5 text-sm font-medium text-gray-600 hover:text-gray-800 transition-colors">Batal</a>
                <button type="submit" class="px-8 py-2.5 bg-primary-600 text-white rounded-xl font-semibold hover:bg-primary-700 shadow-lg shadow-primary-200 transition-all flex items-center gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    Simpan Perubahan
                </button>
            </div>
        </form>
    </div>

    <!-- Info Box -->
    <div class="mt-6 bg-blue-50 border border-blue-100 rounded-xl p-4 flex gap-3">
        <svg class="w-5 h-5 text-blue-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        <p class="text-sm text-blue-700">
            Mengganti email akan mengubah data login Anda. Pastikan email yang Anda masukkan valid dan aktif.
        </p>
    </div>
</div>
{% endblock %}