{% extends 'layout.html' %}
{% block title %}Быстрый доступ{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <h2 class="text-dark font-weight-bold" style="margin: 0; color: #2c3e50;">
            <i class="fas fa-th-large mr-2"></i>Быстрый доступ
        </h2>
    </div>
</div>

<div class="row">
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-4">
        <a href="/employees" class="text-decoration-none">
            <div class="card h-100 dash-card bg-primary text-white border-0">
                <div class="card-body d-flex flex-column justify-content-center align-items-center py-5">
                    <div class="dash-icon"><i class="fas fa-users"></i></div>
                    <div class="dash-title">Сотрудники</div>
                </div>
            </div>
        </a>
    </div>

    {% for link in links %}
        {# Умная обработка цвета: поддержка HEX-кодов (#ff0000) и автозамена Bulma-классов на Bootstrap #}
        {% set custom_bg = '' %}
        {% set bg_class = '' %}
        
        {% if link.color_class %}
            {% if link.color_class.startswith('#') %}
                {% set custom_bg = 'background-color: ' ~ link.color_class ~ ';' %}
            {% else %}
                {# Заменяем is-primary/is-info на bg-primary/bg-info #}
                {% set bg_class = link.color_class | replace('is-', 'bg-') %}
            {% endif %}
        {% else %}
            {% set bg_class = 'bg-secondary' %}
        {% endif %}

    <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-4">
        <a href="{{ link.url }}" class="text-decoration-none" target="_blank">
            <div class="card h-100 dash-card text-white border-0 {{ bg_class }}" style="{{ custom_bg }}">
                <div class="card-body d-flex flex-column justify-content-center align-items-center py-5">
                    <div class="dash-icon">{{ link.emoji or '🔗' }}</div>
                    <div class="dash-title">{{ link.title }}</div>
                </div>
            </div>
        </a>
    </div>
    {% endfor %}
</div>

<style>
    /* Сетку теперь полностью контролирует адаптивный Bootstrap (.row и .col-), 
       оставляем только специфичные стили для анимации и типографики */
       
    .dash-card {
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        text-align: center;
        /* Резервный цвет для карточек без HEX и без класса */
        background-color: #34495e; 
    }

    .dash-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 15px rgba(0,0,0,0.2) !important;
    }

    .dash-icon {
        font-size: 48px;
        margin-bottom: 15px;
        line-height: 1;
        text-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    .dash-title {
        font-size: 20px;
        font-weight: 600;
        letter-spacing: 0.5px;
    }
    
    /* Защита от смены цвета текста при наведении */
    a:hover .dash-card {
        color: #ffffff;
    }
</style>
{% endblock %}