{% extends "base.html" %}
{% load crispy_forms_tags %}
{% load i18n %}

{% block title %}Location{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
{% endblock %}
{% block extra_js %}
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type='text/javascript'>pageView();</script>
<script type="text/javascript">
    $(document).ready(function() {
        document.getElementById('id_location_coordinates').style.display = "none";
        var searchTimeout = null;
        var availableTags = [];
        $("#id_club_affiliation").autocomplete({
            source: availableTags,
            select:function(value, data) {
                $('#id_club').val(data.item.id);
                $('#id_club_affiliation').addClass('is-valid');
            }
        });
        function getClub(search) {
            //console.log('search: ' + search);
            var data = {};
            data.search = search;
            $.ajax({
                type: "POST",
                beforeSend: function (request) {
                    request.setRequestHeader("X-CSRFTOKEN", "{{ csrf_token }}");
                },
                url: "/api/clubs/",
                data : data,
                success : function(result) {
                    var availableTags = [];
                    availableTags.push(result);
                    for (item in result) {
                        availableTags.push({
                            id: result[item].id,
                            value: result[item].name + " (" + result[item].abbreviation + ")",
                            });
                    };
                    $( "#id_club_affiliation" ).autocomplete( "option", "source", availableTags);
                }
            });
        }

        $('#id_club_affiliation').keyup(function(e) {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(() => getClub(e.target.value), 300);
        });
    });
</script>

    {{form.media}}
{% endblock %}
{% block content %}
{% include "preferences_ribbon.html" %}
        <br><a href='/blog/privacy/' target='_blank'>Who can see this information</a><br><br>
            {% if auctiontos_update_message %}
            <div class="alert alert-info" role="alert">
                <i class="bi bi-info-circle me-1"></i>{{ auctiontos_update_message }}
            </div>
            {% endif %}
            {% if club_membership_message %}
            <div class="alert alert-info" role="alert">
                <i class="bi bi-people-fill me-1"></i>{{ club_membership_message }}
            </div>
            {% endif %}
            {% crispy form form.helper %}
{% endblock %}