{% extends "kfet/base_form.html" %}
{% load staticfiles %}

{% block title %}Nouveau compte{% endblock %}
{% block header-title %}Création d'un compte{% endblock %}

{% block extra_head %}
<script src="{% static 'vendor/jquery/jquery.autocomplete-light.min.js' %}" type="text/javascript"></script>
{% endblock %}

{% block main %}

<form action="" method="post" class="account_create">
  {% csrf_token %}
  <div>
    {{ trigramme_form.trigramme.errors }}
    {{ trigramme_form.trigramme }}
  </div>
  <p class="help-block">Les mots contenant des caractères non alphanumériques seront ignorés</p>
  <input type="text" name="q" id="search_autocomplete" spellcheck="false" placeholder="Chercher un utilisateur par nom, prénom ou identifiant clipper" class="form-control">
  <div style="position:relative;">
    <div id="search_results"></div>
  </div>
  <div class="form-horizontal">
    <div id="form-placeholder">
      {% include 'kfet/account_create_form.html' %}
    </div>
    {% if not perms.kfet.add_account %}
      {% include 'kfet/form_authentication_snippet.html' %}
    {% endif %}
  </div>
</form>

<script type="text/javascript">
    $(document).ready(function() {
        // Affichage des résultats d'autocomplétion
        $('input#search_autocomplete').yourlabsAutocomplete({
            url: '{% url "kfet.account.create.autocomplete" %}',
            minimumCharacters: 3,
            id: 'search_autocomplete',
            choiceSelector: 'li:has(a)',
            container: $("#search_results"),
            box: $("#search_results"),
        });

        // Chargement du formulaire adapté au choix sélectionné
        $('input#search_autocomplete').bind(
            'selectChoice',
            function(e, choice, autocomplete) {
                autocomplete.hide();
                link = choice.find('a:first');
                if (link.length && link.attr('href') != undefined) {
                    $('#form-placeholder').html("").load(link.attr('href'));
                }
            }
        );

        // Vérification client de la validité
        // et de ladisponibilité du trigramme choisi
        $('#id_trigramme').on('input', function() {
            var trigramme = $('#id_trigramme').val().toUpperCase();

            var pattern = /^[^a-z]{3}$/;
            if (!(trigramme.match(pattern))) {
                $('#id_trigramme')
                    .css('background', '#fff')
                    .css('color', '#000');
            } else {
                $.ajax({
                    dataType: "json",
                    url: "{% url "kfet.account.is_validandfree.ajax" %}",
                    data: { trigramme: trigramme },
                }).done(function(data) {
                    if (data['is_free']) {
                        $('#id_trigramme').css('background', '#009011');
                    } else {
                        $('#id_trigramme').css('background', '#C8102E');
                    }
                    $('#id_trigramme').css('color', '#fff');
                });
            }
        });
    });
</script>

{% endblock %}