{% extends 'dav_events/base.html' %}
{% load bootstrap3 %}
{% load i18n %}
{% load dav_events %}

{% block page-container-fluid %}
<div class="action-tabs top-most">
    <div class="pull-right">
        <a id="btn-event-create" class="btn btn-primary"
           href="{% url 'dav_events:create' %}">
            {% bootstrap_icon 'plus' %}
            {% trans 'Neue Veranstaltung anlegen' %}
        </a>
    </div>
    <ul class="nav nav-tabs" role="tablist">
        <li class="active">
            <a href="{% url 'dav_events:list' %}">{% trans 'Veranstaltungsliste' %}</a>
        </li>
        <li class="{% if not has_permission_export %}disabled{% endif %}">
            <a class="btn {% if not has_permission_export %}disabled{% endif %}"
               href="{% url 'dav_events:list_export' %}">{% trans 'Veranstaltungsliste herunterladen' %}</a>
        </li>
    </ul>
</div>

<div>
    <table id="objects_table" class="table table-striped">
        <thead>
            <tr>
                <th>{% trans 'Nummer' %}</th>
                <th>{% trans 'Titel' %}</th>
                <th>{% trans 'Trainer' %}</th>
                <th>{% trans 'Datum' %}</th>
                <th>{% trans 'Status' %}</th>
            </tr>
            <tr>
                <th><input type="text" placeholder="{% trans 'Filter' %}" /></th>
                <th><input type="text" placeholder="{% trans 'Filter' %}" /></th>
                <th><input type="text" placeholder="{% trans 'Filter' %}" /></th>
                <th><input type="text" placeholder="{% trans 'Filter' %}" /></th>
                <th><input type="text" placeholder="{% trans 'Filter' %}" /></th>
            </tr>
        </thead>
        <tbody>
            {% for event in event_list %}
            <tr>
                {% with number=event.get_number %}
                <td data-order="{{ number|slice:':1' }}{{ number|slice:'-2:' }}{{ number|slice:'1:-2'|cut:'/' }}"
                    data-search="{{ number }} ({{ event.get_sport_display }})">
                    <a href="{% url 'dav_events:detail' event.pk %}">{{ number }}</a><br />
                    <small>({{ event.get_sport_display }})</small>
                </td>
                {% endwith %}
                <td>
                    <a href="{% url 'dav_events:detail' event.pk %}">{{ event.title }}</a>
                </td>
                <td>
                    {{ event.get_trainer_full_name }}
                    {% if event.trainer_email %}
                        <br />{{ event.trainer_email}}
                    {% elif event.trainer_phone %}
                        <br />{{ event.trainer_phone}}
                    {% else %}
                        <br /><span class="text-danger">{% trans 'Weder E-Mail-Adresse noch Telefonnummer!' %}</span>
                    {% endif %}
                </td>
                <td data-order="{{ event.first_day|date:'U' }}">
                    {{ event.get_numeric_date }}
                </td>
                <td data-order="{{ event.flags.last.status.severity }}">
                    {% render_event_status event %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    <script type="text/javascript">
        $(document).ready( function () {
            var table = $("#objects_table").DataTable( {
                orderCellsTop: true,
                order: [[3, 'desc']],
                paging: false,
                language: {
                    search: "{% trans 'Filter' %}:",
                    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.' %}",

                }
            } );
            $("#objects_table thead input").on( "keyup change", function() {
                table
                    .column( $(this).parent().index() )
                    .search( this.value )
                    .draw();
            } );
            $("#objects_table_filter").hide();
        } );
    </script>
</div>
{% endblock page-container-fluid %}