{% extends 'base.html' %}

{% block title %}Restore Loan - Haven Grazuri Investment Limited{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto">
    <div class="bg-white shadow sm:rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <div class="sm:flex sm:items-start">
                <div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-green-100 sm:mx-0 sm:h-10 sm:w-10">
                    <span>↶</span>
                </div>
                <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
                    <h3 class="text-base font-semibold leading-6 text-gray-900">Restore Loan</h3>
                    <div class="mt-2">
                        <p class="text-sm text-gray-500">
                            Are you sure you want to restore this loan? It will be moved back to the active loans list.
                        </p>
                    </div>
                </div>
            </div>
            
            <!-- Loan Details -->
            <div class="mt-6 border-t border-gray-200 pt-6">
                <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Loan Number</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ loan.loan_number }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Client</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ loan.borrower.get_full_name }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Principal Amount</dt>
                        <dd class="mt-1 text-sm text-gray-900">KES {{ loan.principal_amount|floatformat:2 }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Total Amount</dt>
                        <dd class="mt-1 text-sm text-gray-900">KES {{ loan.total_amount|floatformat:2 }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Status</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ loan.get_status_display }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Deleted On</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ loan.deleted_at|date:"F d, Y H:i" }}</dd>
                    </div>
                    {% if loan.deleted_by %}
                    <div class="sm:col-span-2">
                        <dt class="text-sm font-medium text-gray-500">Deleted By</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ loan.deleted_by.get_full_name }}</dd>
                    </div>
                    {% endif %}
                </dl>
            </div>
            
            <!-- Actions -->
            <div class="mt-6 flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
                <a href="{% url 'loans:deleted_loans' %}" 
                   class="inline-flex justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                    Cancel
                </a>
                <form method="post" class="inline">
                    {% csrf_token %}
                    <button type="submit" 
                            class="inline-flex justify-center rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600">
                        <span>↶</span>
                        Restore Loan
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}