{% extends 'base.html' %}

{% block title %}Склад{% endblock %}

{% block content %}
<div class="container-fluid px-3 py-3">
    <!-- Компактный заголовок -->
    <div class="mb-3">
        <h5 class="mb-2" style="font-weight: 500; font-size: 1.25rem;">Управление складом</h5>
        <small class="text-muted" style="font-size: 0.875rem;">Выберите операцию или справочник</small>
    </div>

    <!-- Единая сетка операций -->
    <div class="row g-3">
        <!-- 1. Документы поступления -->
        <div class="col-6 col-sm-6 col-md-4 col-lg-3">
            <a href="{% url 'inventory:incoming-list' %}" class="inventory-card text-decoration-none d-block">
                <div class="p-3 text-center">
                    <i class="bi bi-file-earmark-plus text-muted mb-2" style="font-size: 1.75rem;"></i>
                    <div class="mb-1" style="font-size: 0.95rem; font-weight: 600; color: #212529;">Документы поступления</div>
                    <small class="text-muted" style="font-size: 0.8rem; line-height: 1.3;">Коллективное поступление</small>
                </div>
            </a>
        </div>

        <!-- 2. Документы списания -->
        <div class="col-6 col-sm-6 col-md-4 col-lg-3">
            <a href="{% url 'inventory:writeoff-document-list' %}" class="inventory-card text-decoration-none d-block">
                <div class="p-3 text-center">
                    <i class="bi bi-file-earmark-minus text-muted mb-2" style="font-size: 1.75rem;"></i>
                    <div class="mb-1" style="font-size: 0.95rem; font-weight: 600; color: #212529;">Документы списания</div>
                    <small class="text-muted" style="font-size: 0.8rem; line-height: 1.3;">Коллективное списание</small>
                </div>
            </a>
        </div>

        <!-- 3. Инвентаризация -->
        <div class="col-6 col-sm-6 col-md-4 col-lg-3">
            <a href="{% url 'inventory:inventory-list' %}" class="inventory-card text-decoration-none d-block">
                <div class="p-3 text-center">
                    <i class="bi bi-clipboard-check text-muted mb-2" style="font-size: 1.75rem;"></i>
                    <div class="mb-1" style="font-size: 0.95rem; font-weight: 600; color: #212529;">Инвентаризация</div>
                    <small class="text-muted" style="font-size: 0.8rem; line-height: 1.3;">Переучет товаров</small>
                </div>
            </a>
        </div>

        <!-- 4. Трансформации -->
        <div class="col-6 col-sm-6 col-md-4 col-lg-3">
            <a href="{% url 'inventory:transformation-list' %}" class="inventory-card text-decoration-none d-block">
                <div class="p-3 text-center">
                    <i class="bi bi-arrow-repeat text-muted mb-2" style="font-size: 1.75rem;"></i>
                    <div class="mb-1" style="font-size: 0.95rem; font-weight: 600; color: #212529;">Трансформации</div>
                    <small class="text-muted" style="font-size: 0.8rem; line-height: 1.3;">Превращение товаров</small>
                </div>
            </a>
        </div>

        <!-- 5. Склады -->
        <div class="col-6 col-sm-6 col-md-4 col-lg-3">
            <a href="{% url 'inventory:warehouse-list' %}" class="inventory-card text-decoration-none d-block">
                <div class="p-3 text-center">
                    <i class="bi bi-building text-muted mb-2" style="font-size: 1.75rem;"></i>
                    <div class="mb-1" style="font-size: 0.95rem; font-weight: 600; color: #212529;">Склады</div>
                    <small class="text-muted" style="font-size: 0.8rem; line-height: 1.3;">Управление складами</small>
                </div>
            </a>
        </div>

        <!-- 6. Продажи -->
        <div class="col-6 col-sm-6 col-md-4 col-lg-3">
            <a href="{% url 'inventory:sale-list' %}" class="inventory-card text-decoration-none d-block">
                <div class="p-3 text-center">
                    <i class="bi bi-arrow-up-square text-muted mb-2" style="font-size: 1.75rem;"></i>
                    <div class="mb-1" style="font-size: 0.95rem; font-weight: 600; color: #212529;">Продажи</div>
                    <small class="text-muted" style="font-size: 0.8rem; line-height: 1.3;">Реализация товара</small>
                </div>
            </a>
        </div>

        <!-- 7. Перемещения -->
        <div class="col-6 col-sm-6 col-md-4 col-lg-3">
            <a href="{% url 'inventory:transfer-list' %}" class="inventory-card text-decoration-none d-block">
                <div class="p-3 text-center">
                    <i class="bi bi-arrow-left-right text-muted mb-2" style="font-size: 1.75rem;"></i>
                    <div class="mb-1" style="font-size: 0.95rem; font-weight: 600; color: #212529;">Перемещения</div>
                    <small class="text-muted" style="font-size: 0.8rem; line-height: 1.3;">Между складами</small>
                </div>
            </a>
        </div>

        <!-- 8. Остатки -->
        <div class="col-6 col-sm-6 col-md-4 col-lg-3">
            <a href="{% url 'inventory:stock-list' %}" class="inventory-card text-decoration-none d-block">
                <div class="p-3 text-center">
                    <i class="bi bi-box-seam text-muted mb-2" style="font-size: 1.75rem;"></i>
                    <div class="mb-1" style="font-size: 0.95rem; font-weight: 600; color: #212529;">Остатки</div>
                    <small class="text-muted" style="font-size: 0.8rem; line-height: 1.3;">Текущие остатки товаров</small>
                </div>
            </a>
        </div>

        <!-- 9. Партии -->
        <div class="col-6 col-sm-6 col-md-4 col-lg-3">
            <a href="{% url 'inventory:batch-list' %}" class="inventory-card text-decoration-none d-block">
                <div class="p-3 text-center">
                    <i class="bi bi-diagram-3 text-muted mb-2" style="font-size: 1.75rem;"></i>
                    <div class="mb-1" style="font-size: 0.95rem; font-weight: 600; color: #212529;">Партии</div>
                    <small class="text-muted" style="font-size: 0.8rem; line-height: 1.3;">Партии товаров</small>
                </div>
            </a>
        </div>

        <!-- 10. Резервирования -->
        <div class="col-6 col-sm-6 col-md-4 col-lg-3">
            <a href="{% url 'inventory:reservation-list' %}" class="inventory-card text-decoration-none d-block">
                <div class="p-3 text-center">
                    <i class="bi bi-bookmark-check text-muted mb-2" style="font-size: 1.75rem;"></i>
                    <div class="mb-1" style="font-size: 0.95rem; font-weight: 600; color: #212529;">Резервирования</div>
                    <small class="text-muted" style="font-size: 0.8rem; line-height: 1.3;">Активные резервы</small>
                </div>
            </a>
        </div>

        <!-- 11. Распределение -->
        <div class="col-6 col-sm-6 col-md-4 col-lg-3">
            <a href="{% url 'inventory:allocation-list' %}" class="inventory-card text-decoration-none d-block">
                <div class="p-3 text-center">
                    <i class="bi bi-distribute-vertical text-muted mb-2" style="font-size: 1.75rem;"></i>
                    <div class="mb-1" style="font-size: 0.95rem; font-weight: 600; color: #212529;">Распределение</div>
                    <small class="text-muted" style="font-size: 0.8rem; line-height: 1.3;">Распределение продаж</small>
                </div>
            </a>
        </div>
    </div>
</div>

<style>
/* Стили для карточек операций */
.inventory-card {
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    background-color: #ffffff;
    transition: all 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.inventory-card:hover {
    border-color: #6f42c1;
    background: linear-gradient(135deg, #fafafa 0%, #f5f3ff 100%);
    box-shadow: 0 4px 12px rgba(111, 66, 193, 0.15);
    transform: translateY(-1px);
}

.inventory-card:focus {
    outline: 2px solid #6f42c1;
    outline-offset: 2px;
}
</style>
{% endblock %}
