<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="xeno_attendance.LocationPreview">
        <div class="o_xeno_location_preview">
            <div class="o_xeno_location_preview_tabs">
                <button class="o_xeno_location_tab active" disabled="disabled">
                    <i class="fa fa-map-o me-1"/>Preview
                </button>
                <button class="o_xeno_location_tab" t-on-click="onEdit">
                    <i class="fa fa-pencil me-1"/>Edit
                </button>
            </div>

            <div t-if="state.location" class="o_xeno_location_map" t-ref="map"/>

            <div t-if="state.location" class="o_xeno_location_stats">
                <div class="o_xeno_location_stat">
                    <div class="o_xeno_location_stat_label">Latitude</div>
                    <div class="o_xeno_location_stat_value" t-esc="state.location.latitude"/>
                </div>
                <div class="o_xeno_location_stat">
                    <div class="o_xeno_location_stat_label">Longitude</div>
                    <div class="o_xeno_location_stat_value" t-esc="state.location.longitude"/>
                </div>
                <div class="o_xeno_location_stat">
                    <div class="o_xeno_location_stat_label">Radius</div>
                    <div class="o_xeno_location_stat_value" t-esc="state.location.radius + ' m'"/>
                </div>
                <div class="o_xeno_location_stat">
                    <div class="o_xeno_location_stat_label">Status</div>
                    <div class="o_xeno_location_stat_value">
                        <span t-if="state.location.active" class="o_xeno_location_status_active">
                            <i class="fa fa-check-circle me-1"/>Active
                        </span>
                        <span t-else="" class="o_xeno_location_status_archived">
                            <i class="fa fa-ban me-1"/>Archived
                        </span>
                    </div>
                </div>
            </div>

            <div t-if="state.location" class="o_xeno_location_footer">
                <a t-att-href="openStreetMapUrl" target="_blank" rel="noopener">
                    <i class="fa fa-external-link me-1"/>Open in OpenStreetMap
                </a>
                <div class="o_xeno_location_footer_actions">
                    <button class="btn btn-secondary" t-on-click="onClose">Close</button>
                    <button class="btn btn-primary" t-on-click="onEdit">
                        <i class="fa fa-pencil me-1"/>Edit
                    </button>
                </div>
            </div>
        </div>
    </t>
</templates>
