{% extends "base.html.twig" %}

{% block javascripts %}
    {{ encore_entry_script_tags('roster') }}
{% endblock %}

{% block body %}
    <header class="header-page">
        <h1 class="text-3xl">Rooster streamen</h1>

        {% if currentUserId != null %}
            <a href="{{ path('app_logout') }}" class="font-bold text-white hover:text-blue-200">
                [ {{ 'Logout'|trans }} ]
            </a>
        {%  else %}
            <a href="{{ path('app_login') }}" class="font-bold text-white hover:text-blue-200">
                [ {{ 'Login'|trans }} ]
            </a>
        {% endif %}
    </header>

    <div id="page_card" class="bg-white shadow-md rounded px-4 py-4">
        {% if app.session.flashbag.peekAll|length > 0 %}
            {% for type, messages in app.session.flashbag.all %}
                {% for message in messages %}
                    <div class="flash-message">
                        <div class="alert alert-{{ type ? type : 'error' }}">
                            {{ message|trans }}
                        </div>
                    </div>
                {% endfor %}
            {% endfor %}
        {% endif %}

        <table class="table-auto w-full">
            <thead>
            <tr class="bg-gray-100">
                <th class="px-4 py-2">{{ 'Date'|trans }}</th>
                <th class="px-4 py-2">{{ 'Time'|trans }}</th>
                <th class="px-4 py-2">{{ 'Description'|trans }}</th>
                <th class="px-4 py-2">{{ 'Streamer'|trans }}</th>
                {% if currentUserId != null %}
                    <th class="px-4 py-2">{{ 'Claim timeslot'|trans }}</th>
                {% endif %}
            </tr>
            </thead>
            <tbody>
                {% for roster in rosterDates %}
                    {% set lineInPast = 'now'|date('Y-m-d') > roster.date|date('Y-m-d') %}

                    {% if (lineInPast) %}
                        <tr class="roster-line roster-line-past roster-line-height">
                    {%  else %}
                        {% if currentUserId == null %}
                            <tr class="roster-line roster-line-height">
                        {% elseif currentUserId == roster.user.id|default() %}
                            <tr class="roster-line roster-line-mine">
                        {%  else %}
                            <tr class="roster-line">
                        {% endif %}
                    {% endif %}

                    {% set userFullName = roster.user.fullName|default('') %}
                    {% if currentUserId == null %}
                        {% set userFullName = userFullName|extract_name %}
                    {% endif %}

                    <td class="border px-4 py-2">{{ roster.date|date('Y-m-d') }}</td>
                    <td class="border px-4 py-2">{{ roster.time|date('H:i') }}</td>
                    <td class="border px-4 py-2">{{ roster.description }}</td>
                    <td class="border px-4 py-2">{{ userFullName }}</td>
                    {% if currentUserId != null %}
                        <td class="border px-4 py-2">
                            {% if lineInPast == false %}
                                {% if currentUserId != roster.user.id|default() %}
                                    <form name="roster_form" method="post" action="{{ path('app_roster_update') }}">
                                        <input type="hidden" name="roster_form[roster]" value="{{ roster.id }}">
                                        <input type="hidden" name="roster_form[rosterAction]" value="{{ enum('App\\Enum\\RosterFormActionEnum::ActionClaimSlot').value }}">

                                        <button type="submit" class="slot-button" id="claim-slot">
                                            <i class="claim-icon claim-icon-plus fas fa-user-plus pr-5 has-tooltip">
                                                <span class="tooltip-text">{{ 'Claim timeslot'| trans }}</span>
                                            </i>
                                        </button>
                                    </form>
                                {% endif %}

                                {% if currentUserId == roster.user.id|default() %}
                                    <form name="roster_form" class="form-as-icon" method="post" action="{{ path('app_roster_update') }}">
                                        <input type="hidden" name="roster_form[roster]" value="{{ roster.id }}">
                                        <input type="hidden" name="roster_form[rosterAction]" value="{{ enum('App\\Enum\\RosterFormActionEnum::ActionFreeSlot').value }}">

                                        <button type="submit" class="slot-button" id="free-slot">
                                            <i class="claim-icon claim-icon-minus fas fa-user-xmark pr-5 has-tooltip">
                                                <span class="tooltip-text">{{ 'Remove claim'| trans }}</span>
                                            </i>
                                        </button>
                                    </form>
                                {% endif %}

                                {% if currentUserId == roster.user.id|default() %}
                                    <form name="roster_form" class="form-as-icon"  method="post" action="{{ path('app_roster_update') }}">
                                        <input type="hidden" name="roster_form[roster]" value="{{ roster.id }}">
                                        <input type="hidden" name="roster_form[rosterAction]" value="{{ enum('App\\Enum\\RosterFormActionEnum::ActionResetSlot').value }}">

                                        <button type="submit" class="slot-button" id="reset-slot">
                                            <i class="claim-icon claim-icon-clock fas fa-user-clock has-tooltip">
                                                <span class="tooltip-text">{{ 'Reset claim to previous'| trans }}</span>
                                            </i>
                                        </button>
                                    </form>
                                {% endif %}
                            {% endif %}
                        </td>
                    {% endif %}
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock %}