{% extends 'dav_registration/base.html' %}
{% load static %}
{% load i18n %}
{% load dav_registration %}

{% block page-container-fluid %}
<div>
    <div style="float: right;">
        <button id="btn-filter-All" type="button" class="btn btn-xs btn-green">Alle Touren</button>
        <button id="btn-filter-B" type="button" class="btn btn-xs btn-sport-B btn-white">Bergsteigen</button>
        <button id="btn-filter-family" type="button" class="btn btn-xs btn-level-family btn-white">Familien</button>
        <button id="btn-filter-K" type="button" class="btn btn-xs btn-sport-K btn-white">Klettern</button>
        <button id="btn-filter-M" type="button" class="btn btn-xs btn-sport-M btn-white">Mountainbike</button>
        <button id="btn-filter-S" type="button" class="btn btn-xs btn-sport-S btn-white">Ski</button>
        <button id="btn-filter-W" type="button" class="btn btn-xs btn-sport-W btn-white">Wandern</button>
    </div>
    <h3 class="top-most">{% trans 'Touren & Kurse' %}</h3>
    <table id="objects_table" class="table table-bordered table-hover">
        <thead>
            <tr>
                <th><input type="text" id="searchfield" placeholder="{% trans 'Volltextsuche' %}"></th>
                <th class="hidden">Attributes</th>
            </tr>
        </thead>
        <tbody>
            {% for event in event_list %}
            <tr>
                <td>
                    <div class="pull-right" style="margin-left: 2em;">
                        <a role="button" id="controlChevronCollapseDetails{{ event.id }}" data-toggle="collapse"
                           href="#collapseDetails{{ event.id }}"
                           aria-expanded="false" aria-controls="collapseDetails{{ event.id }}">
                            <span title="{% trans 'Details aufklappen' %}" class="glyphicon glyphicon-chevron-down"></span>
                        </a>
                    </div>
                    <div class="pull-right" style="margin-left: 1em;">
                        {% if event.is_canceled %}
                        <span class="text-danger"><span class="glyphicon glyphicon-erase"></span></span>
                        <span class="text-danger"><strong>{% trans 'Abgesagt' %}</strong></span>
                        {% elif event.registration_closed %}
                        <span class="text-primary"><span class="glyphicon glyphicon-list-alt"></span></span>
                        <span class="text-primary"><strong>{% trans 'Teilnehmerliste voll' %}</strong></span>
                        {% elif event.is_deadline_expired %}
                        <span class="text-danger"><span class="glyphicon glyphicon-time"></span></span>
                        <span class="text-danger"><strong>{% trans 'Anmeldeschluss abgelaufen' %}</strong></span>
                        {% elif not event.registration_required %}
                        <a class="btn btn-primary" href="{% url 'dav_registration:event' event.pk %}">{% trans 'Details' %} - {% trans 'keine Anmeldung nötig' %}</a>
                        {% else %}
                        <a class="btn btn-primary" href="{% url 'dav_registration:event' event.pk %}">{% trans 'Details & Anmeldung' %}</a>
                        {% endif %}
                    </div>
                    <div class="pull-left" style="margin-right: 12px;">
                        {% with event.sport as sport %}
                        {% with 'dav_registration/img/sport_icons/'|add:sport|add:'.png' as icon %}
                        <img src="{% static icon %}" width="48px"
                             alt="{{ event.get_sport_display }}" title="{{ event.get_sport_display }}">
                        <span class="hidden">{{ event.get_sport_display }}</span>
                        <span class="hidden">{{ event.get_level_display }}</span>
                        {% endwith %}
                        {% endwith %}
                    </div>
                    <div>
                        <strong><span class="panel-title">
                            <a role="button" id="controlCollapseDetails{{ event.id }}" data-toggle="collapse"
                               href="#collapseDetails{{ event.id }}"
                               aria-expanded="false" aria-controls="collapseDetails{{ event.id }}">
                                {{ event.get_number }} - {{ event.title }}
                            </a>
                        </span></strong>
                        {% if event.level == 'family' %}
                        &emsp;<span class="label label-level-family">für Familien</span>
                        {% endif %}
                        <p>
                            {% if event.is_canceled %}<del>{% endif %}
                            {{ event.get_formated_date }}
                            {% if event.get_alt_formated_date %}
                            <br />({% trans 'Ersatztermin' %}: {{ event.get_alt_formated_date }})
                            {% endif %}
                            {% if event.is_canceled %}</del>{% endif %}
                        </p>
                        <div class="panel panel-default collapse" id="collapseDetails{{ event.id }}" style="margin-top: 2ex;">
                            <ul class="list-group">
                                <li class="list-group-item">
                                    {% if event.is_canceled %}<del>{% endif %}
                                    {% render_event_paragraphs event %}
                                    {% if event.is_canceled %}</del>{% endif %}
                                </li>
                                <li class="list-group-item">
                                    {% if event.is_canceled %}<del>{% endif %}
                                    {% render_event_facts event %}
                                    {% if event.is_canceled %}</del>{% endif %}
                                </li>
                                {% if not event.registration_closed and not event.is_deadline_expired and not event.is_canceled %}
                                <li class="list-group-item">
                                    {% if not event.registration_required %}
                                    <div class="alert alert-info">
                                        {% blocktrans %}
                                        Zu dieser Veranstaltung ist keine Anmeldung notwendig.<br />
                                        Du kannst das Anmeldeformular natürlich trotzdem ausfüllen.
                                        {% endblocktrans %}
                                    </div>
                                    {% endif %}
                                    <a class="btn btn-primary" href="{% url 'dav_registration:register' event.pk %}">{% trans 'zur Anmeldung' %}</a>
                                </li>
                                {% endif %}
                            </ul>
                        </div>
                    </div>
                    <script>
                        $("#collapseDetails{{ event.id }}").on("shown.bs.collapse", function() {
                            icon = $("#controlChevronCollapseDetails{{ event.id }}").find(".glyphicon")
                            icon.removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
                            icon.attr("title", "{% trans 'Details verbergen' %}");
                        });
                        $("#collapseDetails{{ event.id }}").on("hidden.bs.collapse", function() {
                            icon = $("#controlChevronCollapseDetails{{ event.id }}").find(".glyphicon")
                            icon.removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
                            icon.attr("title", "{% trans 'Details aufklappen' %}");
                        });
                    </script>
                </td>
                <td class="hidden">{{ event.sport }},{{ event.level }},</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    <script type="text/javascript">
        function filter_table(table, filter) {
            const sport_choices = ["B", "K", "M", "S", "W"];
            const level_choices = ["beginner", "advanced", "family"];
            var choices = sport_choices.concat(level_choices);
            var filter_cleaned = [];
            var filter_expr;

            for(let i in choices) {
                if(filter.indexOf(choices[i]) >= 0) {
                    filter_cleaned.push(choices[i]);
                    $("#btn-filter-" + choices[i]).removeClass("btn-white");
                } else {
                    $("#btn-filter-" + choices[i]).addClass("btn-white");
                }
            }

            if(filter_cleaned.length > 0) {
                $("#btn-filter-All").addClass("btn-white");
                filter_expr = "(" + filter_cleaned.join("|") + "),";
            } else {
                $("#btn-filter-All").removeClass("btn-white");
                filter_expr = "";
            }

            table.column(1).search(filter_expr, true, false);
            table.draw();
        }
        function toggle_filter(table, filter, attribute) {
            let i = filter.indexOf(attribute);
            if(i >= 0)
                filter.splice(i, 1);
            else
                filter.push(attribute);
            filter_table(table, filter);
        }
        function reset_filter(table, filter) {
            filter.splice(0, filter.length);
            filter_table(table, filter);
        }
        $(document).ready( function () {
            var table = $("#objects_table").DataTable( {
                ordering: false,
                paging: false,
                language: {
                    search: "{% trans 'Suche' %}:",
                    info: "{% trans 'Zeige _TOTAL_ Einträge' %}",
                    infoFiltered: "{% trans 'aus insgesamt _MAX_ Einträgen' %}",
                    infoEmpty: "{% trans 'Zeige 0 Einträge' %}",
                    infoPostFix: ".",
                    emptyTable: "{% trans 'Keine Daten vorhanden.' %}",
                    zeroRecords: "{% trans 'Keine passenden Einträge.' %}",
                }
            } );
            var filter = ['{{ init_filter|join:"','" }}'];
            $("#btn-filter-All").on("click", function() {
                reset_filter(table, filter);
            } );
            $("#btn-filter-B").on("click", function() {
                toggle_filter(table, filter, "B");
            } );
            $("#btn-filter-K").on("click", function() {
                toggle_filter(table, filter, "K");
            } );
            $("#btn-filter-M").on("click", function() {
                toggle_filter(table, filter, "M");
            } );
            $("#btn-filter-S").on("click", function() {
                toggle_filter(table, filter, "S");
            } );
            $("#btn-filter-W").on("click", function() {
                toggle_filter(table, filter, "W");
            } );
            $("#btn-filter-family").on("click", function() {
                toggle_filter(table, filter, "family");
            } );
            $("#searchfield").on( "keyup change", function() {
                table.column(0).search( this.value ).draw();
            } );
            $("#objects_table_filter").hide();
            filter_table(table, filter);
        } );
    </script>
</div>
{% endblock page-container-fluid %}