{% extends "base.html" %}
{% load cache %}
{% load static %}
{% load i18n %}
{% load event_extras %}
{% load utils %}
visible
{% block title %}
    {% translate "Events" %}
{% endblock %}

{% block content %}
    <div class="page-header">
        <h1>{% translate "Events" %}
            <small class="float-end">
                <form method="post" action="{% url "core:event_list_type_setting" %}">
                    {% csrf_token %}
                    <div class="btn-group">
                        <button type="button" class="btn btn-sm btn-secondary"><span class="fa fa-list"></span></button>
                        <button type="submit" class="btn btn-sm btn-outline-secondary" name="event_list_view_type"
                                value="calendar"><span class="fa fa-calendar"></span></button>
                    </div>
                </form>
            </small>
        </h1>
    </div>
    <form id="bulk_action_form" method="post">
        {% csrf_token %}
        {% if perms.core.add_event %}
            <div id="event-controls" class="d-flex flex-wrap pb-3">
                <div class="dropdown m-1 ms-0">
                    <button class="btn btn-primary dropdown-toggle" type="button" id="eventCreateButton"
                            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span class="fa fa-plus"></span>
                        {% translate "Add event" %}
                    </button>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="eventCreateButton">
                        {% for eventtype in eventtypes %}
                            <a class="dropdown-item" href="{% url "core:event_create" eventtype.pk %}">
                                {% blocktranslate with title=eventtype.title %}Add
                                    {{ title }}{% endblocktranslate %}</a>
                        {% endfor %}
                    </div>
                </div>
                <div class="bulk-actions">
                    <button class="btn btn-secondary m-1 ms-0" type="submit" name="delete"
                            formaction="{% url "core:event_bulk_delete" %}"><span
                            class="fa fa-trash-alt"></span> {% translate "Delete selected" %}</button>
                    {% event_bulk_actions %}
                </div>
            </div>
        {% endif %}

        {% if event_list %}
            <style nonce="{{ request.csp_nonce }}">
                {% cache 900 "eventtype_colors" %}
                    {% eventtype_colors %}
                {% endcache %}
            </style>
            <div class="list-group mb-3">
                {% if perms.core.add_event %}
                    <div class="list-group-item px-0">
                        <div class="ps-2">
                            <input type="checkbox" id="checkall">
                        </div>
                    </div>
                {% endif %}
                {% for event in event_list %}
                    {% with counter=event|event_signup_state_counts:request.user stats=event.get_signup_stats %}
                        <div class="list-group-item list-group-item-action p-0 d-flex flex-row">
                            <div class="m-0 py-2 d-flex flex-column flex-lg-row-reverse justify-content-around flex-grow-0">
                                <div class="ps-lg-2 d-flex flex-row flex-lg-column justify-content-center event-list-status-icon"
                                        {% if counter %}
                                     data-bs-toggle="tooltip" data-bs-placement="bottom"
                                     data-bs-html="true"
                                     title="{% for state in counter %}<div>
                                         {% if event.shifts.all|length > 1 %}{{ counter|get:state }} {% endif %}{{ ParticipationStates.labels_dict|get:state }}</div>{% endfor %}"
                                        {% endif %}
                                >
                                    {% if counter|get:ParticipationStates.CONFIRMED > 0 %}
                                        <span class="text-success fa fa-user-check ps-2"></span>
                                    {% elif counter|get:ParticipationStates.REQUESTED > 0 %}
                                        <span class="text-warning fa fa-user-clock ps-2"></span>
                                    {% elif counter|get:ParticipationStates.RESPONSIBLE_REJECTED > 0 %}
                                        <span class="text-danger fa fa-user-times ps-2"></span>
                                    {% elif counter|get:ParticipationStates.USER_DECLINED > 0 and counter|length == 1 %}
                                        <span class="text-danger fa fa-user-minus ps-2"></span>
                                    {% else %}
                                        <span class="text-muted far fa-user ps-2"></span>
                                    {% endif %}
                                </div>
                                {% if perms.core.add_event %}
                                    <div class="ps-lg-2 d-flex flex-row flex-lg-column justify-content-center">
                                        <input name="bulk_action" value="{{ event.pk }}" type="checkbox"
                                               class="cb-element">
                                    </div>
                                {% endif %}
                            </div>
                            <a class="list-group-item-action py-2 event-list-item-link"
                               href="{{ event.get_absolute_url }}">
                                <div class="grid-wrapper m-0 py-0 ps-2 pe-3">
                                    <div class="grid-title">
                                        <h5 class="mb-0">
                                            {{ event.title }}

                                        </h5>
                                        <span class="w-100 text-muted">
                                            {{ event.location }}
                                        </span>
                                    </div>
                                    <div class="grid-batch"><span
                                            class="badge badge-{{ event.type.pk }}-color">{{ event.type }}</span></div>
                                    <div class="grid-signup d-flex flex-column align-items-end align-items-lg-center justify-content-center">
                                        <div class="position-relative">
                                            <span class="fas fa-users"></span>
                                            {% if event.can_change and stats.requested_count > 0 %}
                                                <span class="pending-indicator"></span>
                                            {% endif %}
                                            {{ stats.confirmed_count }}
                                        </div>
                                        <div>
                                            {% include "core/fragments/signup_stats_indicator.html" with stats=stats %}
                                        </div>
                                    </div>
                                    <div class="grid-time">
                                        {{ event.start_time|date:"D" }},
                                        {% if event.start_time.date == event.end_time.date %}
                                            {{ event.start_time|date:"SHORT_DATE_FORMAT" }}
                                            <span class="d-lg-none">,</span>
                                            <span class="d-none d-lg-inline"><br></span>
                                            {{ event.start_time|date:"TIME_FORMAT" }} –
                                            {{ event.end_time|date:"TIME_FORMAT" }}
                                        {% else %}
                                            {{ event.start_time|date:"SHORT_DATE_FORMAT" }}
                                            <span class="d-none d-lg-inline"><br></span>
                                            {% translate "to" %}
                                            {{ event.end_time|date:"SHORT_DATE_FORMAT" }}
                                        {% endif %}
                                    </div>
                                    <div class="grid-action d-none d-lg-flex flex-column justify-content-center">
                                        <div class="btn btn-outline-primary text-nowrap event-list-item-button">
                                            <span class="fa fa-eye"></span> {% translate "Show" %}
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    {% endwith %}
                {% endfor %}
            </div>
        {% else %}
            <div class="mb-3">
                <h5 class="mt-5 text-center">
                    {% translate "There are no events." %}
                </h5>
            </div>
        {% endif %}

    </form>
{% endblock %}
