{% extends "base.html" %}

{% block page_title %}Evènements{% endblock %}

{% block content %}

<div id="page" class=" sidebar_right">
    <div class="container">
        <div id="frame2">
            <div id="content">
                <div class="row align-bottom">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                        <h1>Evènements</h1>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 text-right align-bottom">
                        <a href="{% url 'event_create' %}"><button type="button" class="btn btn-primary">Nouvel évènement</button></a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <table class="table table-striped table-bordered table-condensed" id="eventTable">
                            <thead>
                                <th class="centered">Année</th>
                                <th>Label</th>
                                <th>Lieu</th>
                                <th>Début</th>
                                <th>Fin</th>
                                <th>Terminée</th>
                            </thead>
                            {% for event in events %}
                                <tr class="alert alert-{% if event.is_complete == False %}danger{% else %}success{% endif %}">
                                    <td class="push-right">{{ event.year }}</td>
                                    <td><a href="{% url 'event_update' event.id %}"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>&nbsp;<a href="{% url 'event_details' event.id  %}">{{ event }}</a></td>
                                    <td>{{ event.place }}</td>
                                    <td class="centered">{{ event.date_begin | date:"d b Y" }}</td>
                                    <td class="centered">{{ event.date_end | date:"d b Y" }}</td>
                                    <td>{{ event.is_complete }}</td>
                                </tr>
                            {% endfor %}
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('#eventTable').tablesorter({
            headers: {
                0: { dateFormat: "ddmmyyyy" },
            },

        })
    });
</script>

{% endblock %}