<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<t t-name="web_tour.TourRecorder">
    <div class="d-flex position-fixed bottom-0 start-0 bg-primary o_tour_recorder">
        <div t-ref="tour_recorder" class="d-flex">
            <button class="o_button_record btn btn-primary rounded-0" t-on-click.prevent.stop="toggleRecording">
                <span class="px-2 me-1 rounded-circle" t-att-class="state.recording ? 'bg-danger': 'bg-secondary'" role="status" aria-hidden="true"></span>
                Record
                <span class="fst-italic fw-lighter" t-if="state.editedElement"> (recording keyboard)</span>
            </button>
            <Dropdown position="'top-end'">
                <button class="o_button_steps btn btn-primary rounded-0">
                    Steps <span class="badge rounded-pill bg-danger"><t t-esc="state.steps.length"/></span>
                </button>
                <t t-set-slot="content">
                    <div class="o_tour_recorder p-2">
                        <h4>Steps:</h4>
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <td>n°</td>
                                    <td>trigger</td>
                                    <td></td>
                                </tr>
                            </thead>
                            <tbody>
                                <t t-foreach="state.steps" t-as="step" t-key="step_index">
                                    <tr class="o_tour_step" t-att-class="step.triggerNotUnique ? 'text-danger' : ''">
                                        <td><t t-esc="step_index + 1"/>.</td>
                                        <td class="o_tour_step_trigger">
                                            <t t-esc="step.trigger"/>
                                            <span t-if="step.run and step.run != 'click'" class="fst-italic fw-lighter"><br/>(run: <t t-esc="step.run"/>) </span>
                                        </td>
                                        <td><button class="o_button_delete_step btn btn-link text-danger fa fa-trash mx-1" t-on-click.prevent.stop="() => state.steps.splice(step_index, 1)"/></td>
                                    </tr>
                                </t>
                            </tbody>
                        </table>
                    </div>
                </t>
            </Dropdown>
            <Dropdown t-if="state.steps.length" position="'top-end'">
                <button class="o_button_save btn btn-primary px-1 rounded-0">
                    <i class="fa fa-floppy-o"></i>
                </button>
                <t t-set-slot="content">
                    <div class="o_tour_recorder p-1" style="min-width: 30vw;">
                        <form class="p-1" t-on-submit.prevent="saveTour">
                            <label for="name" class="o_form_label my-1">Name:</label><br/>
                            <input t-att-value="state.tourName" t-on-change="(ev) => state.tourName = ev.target.value" class="o_input" placeholder="name_of_the_tour" type="text" name="name"/>
                            <label for="url" class="o_form_label my-1">Url:</label><br/>
                            <input t-att-value="state.url" t-on-change="(ev) => state.url = ev.target.value" class="o_input" type="text" name="url"/>
                            <button class="o_button_save_confirm btn btn-primary mt-3">Save</button>
                        </form>
                    </div>
                </t>
            </Dropdown>
            <button t-if="state.steps.length" class="btn btn-primary px-1" t-on-click="resetTourRecorderState"><i class="fa fa-undo"></i></button>
            <button class="btn btn-primary position-absolute bottom-0 start-100 rounded-0 border-1 o_tour_recorder_close_button" t-on-click.prevent.stop="() => props.onClose()"><i class="fa fa-close"></i></button>
        </div>
    </div>
</t>
</templates>
