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

{% block title %}Detail Rekening Pembayaran{% endblock %}

{% block page_title %}
    <i class="fas fa-university text-green-600 mr-2"></i>
    Detail Rekening Pembayaran
{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
            <div class="flex items-center justify-between">
                <h2 class="text-xl font-semibold text-gray-900">Detail Rekening Pembayaran</h2>
                <div class="flex space-x-2">
                    <a href="{% url 'event_admin:rekening_pembayaran_edit' rekening.id %}" 
                       class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-yellow-600 hover:bg-yellow-700">
                        <i class="fas fa-edit mr-2"></i>Edit
                    </a>
                    <a href="{% url 'event_admin:rekening_pembayaran_list' %}" 
                       class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                        Kembali
                    </a>
                </div>
            </div>
        </div>
        
        <div class="px-6 py-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
                    <label class="block text-xs font-medium text-gray-500 mb-1">Nama Bank</label>
                    <p class="text-gray-900 font-semibold">{{ rekening.nama_bank }}</p>
                </div>

                <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
                    <label class="block text-xs font-medium text-gray-500 mb-1">Nomor Rekening</label>
                    <p class="text-gray-900 font-mono text-lg font-semibold">{{ rekening.nomor_rekening }}</p>
                </div>

                <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
                    <label class="block text-xs font-medium text-gray-500 mb-1">Nama Pemilik</label>
                    <p class="text-gray-900">{{ rekening.nama_pemilik }}</p>
                </div>

                <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
                    <label class="block text-xs font-medium text-gray-500 mb-1">Status</label>
                    {% if rekening.is_active %}
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                        Aktif
                    </span>
                    {% else %}
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                        Nonaktif
                    </span>
                    {% endif %}
                </div>

                <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
                    <label class="block text-xs font-medium text-gray-500 mb-1">Dibuat</label>
                    <p class="text-gray-900 text-sm">{{ rekening.created_at|date:"d M Y H:i" }}</p>
                </div>

                <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
                    <label class="block text-xs font-medium text-gray-500 mb-1">Diperbarui</label>
                    <p class="text-gray-900 text-sm">{{ rekening.updated_at|date:"d M Y H:i" }}</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}