<?xml version="1.0" encoding="utf-8"?>
<templates xml:space="preserve">

    <!-- Interactive Map Widget -->
    <t t-name="fusion_clock.LocationMap">
        <div class="fclk-map-widget">
            <div t-if="state.loading" class="fclk-map-loading">
                <i class="fa fa-circle-o-notch fa-spin"/> Loading map...
            </div>
            <div t-if="state.error" class="fclk-map-error">
                <i class="fa fa-exclamation-triangle"/> <t t-esc="state.error"/>
            </div>
            <!-- ALWAYS in the DOM so the ref is available at mount time.
                 Hidden via inline display:none until the map is ready. -->
            <div t-ref="mapContainer"
                 class="fclk-map-container"
                 t-att-style="state.mapVisible ? 'width:100%;height:400px;border-radius:8px;' : 'display:none;'"/>
            <div t-if="state.mapVisible and !props.readonly" class="fclk-map-hint">
                <i class="fa fa-hand-pointer-o"/> Click the map or drag the marker to fine-tune the location
            </div>
        </div>
    </t>

    <!-- Places Autocomplete Widget -->
    <t t-name="fusion_clock.PlacesAutocomplete">
        <t t-if="isReadonly">
            <span t-esc="props.record.data[props.name] || ''"/>
        </t>
        <t t-else="">
            <input t-ref="addressInput"
                   type="text"
                   class="o_input fclk-places-input"
                   t-att-value="state.value"
                   t-on-input="onInput"
                   t-on-change="onChange"
                   placeholder="Start typing an address..."/>
        </t>
    </t>

</templates>
