{% load static %}
{% get_media_prefix as MEDIA_PREFIX %}

<!-- START SEARCH MODAL MENU -->
<div class="search" id="search">
    <form action="/ma-page-de-traitement" method="post" class="form-search">
        <div class="div-label-search">
            <label for="msg" class="label-search"><span href="pages/artiste.html" class="icone"
                                                        title="Visiter la page de l'artiste">
            <img src="{% static 'arnaud_mvc/img/menu/searchnoir.png' %}" alt="Image de la vignette" style="scale: 0.7;">
        </span>
                <h1>Recherche</h1></label>
            <input type="search"/>
            <input type="submit" value="Submit" class="btn-adherer" style="margin-top: 30px;"">
            <a href="#" class="btn-adherer" style="margin-top: 30px;">Go</a>
            <a href="#" class="btn-adherer" title="search" onClick="asideswipe.call(this);">Fermer</a>
        </div>
    </form>
</div>
<!-- END SEARCH MODAL MENU -->


<!-- START ADHESION MODAL MENU -->
<div class="search" id="adhesion_one">
    <form method="post" action="#" class="form-search">
        {% csrf_token %}
        <div class="div-label-search">
            <label for="msg" class="label-search">
                <span href="pages/artiste.html" class="icone"
                      title="Visiter la page de l'artiste">
                    <img src="{% static 'arnaud_mvc/img/menu/searchnoir.png' %}"
                         alt="Image de la vignette"
                         style="scale: 0.7;">
                </span>
                <h1>Email</h1>
            </label>
            <input type="email" name="email" id="Email" required="True" value="{{ email }}"
                   style="text-transform: lowercase;"/>
            <input type="submit" value="Continuer" class="btn-adherer" style="margin-top: 30px;"">
            <a href="#" class="btn-adherer" title="adhesion_one" onClick="asideswipe.call(this);">Fermer</a>
        </div>
    </form>
</div>
<!-- END ADHESION MODAL MENU -->

<!-- START NOM PRENOM TEL MODAL MENU -->
<div class="search" id="demande_nom_prenom_tel">
    <h2>Adhésion</h2>
    <h2 class="major">{{ client_name }}</h2>
    <h4 id="knew_text">Nous avons déja : </h4>
    <h4>Il nous manque ces informations pour votre adhésion :</h4>
    <form method="post" action="#" class="form-search">
        {% csrf_token %}
        {% csrf_token %}
        <div class="fields">
            <input id="adhesion_email" name="email" required="True" type="email" style="display: none"/>

            <div id="adhesion_name" class="field half">
                <label for="name">Nom</label>
                <input id="name" name="name" required="True" type="text"/>
            </div>
            <div id="adhesion_prenom" class="field half">
                <label for="prenom">Prénom</label>
                <input id="prenom" name="prenom" required="True" type="text"/>
            </div>
            <div id="adhesion_tel" class="field half">
                <label for="tel">Téléphone</label>
                <input id="tel" name="tel" required="True" type="tel"/>
            </div>
        </div>
        <ul class="actions">
            <li><input type="submit" value="Adhérer" class="primary"/></li>
        </ul>
        <a href="#" class="btn-adherer" title="demande_nom_prenom_tel" onClick="asideswipe.call(this);">Fermer</a>
    </form>
</div>
<!-- END NOM PRENOM TEL MODAL MENU -->


<!-- START ERROR MODAL MENU -->
<div class="search" id="demande_nom_prenom_tel">
    <h2 class="major">ERREUR</h2>
    <h3>Oups, Quelque chose s'est mal passé.</h3>
    {% if messages %}
        {% for message in messages %}
            <h3>{{ message }}</h3>
        {% endfor %}
    {% endif %}
</div>
<!-- END ERROR MODAL MENU -->


{# Script qui n'affiche que les champs dont nous avons besoin lors de l'adhésion #}
<script type="text/javascript">
    document.getElementById("knew_text").hidden = true;
    {% if messages %}
        {% for message in messages %}
            {% if message.extra_tags == 'email' %}
                document.getElementById("adhesion_email").value = "{{ message }}";
            {% endif %}
            {% if message.extra_tags == 'name' %}
                document.getElementById("adhesion_name").hidden = true;
                document.getElementById("name").readOnly = true;
                document.getElementById("name").value = "connu";
                document.getElementById("knew_text").textContent += "votre nom,";
                document.getElementById("knew_text").hidden = false;

            {% endif %}
            {% if message.extra_tags == 'prenom' %}
                document.getElementById("adhesion_prenom").hidden = true;
                document.getElementById("prenom").readOnly = true;
                document.getElementById("prenom").value = "connu";
                document.getElementById("knew_text").textContent += "votre prénom,";
                document.getElementById("knew_text").hidden = false;

            {% endif %}
            {% if message.extra_tags == 'tel' %}
                document.getElementById("adhesion_tel").hidden = true;
                document.getElementById("tel").readOnly = true;
                document.getElementById("tel").value = "connu";
                document.getElementById("knew_text").textContent += "votre numéro de téléphone,";
                document.getElementById("knew_text").hidden = false;

            {% endif %}
        {% endfor %}
    {% endif %}

</script>