{% extends 'keuangan/base.html' %}
{% load currency_filters %}
{% block title %}Detail Donasi - {{ donasi.donatur_nama }}{% endblock %}
{% block page_title %}Detail Donasi{% endblock %}

{% block content %}
<div class="bg-white shadow rounded-lg overflow-hidden">
    <div class="px-4 lg:px-6 py-4 border-b border-gray-200 flex items-center justify-between">
        <h3 class="text-lg font-medium text-gray-900">Detail Donasi</h3>
        <a href="{% url 'keuangan:donasi_list' %}" class="text-sm text-gray-600 hover:text-gray-900">
            <i class="fas fa-arrow-left mr-1"></i>Kembali
        </a>
    </div>
    <div class="p-4 lg:p-6 space-y-4">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <p class="text-sm text-gray-500 mb-1">Donatur</p>
                <p class="text-base font-semibold text-gray-900">{{ donasi.donatur_nama }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500 mb-1">Email</p>
                <p class="text-base text-gray-900">{{ donasi.donatur_email }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500 mb-1">Telepon</p>
                <p class="text-base text-gray-900">{{ donasi.donatur_telepon|default:"-" }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500 mb-1">Jumlah</p>
                <p class="text-base font-semibold text-green-700">Rp {{ donasi.jumlah|number_idr }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500 mb-1">Status</p>
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
                    {% if donasi.status == 'confirmed' %}bg-green-100 text-green-800
                    {% elif donasi.status == 'pending' %}bg-yellow-100 text-yellow-800
                    {% else %}bg-red-100 text-red-800{% endif %}">
                    {{ donasi.get_status_display }}
                </span>
            </div>
            <div>
                <p class="text-sm text-gray-500 mb-1">Tanggal</p>
                <p class="text-base text-gray-900">{{ donasi.created_at|date:"d M Y H:i" }}</p>
            </div>
        </div>

        {% if donasi.pesan %}
        <div class="pt-4 border-t border-gray-200">
            <p class="text-sm text-gray-500 mb-1">Pesan</p>
            <p class="text-base text-gray-900 whitespace-pre-line">{{ donasi.pesan }}</p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}