<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="xeno_orr.Stops">
        <div class="o_xeno_orr_stops">
            <div t-if="state.loading" class="text-muted">Loading…</div>
            <t t-else="">
                <table class="o_xeno_orr_stops_table" t-if="state.stops.length">
                    <thead>
                        <tr>
                            <th>Place</th>
                            <th>Purpose</th>
                            <th>GPS</th>
                            <th/>
                        </tr>
                    </thead>
                    <tbody>
                        <t t-foreach="state.stops" t-as="stop" t-key="stop.id">
                            <tr>
                                <td t-esc="stop.place"/>
                                <td t-esc="stop.purpose"/>
                                <td>
                                    <span t-if="stop.gps_captured" class="badge text-bg-success">
                                        <i class="fa fa-check me-1"/>Recorded
                                    </span>
                                    <button t-else="" type="button" class="btn btn-sm btn-outline-primary"
                                            t-att-disabled="state.recordingId === stop.id"
                                            t-on-click="() => this.onRecordGps(stop)">
                                        <t t-if="state.recordingId === stop.id">Recording…</t>
                                        <t t-else="">
                                            <i class="fa fa-map-marker me-1"/>Record GPS
                                        </t>
                                    </button>
                                </td>
                                <td>
                                    <button type="button" class="btn btn-sm btn-link text-danger"
                                            t-on-click="() => this.onRemoveStop(stop.id)">
                                        <i class="fa fa-trash"/>
                                    </button>
                                </td>
                            </tr>
                        </t>
                    </tbody>
                </table>
                <div t-else="" class="text-muted mb-3">No stops added yet.</div>

                <div class="o_xeno_orr_stop_add d-flex gap-2 mt-3">
                    <input type="text" class="form-control form-control-sm" placeholder="Place"
                           t-model="state.newPlace"/>
                    <input type="text" class="form-control form-control-sm" placeholder="Purpose"
                           t-model="state.newPurpose"/>
                    <button type="button" class="btn btn-sm btn-primary" t-on-click="onAddStop">Add</button>
                </div>

                <div class="text-end mt-4">
                    <button type="button" class="btn btn-secondary" t-on-click="onClose">Close</button>
                </div>
            </t>
        </div>
    </t>
</templates>
