{% extends "html5up-massively/base.html" %}
{% block content %}
    <!-- Wrapper -->
    <div id="wrapper">

        <!-- Header -->
        <header id="header">
            <a href="/" 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">

            <!-- Post -->
            <section class="post">
                <header class="major">
                    <span class="date">{{ event.datetime | date:"d F Y" }}<br/>{{ event.datetime | time }}</span>
                    <h1>{{ event.name }}</h1>
                    <p>{{ event.short_description }}</p>
                </header>
                <div class="image main"><img src="/media/{{ event.img.fhd }}" alt=""/></div>
                <p>{{ event.long_description | linebreaks }}</p>
            </section>


            {% if not event.complet %}
                <!-- Form -->

                <form id="reservation" method="post" action="#">
                    {% csrf_token %}
                    <h2>RESERVEZ</h2>
                    <div class="row gtr-uniform">
                        <div class="col-6 col-12-xsmall">
                            <input type="text" name="nom" id="nom" value="" placeholder="Nom" required="True"/>
                        </div>
                        <div class="col-6 col-12-xsmall">
                            <input type="text" name="prenom" id="prenom" value="" placeholder="Prénom" required="True"/>
                        </div>
                        <div class="col-12 col-12-xsmall">
                            <input id="email" name="email" placeholder="Email" required="True" type="email" value=""/>
                        </div>
                        <div class="col-12 col-12-xsmall">
                            <input id="phone" name="phone" placeholder="Téléphone" required="True" type="text"
                                   value=""/>
                        </div>

                        <!-- Break -->
                        {% for billet in event.billets.all %}
                            <div class="col-4 col-12-medium col-12-small">
                                <label for="{{ billet.name }}">
                                    BILLET {{ billet.name }} : {{ billet.prix | floatformat:"-2" }}€
                                </label>
                                <select name="billets" id="{{ billet.name }}">
                                    {% for nbr in billet.range_max %}
                                        <option value="{{ billet.pk }},{{ nbr }}">{{ nbr }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        {% endfor %}

                        {% for article in event.articles.all %}
                            <div class="col-4 col-12-medium col-12-small">
                                <label for="{{ article.name }}">
                                    {{ article.name }} : {{ article.prix | floatformat:"-2" }}€
                                </label>
                                <select name="articles" id="{{ article.name }}">
                                    {% for nbr in article.range_max %}
                                        <option value="{{ article.pk }},{{ nbr }}">{{ nbr }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        {% endfor %}

                        <div class="row">
                            <!-- Break -->
                            {% for option_radio in configuration.option_generale_radio.all %}
                                <div class="col-12-small">
                                    <input type="radio" id="{{ option_radio.name }}" name="radio_generale"
                                           value="{{ option_radio.pk }}">
                                    <label for="{{ option_radio.name }}">{{ option_radio.name }}</label>
                                </div>
                            {% endfor %}
                            <!-- Break -->

                        </div>

                        <div class="row">

                            {% for option_checkbox in configuration.option_generale_checkbox.all %}

                                <div class="col-12-small">
                                    <input type="checkbox" id="{{ option_checkbox.pk }}"
                                           name="option_checkbox"
                                           value="{{ option_checkbox.pk }}">
                                    <label for="{{ option_checkbox.pk }}">{{ option_checkbox.name }}</label>
                                </div>

                            {% endfor %}

                        </div>

                        <!-- Break -->
                        {#                    <div class="col-12">#}
                        {#                    <textarea name="demo-message" id="demo-message" placeholder="Enter your message"#}
                        {#                              rows="6"></textarea>#}
                        {#                    </div>#}
                        <!-- Break -->
                        <div class="col-12">
                            <ul class="actions">
                                <li><input type="submit" value="validez" class="primary"/></li>
                                <li><input type="reset" value="Reset"/></li>
                            </ul>
                        </div>
                    </div>
                </form>

                <hr/>

            {% else %}

                <h2>COMPLET</h2>

            {% endif %}


        </div>


    </div>
{% endblock content %}