{% load gadjo %}
<form class="quixote" method="POST" action="{{ site_base }}{% url 'combo-public-ajax-page-cell' page_pk=cell.page.id cell_reference=cell.get_reference %}">
  {% csrf_token %}
  <input type="hidden" name="action" value="create"/>
  <div class="grid-1-1">
    <label for="nom">Nom du lieu</label>
    <input type="text" required name="nom" placeholder="ex: mon domicile, mon travail"
      {% if prefill and userdata.address_street %}value="Mon domicile"{% endif %}>
  </div>
  <div class="grid-1-1">
    <label for="adresse">Adresse</label>
    <input type="text" required name="adresse" {% if prefill and userdata.address_street %}value="{{userdata.address_number}} {{userdata.address_street}}"{% endif %}>
  </div>
  <div class="newline grid-1-4">
    <label for="codepostal">Code postal</label>
    <input type="text" required name="codepostal" {% if prefill and userdata.address_zipcode %}value="{{userdata.address_zipcode}}"{% endif %}>
  </div>
  <div class="grid-3-4 ville">
    <label for="ville">Ville</label>
    <input type="text" required name="ville" {% if prefill and userdata.address_city %}value="{{userdata.address_city}}"{% endif %}>
  </div>
  <div class="newline buttons">
    <button>{{ button_label }}</button>
  </div>
</form>
<script>
$(function() {
  $('input[name=adresse]').autocomplete({
    source: function( request, response ) {
      $.ajax({
        url: '{{streets_url}}',
        dataType: 'jsonp',
        data: {
          q: request.term
        },
        success: function( data ) {
          response($.map(data.data, function(item) {
            return {label: item.text, value: item.label};
          }));
        }
      });
    },
    minLength: 3
  });
  $('input[name=ville]').autocomplete({
    source: function( request, response ) {
      $.ajax({
        url: '{{communes_url}}?case-insensitive=1',
        dataType: 'jsonp',
        data: {
          q: request.term
        },
        success: function( data ) {
          response($.map(data.data, function(item) {
            return {label: item.text, value: item.label};
          }));
        }
      });
    },
    minLength: 2
  });
});
</script>
