{% extends 'anggota/base.html' %}
{% load static %}

{% block title %}Pengaturan - HMI Anggota{% endblock %}

{% block content %}
<div class="px-4 py-6 space-y-6">
    <!-- Header -->
    <div class="hmi-green rounded-2xl p-6 text-white">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold mb-2">Pengaturan</h1>
                <p class="text-green-100">Kelola preferensi dan keamanan akun</p>
            </div>
            <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center">
                <i class="fas fa-cog text-3xl text-white"></i>
            </div>
        </div>
    </div>

    <!-- Account Settings -->
    <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Pengaturan Akun</h3>
        <div class="space-y-4">
            <a href="{% url 'anggota:edit_profil' %}" class="flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
                <div class="flex items-center space-x-3">
                    <i class="fas fa-user text-blue-600"></i>
                    <div>
                        <p class="font-medium text-gray-900">Edit Profil</p>
                        <p class="text-sm text-gray-600">Ubah informasi personal</p>
                    </div>
                </div>
                <div class="text-green-600 hover:text-green-700">
                    <i class="fas fa-chevron-right"></i>
                </div>
            </a>
            
            <a href="{% url 'anggota:change_password' %}" class="flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
                <div class="flex items-center space-x-3">
                    <i class="fas fa-key text-yellow-600"></i>
                    <div>
                        <p class="font-medium text-gray-900">Ganti Password</p>
                        <p class="text-sm text-gray-600">Ubah password untuk keamanan</p>
                    </div>
                </div>
                <div class="text-green-600 hover:text-green-700">
                    <i class="fas fa-chevron-right"></i>
                </div>
            </a>
        </div>
    </div>

    <!-- Info Section -->
    <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
        <h3 class="text-lg font-semibold text-gray-900 mb-3">Informasi Pengaturan</h3>
        <p class="text-sm text-gray-600 leading-relaxed">
            Pengaturan yang tersedia saat ini meliputi pembaruan profil dan penggantian kata sandi.
            Silakan gunakan kedua menu di atas untuk melakukan perubahan pada data Anda.
            Fitur pengaturan tambahan akan ditampilkan di halaman ini setelah resmi tersedia.
        </p>
    </div>
</div>
{% endblock %}