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

{% block title %}Nouveau compte{% endblock %}

{% block extra_head %}
<script src="{% static "autocomplete_light/autocomplete.js" %}" type="text/javascript"></script>
{% endblock %}

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

{% block content %}

{% include 'kfet/base_messages.html' %}

<div class="row form-only">
  <div class="col-sm-12 col-md-8 col-md-offset-2">
    <div class="content-form">
      <form action="{% url "kfet.account.create_special" %}" method="post" class="account_create">
        {% csrf_token %}
        <div>
          {{ trigramme_form.trigramme.errors }}
          {{ trigramme_form.trigramme }}
          {{ balance_form }}
        </div>
        <div id="trigramme_valid"></div>
        <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>
    </div>
  </div>
</div>
<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: 0,
            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 container = '#trigramme_valid';

            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 %}