{% from "form_include.html" import text_input, text_input_display %}
<div id="locationGroup" class="field py-5">
    {% if is_development %}
    <pre><code>{{ location_form | tojson(indent=2) }}</code></pre>
    {% endif %}
    
    {% if location_form.build_state == "Selecting" %}
        <!-- Enhanced Venue Search Interface -->
        <div class="venue-search-container">
            <label class="label" for="venue-search-input">{{ t("label-location") }}</label>
            
            <!-- Venue Search Input -->
            <div class="field has-addons" style="position: relative;">
                <div class="control is-expanded has-icons-left">
                    <input type="text" 
                           id="venue-search-input"
                           name="q"
                           class="input"
                           placeholder="{{ t('placeholder-search-venues') }}"
                           hx-get="/event/location/venue-search"
                           hx-target="#venue-suggestions"
                           hx-trigger="keyup changed delay:300ms"
                           hx-include="[name='latitude'],[name='longitude'],[name='location_country']"
                           autocomplete="off"
                           aria-describedby="venue-search-help"
                           aria-expanded="false"
                           aria-owns="venue-suggestions">
                    <span class="icon is-small is-left">
                        <i class="fas fa-search"></i>
                    </span>
                </div>
                <div class="control">
                    <button type="button" 
                            id="geolocation-button"
                            class="button is-info is-outlined"
                            onclick="requestGeolocation()"
                            title="{{ t('button-use-my-location') }}">
                        <span class="icon">
                            <i class="fas fa-location-arrow"></i>
                        </span>
                        <span class="is-hidden-mobile">{{ t('button-near-me') }}</span>
                    </button>
                </div>
                
                <!-- Venue Suggestions Dropdown -->
                <div id="venue-suggestions"
                     class="venue-suggestions" 
                     role="listbox" 
                     aria-label="{{ t('venue-suggestions') }}">
                    <!-- Suggestions populated via HTMX -->
                </div>
            </div>
            
            <!-- Hidden fields for venue search context -->
            <input type="hidden" name="latitude" value="">
            <input type="hidden" name="longitude" value="">
            <input type="hidden" name="location_country" value="">
            
            <p id="venue-search-help" class="help">
                {{ t('help-venue-search') }}
            </p>

            <!-- Map Picker Button -->
            <div class="field mt-4">
                <button type="button" 
                        class="button is-info is-outlined is-fullwidth-mobile map-picker-button"
                        onclick="openMapPicker()"
                        aria-describedby="map-picker-help">
                    <span class="icon">
                        <i class="fas fa-map"></i>
                    </span>
                    <span>{{ t('button-pick-on-map') }}</span>
                </button>
                <p id="map-picker-help" class="help">{{ t('help-map-picker') }}</p>
            </div>

            <!-- Manual Entry Toggle -->
            <div class="field mt-4">
                <button type="button" 
                        class="button is-light is-outlined is-fullwidth-mobile"
                        hx-post="/event/location"
                        hx-target="#locationGroup"
                        hx-swap="outerHTML"
                        hx-vals='{"build_state": "Manual"}'>
                    <span class="icon">
                        <i class="fas fa-edit"></i>
                    </span>
                    <span>{{ t('button-enter-manually') }}</span>
                </button>
            </div>
        </div>

    {% elif location_form.build_state == "Manual" %}
        <!-- Manual Address Entry Modal -->
        <div id="locationModal" class="modal is-active" tabindex="-1">
            <div class="modal-background"></div>
            <div class="modal-content">
                <div class="box">
                    <h3 class="title is-4">{{ t("title-manual-location-entry") }}</h3>
                    
                    <div class="field">
                        <label class="label" for="createEventLocationCountryInput">{{ t("label-country") }} ({{ t("required-field") }})</label>
                        <div class="control">
                            <div class="select is-fullwidth">
                                <select id="createEventLocationCountryInput" name="location_country" required>
                                    <option value="">{{ t("select-country") }}</option>
                                    <option value="Canada" {% if location_form.location_country == 'Canada' %}selected{% endif %}>{{ t("country-ca") }}</option>
                                    <option value="United States of America" {% if location_form.location_country == 'United States of America' %}selected{% endif %}>{{ t("country-us") }}</option>
                                    <option value="Mexico" {% if location_form.location_country == 'Mexico' %}selected{% endif %}>{{ t("country-mx") }}</option>
                                    <option value="United Kingdom" {% if location_form.location_country == 'United Kingdom' %}selected{% endif %}>{{ t("country-gb") }}</option>
                                    <option value="Germany" {% if location_form.location_country == 'Germany' %}selected{% endif %}>{{ t("country-de") }}</option>
                                </select>
                            </div>
                        </div>
                        {% if location_form.location_country_error %}
                        <p class="help is-danger">{{ location_form.location_country_error }}</p>
                        {% endif %}
                    </div>

                    {{ text_input(t("label-location-name") + ' (' + t("optional-field") + ')', 'locationAddressName', 'location_name',
                    value=location_form.location_name, error=location_form.location_name_error,
                    extra='autocomplete="off" data-1p-ignore placeholder="' + t("placeholder-location-name") + '"') }}

                    {{ text_input(t("label-street-address") + ' (' + t("optional-field") + ')', 'locationAddressStreet', 'location_street',
                    value=location_form.location_street, error=location_form.location_street_error,
                    extra='autocomplete="off" data-1p-ignore placeholder="' + t("placeholder-street-address") + '"') }}

                    {{ text_input(t("label-locality") + ' (' + t("optional-field") + ')', 'locationAddressLocality', 'location_locality',
                    value=location_form.location_locality, error=location_form.location_locality_error,
                    extra='autocomplete="off" data-1p-ignore placeholder="' + t("placeholder-locality") + '"') }}

                    {{ text_input(t("label-region") + ' (' + t("optional-field") + ')', 'locationAddressRegion', 'location_region',
                    value=location_form.location_region, error=location_form.location_region_error,
                    extra='autocomplete="off" data-1p-ignore placeholder="' + t("placeholder-region") + '"') }}

                    {{ text_input(t("label-postal-code") + ' (' + t("optional-field") + ')', 'locationAddressPostalCode', 'location_postal_code',
                    value=location_form.location_postal_code, error=location_form.location_postal_code_error,
                    extra='autocomplete="off" data-1p-ignore placeholder="' + t("placeholder-postal-code") + '"') }}

                    <div class="field is-grouped pt-4">
                        <p class="control">
                            <button hx-post="/event/location" hx-target="#locationGroup" hx-swap="outerHTML"
                                hx-trigger="click"
                                hx-params="build_state,location_country,location_name,location_street,location_locality,location_region,location_postal_code"
                                hx-vals='{ "build_state": "Selected" }' class="button is-primary">{{ t("button-save") }}</button>
                        </p>
                        <p class="control">
                            <button hx-post="/event/location" hx-target="#locationGroup" hx-swap="outerHTML"
                                hx-trigger="click"
                                hx-vals='{ "build_state": "Selecting" }' class="button is-light">{{ t("button-back") }}</button>
                        </p>
                    </div>
                </div>
            </div>
            <button hx-post="/event/location" hx-target="#locationGroup" hx-swap="outerHTML" hx-trigger="click"
                hx-params="build_state" hx-vals='{ "build_state": "Reset" }' class="modal-close is-large"
                aria-label="{{ t('button-close') }}"></button>
        </div>

    {% elif location_form.build_state == "Selected" %}
        <!-- Selected Venue Display -->
        <div class="venue-selected">
            <div class="venue-info">
                <h4 class="title is-6">
                    {% if location_form.location_name %}
                        {{ location_form.location_name }}
                    {% else %}
                        {{ t('location-selected') }}
                    {% endif %}
                </h4>
                
                <div class="location-details">
                    {% if location_form.location_street %}
                    <p class="subtitle is-7">{{ location_form.location_street }}</p>
                    {% endif %}
                    
                    <p class="subtitle is-7">
                        {% if location_form.location_locality %}{{ location_form.location_locality }}{% endif %}
                        {% if location_form.location_region %}{% if location_form.location_locality %}, {% endif %}{{ location_form.location_region }}{% endif %}
                        {% if location_form.location_postal_code %} {{ location_form.location_postal_code }}{% endif %}
                        {% if location_form.location_country %}{% if location_form.location_locality or location_form.location_region or location_form.location_postal_code %}, {% endif %}{{ location_form.location_country }}{% endif %}
                    </p>
                    
                    {% if location_form.venue_category %}
                    <span class="tag is-info">{{ location_form.venue_category }}</span>
                    {% endif %}
                    
                    {% if location_form.venue_quality %}
                    <div class="venue-quality mt-2">
                        {% for i in range(location_form.venue_quality|round|int) %}
                        <span class="icon is-small"><i class="fas fa-star"></i></span>
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
            </div>
            
            <!-- Mini map display -->
            {% if location_form.latitude and location_form.longitude %}
            <div class="venue-map-preview" 
                 data-lat="{{ location_form.latitude }}" 
                 data-lng="{{ location_form.longitude }}"
                 data-venue-name="{{ location_form.location_name or t('event-location') }}">
                <div class="map-loading">
                    <span class="icon"><i class="fas fa-spinner fa-spin"></i></span>
                    {{ t('loading-map') }}
                </div>
            </div>
            {% endif %}
            
            <div class="field is-grouped mt-4">
                <p class="control">
                    <button hx-post="/event/location" 
                            hx-target="#locationGroup" 
                            hx-swap="outerHTML"
                            hx-vals='{"build_state": "Selecting"}'
                            class="button is-link is-outlined">
                        {{ t("button-edit") }}
                    </button>
                </p>
                <p class="control">
                    <button hx-post="/event/location"
                            hx-target="#locationGroup"
                            hx-swap="outerHTML" 
                            hx-vals='{"build_state": "Reset"}'
                            class="button is-danger is-outlined">
                        {{ t("button-clear") }}
                    </button>
                </p>
            </div>
        </div>
        
        <!-- Hidden form fields for data persistence -->
        {% if location_form.latitude %}
        <input type="hidden" name="latitude" value="{{ location_form.latitude }}">
        {% endif %}
        {% if location_form.longitude %}
        <input type="hidden" name="longitude" value="{{ location_form.longitude }}">
        {% endif %}
        {% if location_form.location_country %}
        <input type="hidden" name="location_country" value="{{ location_form.location_country }}">
        {% endif %}
        {% if location_form.location_name %}
        <input type="hidden" name="location_name" value="{{ location_form.location_name }}">
        {% endif %}
        {% if location_form.location_street %}
        <input type="hidden" name="location_street" value="{{ location_form.location_street }}">
        {% endif %}
        {% if location_form.location_locality %}
        <input type="hidden" name="location_locality" value="{{ location_form.location_locality }}">
        {% endif %}
        {% if location_form.location_region %}
        <input type="hidden" name="location_region" value="{{ location_form.location_region }}">
        {% endif %}
        {% if location_form.location_postal_code %}
        <input type="hidden" name="location_postal_code" value="{{ location_form.location_postal_code }}">
        {% endif %}
        {% if location_form.venue_category %}
        <input type="hidden" name="venue_category" value="{{ location_form.venue_category }}">
        {% endif %}
        {% if location_form.venue_quality %}
        <input type="hidden" name="venue_quality" value="{{ location_form.venue_quality }}">
        {% endif %}

    {% else %}
        <!-- Reset/initial state -->
        <div class="venue-reset">
            <div class="field">
                <label class="label">{{ t("label-location") }}</label>
                <div class="control">
                    <input type="text" class="input is-static" 
                           value="{{ t('not-set') }}" readonly />
                </div>
            </div>
            <div class="field">
                <p class="control">
                    <button hx-post="/event/location"
                            hx-target="#locationGroup" 
                            hx-swap="outerHTML"
                            hx-vals='{"build_state": "Selecting"}'
                            class="button is-link is-outlined">
                        {{ t("button-add-location") }}
                    </button>
                </p>
            </div>
        </div>
    {% endif %}
</div>