<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
    <t t-name="web_tour.TourPointer">
        <div 
            t-ref="anchor"
            class="o_tour_anchor"
        />
        <div
            t-ref="pointer"
            t-if="isVisible"
            t-attf-class="
                o_tour_pointer
                {{ props.pointerState.onClick ? 'cursor-pointer' : '' }}
            "
            t-attf-style="
                --TourPointer__width: {{ constructor.width }}px;
                --TourPointer__height: {{ constructor.height }}px;
            "
        >   
            <div
                t-ref="dropzone"
                t-if="props.pointerState.isZone"
                class="o_tour_dropzone pe-none"
            />
            <div
                t-if="!this.state.showContent and !props.pointerState.isZone"
                t-on-mouseover="() => this.openContent()"
                t-attf-class="o_tour_pointer_tip o_{{ state.direction }}"
            />
        </div>
    </t>
    <t t-name="web_tour.TourPointer.Content">
        <div 
            class="o_tour_pointer o_tour_pointer_content px-3 py-2"
            t-on-click="props.onClick"
            t-on-mouseleave="props.closeContent"
            t-on-mouseover="props.openContent"
        >
            <span>
                <t t-out="props.content" />
            </span>
            <div class="d-flex justify-content-end">
                <button class="btn btn-link shadow-none" t-on-click="onStopClicked">Stop Tour</button>
            </div>
        </div>
    </t>
</templates>
