<!-- web/templates/web/home.html -->
{% extends 'web/base.html' %}
{% load static %}
{% block title %}Главная{% endblock %}

{% block content %}
<div id="carousel-1" class="carousel slide" data-bs-ride="carousel" style="height: 600px;">
    <div class="carousel-inner h-100">
        {% for service in services %}
        <div class="carousel-item {% if forloop.first %}active{% endif %} h-100">
            <div class="carousel-overlay"></div>
            <img class="w-100 d-block position-absolute h-100 fit-cover" src="{{ service.image.url }}" alt="{{ service.name }}" style="z-index: -1; filter: brightness(0.5);" />
            <div class="container d-flex flex-column justify-content-center h-100 position-relative" style="z-index: 2;">
                <div class="row">
                    <div class="col-md-6 col-xl-4 offset-md-2">
                        <div style="max-width: 350px;">
                            <h1 class="text-uppercase fw-bold text-white">{{ service.name }}</h1>
                            <p class="my-3 text-white">{{ service.description }}</p>
                            <a class="btn btn-primary btn-lg me-2" role="button" href="{% url 'service_detail' service.pk %}">Подробнее</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    <div><a class="carousel-control-prev" href="#carousel-1" role="button" data-bs-slide="prev"><span class="carousel-control-prev-icon"></span><span class="visually-hidden">Previous</span></a><a class="carousel-control-next" href="#carousel-1" role="button" data-bs-slide="next"><span class="carousel-control-next-icon"></span><span class="visually-hidden">Next</span></a></div>
    <div class="carousel-indicators">
        {% for service in services %}
        <button class="{% if forloop.first %}active{% endif %}" type="button" data-bs-target="#carousel-1" data-bs-slide-to="{{ forloop.counter0 }}"></button>
        {% endfor %}
    </div>
</div>
<br><br><br>
{% endblock %}