<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<t t-name="web_tour.TourRecorder">
    <div t-ref="tour_recorder" class="d-flex position-fixed ms-2 mb-2 p-1 rounded bg-primary shadow-sm o_tour_recorder" t-attf-style="left: {{state.position.x}}px; bottom: {{state.position.y}}px;">
        <div class="d-flex align-items-center">
            <div class="bg-primary text-secondary o_tour_recorder_handler px-1" style="cursor: grab;">
                <span class="oi oi-draggable"/>
            </div>
            <button class="o_button_record btn btn-primary " t-on-click.prevent.stop="toggleRecording">
                <span class="px-2 me-1 rounded-circle" t-att-class="state.recording ? 'bg-danger': 'bg-white'" role="status" aria-hidden="true"></span>
                Record
                <span class="fst-italic fw-lighter" t-if="state.editedElement"> (recording keyboard)</span>
            </button>
            <Dropdown position="'bottom-end'" menuClass="'p-0'" state="dropdownState">
                <button class="o_button_steps btn btn-primary mx-1" t-att-disabled="!state.steps.length">
                    Steps <span class="bg-danger rounded py-1 px-2"><t t-esc="state.steps.length"/></span>
                </button>
                <t t-set-slot="content">
                    <div class="o_tour_recorder" style="height: 400px; width: 500px">
                        <table class="table">
                            <thead class="fw-bold bg-secondary-subtle position-sticky top-0">
                                <tr>
                                    <td>#</td>
                                    <td style="width: 25rem">Trigger</td>
                                    <td><button class="btn btn-link py-0" t-on-click="openResetStepsDialog">Clear</button></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="() => this.removeStep(step_index)"/></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-2 rounded-0" data-tooltip="Save">
                    <i class="fa fa-cloud-upload"></i>
                </button>
                <t t-set-slot="content">
                    <div class="o_tour_recorder p-1" style="width: 400px;">
                        <form t-on-submit.prevent="saveTour">
                            <div class="container">
                                <div class="row pt-1">
                                    <div class="col-4">
                                        <label for="tour_name" class="o_form_label fw-bold me-2">Name</label>
                                    </div>
                                    <div class="col-8 o_field_widget">
                                        <input t-att-value="state.tourName" t-on-change="(ev) => state.tourName = ev.target.value" class="o_input" type="text" id="tour_name"/>
                                    </div>
                                </div>  
                                <div class="row pt-3">
                                    <div class="col-4">
                                        <label for="url" class="o_form_label fw-bold">Starting URL</label>
                                    </div>
                                    <div class="col-8 o_field_widget">
                                        <input t-att-value="state.url" t-on-change="(ev) => state.url = ev.target.value" class="o_input" type="text" id="url"/>
                                    </div>
                                </div>   
                                <div class="row pt-2">
                                    <div class="col">
                                        <button class="o_button_save_confirm btn btn-primary">Save</button>
                                    </div>
                                </div>     
                            </div>
                        </form>
                    </div>
                </t>
            </Dropdown>
            <button class="btn btn-primary o_tour_recorder_close_button" t-on-click.prevent.stop="openCloseRecorderDialog" data-tooltip="Close"><i class="fa fa-close"></i></button>
        </div>
    </div>
</t>
</templates>
