{% extends "base.html" %}
{% load static %}
{% block title %}
Главная
{% endblock title %}
{% block content %}
<link href="{% static 'css/style.css' %}" rel="stylesheet">
<link href="{% static 'css/home/homepage.css' %}" rel="stylesheet">
<h1 class="header_title carousel_title">Сейчас в прокате</h1>
<div id="carouselWhite" class="carousel carousel slide carousel_films" data-bs-ride="carousel">
    <div class="carousel-indicators">
        {% for film in films_preview %}
        <button type="button" data-bs-target="#carouselWhite" data-bs-slide-to="{{ forloop.counter0 }}"
                class="{% if forloop.counter0 == 0 %} active {% endif %}"
                aria-current="true" aria-label="{{film.name|truncatewords_html:5}}"></button>
        {% endfor %}
    </div>
    <div class="carousel-inner">
        {% for film in films_preview %}
        <div class="carousel-item {% if forloop.counter0 == 0 %} active {% endif %}" data-bs-interval="10000">
            <img src="{{ film.image.url }}" class="d-block w-100 film_preview_image"
                 alt="Фотография фильма не найдена">
            <div class="carousel-caption d-none d-md-block caption_block">
                <h5>{{ film.name }}</h5>
                <p>{{ film.description|truncatewords_html:10|safe }}</p>
            </div>
        </div>
        {% endfor %}
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselWhite" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselWhite" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>
<div class="timetable_block">
    <h1 class="header_title">Расписание</h1>
    <div class="container">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            {% for date in films_sessions %}
            {% include "includes/date_timetable_button.html" %}
            {% endfor %}
        </ul>
        <div class="tab-content" id="myTabContent">
            {% for date, sessions in films_sessions.items %}
            <div class="tab-pane fade timetable_body {% if forloop.counter0 == 0 %} show active {% endif %}"
                 id="content-{{ date|date:'Y-m-d' }}" role="tabpanel"
                 aria-labelledby="tab-{{ date }}"
                 aria-selected="{% if forloop.counter0 == 0 %} true {% else %} false {% endif %}">
                {% for film, session in sessions.items %}
                {% include "includes/film_timetable_card.html" %}
                {% endfor %}
            </div>
            {% endfor %}
        </div>
    </div>
</div>

{% endblock %}