{% extends "base.html" %}

{% block title %}Главная{% endblock %}

{% block extra_head %}
{{ANIMATIONS_CSS}}
{% endblock %}

{% block content %}
<!-- Слайдер -->
<div class="slider-wrapper mb-5">
    <div class="slider-container">
        <div class="slides">
            {% for i in range(1, 6) %}
            <div class="slide">
                <img src="{{ url_for('static', filename='images/slide' ~ i ~ '.jpg') }}"
                     alt="Слайд {{ i }}" loading="lazy">
            </div>
            {% endfor %}
        </div>
        <button class="prev" aria-label="Предыдущий слайд">&#10094;</button>
        <button class="next" aria-label="Следующий слайд">&#10095;</button>
        <!-- Индикаторы -->
        <div class="slider-dots">
            {% for i in range(5) %}
            <span class="dot {% if i == 0 %}active{% endif %}" data-index="{{ i }}"></span>
            {% endfor %}
        </div>
    </div>
</div>

<!-- Приветствие -->
<div class="text-center mb-5 {{ANIMATE_CLASS}}">
    <h1 class="display-5 fw-bold">Добро пожаловать!</h1>
    <p class="lead text-muted">{{INDEX_SUBTITLE}}</p>
    {% if not session.user_id %}
        <a href="{{ url_for('register') }}" class="btn btn-primary btn-lg me-2 {{BTN_ANIMATE_CLASS}}">
            Зарегистрироваться
        </a>
        <a href="{{ url_for('login') }}" class="btn btn-outline-secondary btn-lg {{BTN_ANIMATE_CLASS}}">
            Войти
        </a>
    {% else %}
        <a href="{{ url_for('dashboard') }}" class="btn btn-success btn-lg {{BTN_ANIMATE_CLASS}}">
            Перейти в личный кабинет
        </a>
    {% endif %}
</div>

{{INDEX_COUNTER_BLOCK}}

{{BEFORE_AFTER_SECTION}}

<!-- Преимущества -->
<div class="row g-4 mb-5">
    <div class="col-md-4 {{ANIMATE_CLASS}}">
        <div class="card h-100 text-center border-0 shadow-sm">
            <div class="card-body">
                <div class="fs-1 mb-3 text-muted">&#9679;</div>
                <h5 class="card-title">Быстро</h5>
                <p class="card-text text-muted">Обрабатываем заявки в кратчайшие сроки</p>
            </div>
        </div>
    </div>
    <div class="col-md-4 {{ANIMATE_CLASS}}">
        <div class="card h-100 text-center border-0 shadow-sm">
            <div class="card-body">
                <div class="fs-1 mb-3 text-muted">&#9679;</div>
                <h5 class="card-title">Надёжно</h5>
                <p class="card-text text-muted">Гарантируем качество и безопасность</p>
            </div>
        </div>
    </div>
    <div class="col-md-4 {{ANIMATE_CLASS}}">
        <div class="card h-100 text-center border-0 shadow-sm">
            <div class="card-body">
                <div class="fs-1 mb-3 text-muted">&#9679;</div>
                <h5 class="card-title">Поддержка</h5>
                <p class="card-text text-muted">Всегда на связи и готовы помочь</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
// Обновление счётчика через AJAX каждые 5 секунд
{{COUNTER_AJAX_SCRIPT}}
</script>
{% endblock %}