{% extends "html5up-massively/base.html" %}
{% block content %}

<!-- Wrapper -->
<div id="wrapper" class="fade-in">

    <!-- Intro -->
    <div id="intro">
        <h1>{{ configuration.organisation }}</h1>
        <p>{{ configuration.short_description }}</p>
        <ul class="actions">
            <li><a href="#nav" class="button icon solid solo fa-arrow-down scrolly">Continuer</a></li>
        </ul>
    </div>

    <!-- Header -->
    <header id="header">
        <a href="#nav" class="logo">{{ configuration.organisation }}</a>
    </header>

    <!-- Nav -->
    <nav id="nav">
        <ul class="links">
            <li class="active"><a href="/">Billetterie</a></li>
            <li><a href="">Informations</a></li>
            <li><a href="">Cashless</a></li>
        </ul>
        <ul class="icons">
            {% if configuration.twitter %}
                <li><a href="{{ configuration.twitter }}" class="icon brands fa-twitter"><span
                        class="label">Twitter</span></a></li>
            {% endif %}
            {% if configuration.facebook %}
                <li><a href="{{ configuration.facebook }}" class="icon brands fa-facebook-f"><span
                        class="label">Facebook</span></a>
                </li>
            {% endif %}
            {% if configuration.instagram %}
                <li><a href="{{ configuration.instagram }}" class="icon brands fa-instagram"><span
                        class="label">Instagram</span></a>
                </li>
            {% endif %}
        </ul>
    </nav>

    <!-- Main -->
    <div id="main">

        {% if first_event %}

            <article class="post featured">
                <header class="major">
                    <span class="date">{{ first_event.datetime | date:"d F Y"}}<br/>{{ first_event.datetime | time }}</span>
                    <h2><a href="/event/{{ first_event.pk }}">{{ first_event.name }}</a></h2>
                    <p>{{ first_event.short_description }}</p>
                </header>
                <a href="/event/{{ first_event.pk }}" class="image main"><img src="/media/{{ first_event.img.hdr }}" alt=""/></a>
                <ul class="actions special">
                    <li><a href="/event/{{ first_event.pk }}" class="button large">RESERVEZ</a></li>
                </ul>
            </article>

        {% else %}
            <!-- Featured Post -->
            <article class="post featured">
                <header class="major">
                    <span class="date">O_o</span>
                    <h2><a href="#">No event !</a></h2>
                    <p>Revenez un autre jour. Nous n'avons rien de prévu pour l'instant !</p>
                </header>
            </article>

        {% endif %}

        <!-- Posts -->
        <section class="posts">


            {% for event in events %}
                <article>
                    <header>
                        <span class="date">{{ event.datetime | date:"d F Y"}}</span>
                        <h2><a href="/event/{{ event.pk }}">{{ event.name }}</a></h2>
                    </header>
                    <a href="/event/{{ event.pk }}" class="image fit"><img src="/media/{{ event.img.crop }}" alt=""/></a>
                    <p>{{ event.short_description }}</p>
                    <ul class="actions special">
                        <li><a href="/event/{{ event.pk }}" class="button">RESERVEZ</a></li>
                    </ul>
                </article>
            {% endfor %}

        </section>

{% endblock content %}