<!DOCTYPE html>
<html lang="de" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Flexinale - Film Details</title>
    <link href="../icons/movies.png" rel="icon">
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
    <link href="../static/css/vendor/picnic.min.css"
          media="screen" rel="stylesheet" th:href="@{css/vendor/picnic.min.css}"/>
    <link href="../static/css/app/main.css"
          media="screen" rel="stylesheet" th:href="@{css/app/main.css}"/>
</head>
<body>

<div th:replace="~{header}"/>

<div class="FLEXerrorSmall" role="alert" th:text="${error}" th:if="${error}"></div>

<div class="container" th:if="${film != null}">
    <h1>
        <th:block th:text="${film.titel}"/>
    </h1>
    <table class="FLEXdetails">
        <tr>
            <th class="FLEXid">ID</th>
            <th class="FLEXstring">Titel</th>
            <th class="FLEXlink">Link</th>
            <th class="FLEXString">Dauer [m]</th>
        </tr>
        <tr>
            <td th:text="${film.id.id()}"></td>
            <td th:text="${film.titel}"></td>
            <td th:if="${film.imdbUrl != null}">
                <a th:href="${film.imdbUrl}">IMDB Link</a>
            </td>
            <td th:text="${film.dauerInMinuten}"></td>
        </tr>
    </table>
</div>

<div class="container" th:if="${vorfuehrungen.size() != 0}">
    <h2>Vorführungen</h2>
    <table class="FLEXlist">
        <tr>
            <th class="FLEXid">ID</th>
            <th class="FLEXstring">Zeit</th>
            <th class="FLEXstring">Kino</th>
            <th class="FLEXstring">Saal</th>
            <th class="FLEXstring">Tickets</th>
        </tr>
        <tr th:each="vorfuehrung : ${vorfuehrungen}">
            <td>
                <th:block th:text="${vorfuehrung.id.id()}"/>
            </td>
            <td>
                <th:block th:text="${#temporals.format(vorfuehrung.zeit, 'dd.MM.yyyy')}"/>
                ,
                <th:block
                        th:text="${T(de.accso.flexinale.shared_kernel.TimeFormatter).calculateString(vorfuehrung.zeit, vorfuehrung.film.dauerInMinuten)}"/>
                Uhr
            </td>
            <td>
                <a th:href="@{/kino/{id}(id=${vorfuehrung.kinoSaal.kino.id.id()})}">
                    <th:block th:text="${vorfuehrung.kinoSaal.kino.name}"/>
                </a>
            </td>
            <td>
                <th:block th:text="${vorfuehrung.kinoSaal.name}"/>
            </td>
            <!-- Fallunterscheidungen...-->
            <!-- Benutzer hat schon Ticket  -->
            <td th:if="${vorfuehrungenMitTicket.contains(vorfuehrung.id.id())}">
                <a href="tickets" th:href="@{/tickets}">
                    Du hast bereits Ticket(s).
                </a>
            </td>
            <!-- Benutzer hat noch kein Ticket  -->
            <!-- ... 1) Keine Tickets mehr verfügbar -->
            <td th:if="not ${vorfuehrungenMitTicket.contains(vorfuehrung.id.id())} and ${vorfuehrung.kontingent.getRestKontingentOnline()} eq 0 ">
                Keine Tickets verfügbar
            </td>
            <!-- ...2) Tickets verfügbar, aber Überlappende Vorführung -->
            <td th:if="not ${vorfuehrungenMitTicket.contains(vorfuehrung.id.id())}
                            and ${vorfuehrung.kontingent.getRestKontingentOnline()} gt 0
                            and ${vorfuehrungenMitUeberlapp.contains(vorfuehrung.id.id())}">
                <a href="tickets" th:href="@{/tickets}">
                    Du hast zu der Zeit bereits eine andere Vorführung.
                </a>
            </td>
            <!-- ...3) Tickets verfügbar, keine Überlappende Vorführung, also Gutschein einlösbar-->
            <td th:unless="${vorfuehrungenMitTicket.contains(vorfuehrung.id.id())}
                            or ${vorfuehrung.kontingent.getRestKontingentOnline()} eq 0
                            or ${vorfuehrungenMitUeberlapp.contains(vorfuehrung.id.id())}">
                <form autocomplete="off" method="post" th:action="@{/vorfuehrung/loeseGutscheineOnlineEin}">
                    <input type="number"
                           min=1
                           th:max="${vorfuehrung.kontingent.getRestKontingentOnline()}<10?${vorfuehrung.kontingent.getRestKontingentOnline()}:10"
                           id="anzahl" name="anzahl" placeholder="Gewünschte Anzahl" required="required"/>
                    <input class="readonly" id="vorfuehrungId1" name="vorfuehrungId" required="required"
                           th:value="${vorfuehrung.id.id()}" type="hidden"/>
                    <input class="FLEXbutton " type="submit" value="Gutschein einlösen"/>
                </form>
            </td>
        </tr>
    </table>
</div>

</body>
</html>
