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

{% block title %}Detail Donasi - {{ block.super }}{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <div class="mb-8">
            <div class="flex items-center space-x-4 mb-4">
                <a href="{% url 'anggota:keuangan_donasi_list' %}" class="text-gray-600 hover:text-gray-900">
                    <i class="fas fa-arrow-left text-xl"></i>
                </a>
                <div>
                    <h1 class="text-3xl font-bold text-gray-900">Detail Donasi</h1>
                    <p class="text-gray-600">Informasi lengkap donasi Anda</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm p-8">
            <!-- Status Badge -->
            <div class="mb-6">
                {% if donasi.status == 'confirmed' %}
                    <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold bg-green-100 text-green-800">
                        <i class="fas fa-check-circle mr-2"></i>
                        Terkonfirmasi
                    </span>
                {% elif donasi.status == 'pending' %}
                    <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold bg-yellow-100 text-yellow-800">
                        <i class="fas fa-clock mr-2"></i>
                        Pending
                    </span>
                {% else %}
                    <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold bg-red-100 text-red-800">
                        <i class="fas fa-times-circle mr-2"></i>
                        Dibatalkan
                    </span>
                {% endif %}
            </div>

            <!-- Donasi Details -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                    <p class="text-sm text-gray-600 mb-1">Jumlah Donasi</p>
                    <p class="text-2xl font-bold text-gray-900">{{ donasi.jumlah|currency }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-600 mb-1">Tanggal Dibuat</p>
                    <p class="text-lg font-semibold text-gray-900">{{ donasi.created_at|date:"d F Y, H:i" }}</p>
                </div>
            </div>

            <!-- Pesan -->
            {% if donasi.pesan %}
            <div class="mb-6">
                <p class="text-sm text-gray-600 mb-2">Pesan</p>
                <p class="text-gray-900 bg-gray-50 p-4 rounded-lg">{{ donasi.pesan|linebreaks }}</p>
            </div>
            {% endif %}

            <!-- Back Button -->
            <div class="mt-8">
                <a href="{% url 'anggota:keuangan_donasi_list' %}" class="inline-flex items-center px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold rounded-lg transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Kembali
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}