{% extends "base.html" %}

{% block content %}
<div class="space-y-6">
    {# Page Header #}
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">{{ _('Loan History') }}</h1>
            <p class="text-gray-600 mt-1">{{ _('View all past and current tablet loans') }}</p>
        </div>
        <a href="/" 
           class="inline-flex items-center gap-2 px-4 py-2 bg-cobalt-600 text-white rounded-lg hover:bg-cobalt-700 transition-colors">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
            </svg>
            {{ _('Back to Dashboard') }}
        </a>
    </div>

    {% if loans %}
        {# Desktop Table (hidden on mobile) #}
        <div class="table-container table-card-mobile">
            <table class="table-responsive">
                <thead>
                    <tr>
                        <th>{{ _('Tablet') }}</th>
                        <th>{{ _('Serial Number') }}</th>
                        <th>{{ _('Borrower') }}</th>
                        <th>{{ _('Loan Date') }}</th>
                        <th>{{ _('Return Date') }}</th>
                        <th>{{ _('Status') }}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for loan in loans %}
                    <tr>
                        <td>
                            <div class="font-medium text-gray-900">{{ loan.brand }} {{ loan.model }}</div>
                        </td>
                        <td>
                            <code class="text-sm bg-gray-100 px-2 py-1 rounded">{{ loan.serial_number }}</code>
                        </td>
                        <td>
                            <div class="font-medium text-gray-900">{{ loan.name }}</div>
                            <div class="text-sm text-gray-500">{{ loan.identification }}</div>
                        </td>
                        <td class="text-sm text-gray-500">
                            {{ loan.loan_date[:10] if loan.loan_date else _('N/A') }}
                            <br>
                            <span class="text-xs">{{ loan.loan_date[11:16] if loan.loan_date else '' }}</span>
                        </td>
                        <td class="text-sm text-gray-500">
                            {% if loan.return_date %}
                                {{ loan.return_date[:10] }}
                                <br>
                                <span class="text-xs">{{ loan.return_date[11:16] }}</span>
                            {% else %}
                                <span class="text-gray-400">-</span>
                            {% endif %}
                        </td>
                        <td>
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                         {% if loan.status == 'active' %}bg-green-100 text-green-800
                                         {% elif loan.status == 'returned' %}bg-blue-100 text-blue-800
                                         {% else %}bg-gray-100 text-gray-800{% endif %}">
                                {{ loan.status }}
                            </span>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {# Mobile Cards (hidden on desktop) #}
        <div class="mobile-cards hidden">
            {% for loan in loans %}
            <div class="mobile-card">
                <div class="flex justify-between items-start mb-3">
                    <div>
                        <div class="font-medium text-gray-900">{{ loan.brand }} {{ loan.model }}</div>
                        <div class="text-sm text-gray-500">{{ loan.name }}</div>
                    </div>
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                 {% if loan.status == 'active' %}bg-green-100 text-green-800
                                 {% elif loan.status == 'returned' %}bg-blue-100 text-blue-800
                                 {% else %}bg-gray-100 text-gray-800{% endif %}">
                        {{ loan.status }}
                    </span>
                </div>
                
                <div class="space-y-2">
                    <div class="card-row">
                        <span class="card-label">{{ _('Serial Number') }}</span>
                        <code class="card-value text-sm bg-gray-100 px-2 py-1 rounded">{{ loan.serial_number }}</code>
                    </div>
                    <div class="card-row">
                        <span class="card-label">{{ _('Borrower') }}</span>
                        <div class="card-value text-right">
                            <div>{{ loan.name }}</div>
                            <div class="text-xs text-gray-500">{{ loan.identification }}</div>
                        </div>
                    </div>
                    <div class="card-row">
                        <span class="card-label">{{ _('Loan Date') }}</span>
                        <span class="card-value">{{ loan.loan_date[:10] if loan.loan_date else _('N/A') }}</span>
                    </div>
                    {% if loan.return_date %}
                    <div class="card-row">
                        <span class="card-label">{{ _('Return Date') }}</span>
                        <span class="card-value">{{ loan.return_date[:10] }}</span>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="bg-white rounded-lg shadow p-8 text-center">
            <svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <p class="text-gray-500">{{ _('No loan history available.') }}</p>
            <a href="/loan_tablet" 
               class="mt-4 inline-block px-4 py-2 bg-cobalt-600 text-white rounded-lg hover:bg-cobalt-700">
                {{ _('Create a Loan') }}
            </a>
        </div>
    {% endif %}
</div>

<script>
// Show mobile cards on small screens
if (window.innerWidth <= 640) {
    document.querySelector('.table-card-mobile').style.display = 'none';
    document.querySelector('.mobile-cards').style.display = 'flex';
}
</script>
{% endblock %}