{# -*- mode: jinja-html -*- #}
{% extends 'base.html' %}
{% import 'bootstrap/wtf.html' as wtf %}

{% block app_content %}
    <h1>{{ title }}</h1>
    <br>
    <div class="row">
        <div class="col-md-4">
            <p>
                Les champs s'autocomplète selon le SIRET
            </p>
            {{ wtf.quick_form(form, novalidate=True) }}
        </div>
    </div>
    <script>
        window.onload = function(e){ 
            document.getElementById("siret").addEventListener("keyup", autocomplete);

            function autocomplete() {
                var input = document.getElementById("siret").value;
                data = null
                if(input.length == 14) {
                    fetch("https://entreprise.data.gouv.fr/api/sirene/v1/siret/" + input)
                    .then(response => {
                        if(response.ok)
                            return response.json()
                        else {
                            emptyForm()
                        }
                    })
                    .then(response => fillForm(response))
                    .catch(err => err)
                }
            }

            function fillForm(response) {
                document.getElementById("nom_entreprise").value = response.etablissement.l1_normalisee
                document.getElementById("adresse").value = response.etablissement.l4_normalisee
                document.getElementById("codepostal").value = response.etablissement.code_postal
                document.getElementById("ville").value = response.etablissement.libelle_commune
                document.getElementById("pays").value = 'FRANCE'
            }

            function emptyForm() {
                document.getElementById("nom_entreprise").value = ''
                document.getElementById("adresse").value = ''
                document.getElementById("codepostal").value = ''
                document.getElementById("ville").value = ''
                document.getElementById("pays").value = ''
            }
        }
    </script>
{% endblock %}