{% extends "base.html" %}
{% load static %}
{% load tags %}
{% block title %}
{{ session.film.name }}
{% endblock %}
{% block content %}
<link href="{% static 'css/style.css' %}" rel="stylesheet">
<link href="{% static 'css/timetable/session.css' %}" rel="stylesheet">
<div class="film_info_block">
    <img src="{{ session.film.image.url }}" class="film_session_image"
         alt="Фотография фильма не найдена">
    <div class="film_info_text_block">
        <h1 class="film_info_text">{{ session.film.name }}</h1>
        <p class="film_info_text">{{ session.auditorium.number }}</p>
        <p class="film_info_text">{{ session.start_datetime }}</p>
        <p class="film_info_description">{{ session.film.description }}</p>
        <div class="tags_block">
            {% for genre in session.film.genres.all %}
            <div class="badge text-bg-secondary genre">{{genre.name}}</div>
            {% endfor %}
        </div>
    </div>
</div>
<form class="seats_form" method="post">
    <button type="submit" class="btn btn-primary buy_btn">Оформить заказ</button>
    <div class="seats_card" style="height: {{ height }}vw;">
        {% csrf_token %}
        <hr class="horizontal_line">
        <p class="display_title">Экран</p>
        <table class="table_card">
            <tbody>
            {% for row in session.auditorium.rows.all %}
            <tr>
                <td class="row_number_cell cell">Ряд {{ forloop.counter }}</td>
                {% for _ in row.column_count|get_range %}
                <td class="cell">
                    {% with column_seat_str=forloop.counter|stringformat:"i" row_seat_str=row.row_number|stringformat:"i" %}
                    {% if column_seat_str|add:"-"|add:row_seat_str in occupied_seats %}
                    <label class="film_session disabled">
                        <input type="checkbox" name="selected_seats"
                               value="[{{ forloop.counter }}, {{ row.row_number }}]" class="seat_checkbox"
                               disabled>
                        <span class="seat_number">{{ forloop.counter }}</span>
                    </label>
                    {% else %}
                    <label class="film_session">
                        <input type="checkbox" name="selected_seats"
                               value="[{{ forloop.counter }}, {{ row.row_number }}]" class="seat_checkbox">
                        <span class="seat_number">{{ forloop.counter }}</span>
                    </label>
                    {% endif %}
                    {% endwith %}
                </td>
                {% endfor %}
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</form>
<script src="{% static 'js/timetable/session.js' %}"></script>
{% endblock %}