{% extends 'admin/base.html' %}

{% block title %}Hapus Galeri - Admin Panel{% endblock %}
{% block page_title %}Hapus Galeri{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Header -->
    <div class="flex justify-between items-center">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Hapus Galeri</h1>
            <p class="text-gray-600">Konfirmasi penghapusan galeri</p>
        </div>
        <a href="{% url 'admin_panel:galeri_list' %}" 
           class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
            <i class="fas fa-arrow-left mr-2"></i>
            Kembali
        </a>
    </div>
    
    <!-- Confirmation -->
    <div class="bg-white shadow rounded-lg p-6">
        <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-triangle text-yellow-400"></i>
                </div>
                <div class="ml-3">
                    <p class="text-sm text-yellow-700">
                        Apakah Anda yakin ingin menghapus galeri <strong>{{ galeri.judul }}</strong>? Tindakan ini tidak dapat dibatalkan.
                    </p>
                </div>
            </div>
        </div>
        
        {% if galeri.gambar %}
        <div class="mb-4">
            <img src="{{ galeri.gambar.url }}" alt="{{ galeri.judul }}" class="h-32 w-32 object-cover rounded">
        </div>
        {% endif %}
        
        <form method="POST">
            {% csrf_token %}
            <div class="flex items-center justify-end space-x-3 pt-4 border-t">
                <a href="{% url 'admin_panel:galeri_list' %}" 
                   class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md">
                    Batal
                </a>
                <button type="submit" 
                        class="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-md">
                    <i class="fas fa-trash mr-2"></i>
                    Hapus
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}