{% extends "base.html" %}{% block content %}
<div class="container mx-auto p-4 max-w-6xl">
    <div class="mb-6">
        <h1 class="text-3xl font-bold text-gray-900 mb-2">Мои книги</h1>
        <p class="text-gray-600">Управление вашими бронированиями и выдачами</p>
    </div>

    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-xl font-bold text-gray-900">Мои бронирования</h2>
            <span id="reservations-count" class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium">0</span>
        </div>
        <div id="reservations-container" class="space-y-3">
            <div class="text-center text-gray-500 py-8">
                Загрузка бронирований...
            </div>
        </div>
    </div>

    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-xl font-bold text-gray-900">Активные выдачи</h2>
            <span id="active-loans-count" class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm font-medium">0</span>
        </div>
        <div id="active-loans-container" class="space-y-3">
            <div class="text-center text-gray-500 py-8">
                Загрузка активных выдач...
            </div>
        </div>
    </div>

    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-xl font-bold text-gray-900">История возвратов</h2>
            <span id="returned-count" class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm font-medium">0</span>
        </div>
        <div id="returned-container" class="space-y-3">
            <div class="text-center text-gray-500 py-8">
                Загрузка истории...
            </div>
        </div>
    </div>
</div>
{% endblock %} {% block scripts %}
<script src="/static/page/my_books.js"></script>
{% endblock %}