{{ define "address_autocomplete" }}

<div class="col-span-6 relative" x-data='{
    input: {{if .Address}}"{{.Address.properties.label}}"{{else}}null{{end}},
    address: {{if .Address}}JSON.stringify({{template "geojson" .Address}}){{else}}null{{end}},
    addressObject: {{if .Address}}{{template "geojson" .Address }}{{else}}null{{end}},
    responselength: 0,
    async autocomplete() {
        if(this.input == null || this.input == "") {
            this.responselength = 0
            return []
        }
        if(this.addressObject != null && this.input == this.addressObject.properties.label) {
            this.responselength = 0
            return []
        }
        if(this.input.length < 3) {
            this.responselength = 0
            return []
        }
        result = await fetch("https://api-adresse.data.gouv.fr/search/?q=" + this.input)
        json = await result.json()
        console.log(json)

        this.responselength = json["features"].length
        return json["features"]
    },
    select(a) {
        this.address = JSON.stringify(a)
        this.addressObject = a
        this.input = a.properties.label
    }
}'>
    <input type="hidden" name="{{ .FieldName }}" x-model="address">
    <label for="address" class="block text-sm font-medium text-gray-700">{{ if .FieldLabel }}{{.FieldLabel}}{{else}}Adresse{{end}}</label>
    <input type="text" 
        class="p-2 mt-1 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm border-gray-300 rounded-2xl"
        x-model="input">

    <ul x-show="responselength > 0"
    class="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-xl py-1 text-base overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox" aria-labelledby="listbox-label" aria-activedescendant="listbox-option-3">
        <template x-for="item in autocomplete">
            <a href="#">
                <li class="text-gray-900 hover:bg-gray-200 cursor-default select-none relative py-2 pl-3 pr-9" 
                    @click="select(item)">
                    <span class="font-normal block truncate" x-text="item.properties.label" ></span>
                </li>
            </a>
        </template>
    </ul>
</div>
{{ end }}

{{define "geojson"}}{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [{{index .geometry.coordinates 0}}, {{index .geometry.coordinates 1}}],
  },
  "properties": {
    "label": "{{.properties.label}}"
  }
}{{end}}