<?xml version="1.0" encoding="utf-8"?>
<templates id="template" xml:space="preserve">
<div t-name="web_editor.videoWrapper" t-att-data-oe-expression="src">
    <div class="css_editable_mode_display"/>
    <div class="media_iframe_video_size" contenteditable="false"/>
    <iframe t-att-src="src" frameborder="0" contenteditable="false" allowfullscreen="allowfullscreen"/>
</div>

<t t-name="web_editor.VideoOption" owl="1">
    <div class="mb-1">
        <label class="o_switch" t-on-change="props.onChangeOption">
            <input type="checkbox" t-att-checked="props.value"/><span/>
            <span t-esc="props.label"/>
            <span t-if="props.description" class="small text-muted ms-auto" t-esc="props.description"/>
        </label>
    </div>
</t>

<t t-name="web_editor.VideoSelector" owl="1">
    <div class="row">
        <div class="col mt-4 o_video_dialog_form">
            <div class="mb-2">
                <label class="col-form-label" for="o_video_text">
                    <b>Video code </b>(URL or Embed)
                </label>
                <div class="text-start">
                    <small class="text-muted">Accepts <b><i>Youtube</i></b>, <b><i>Vimeo</i></b>, <b><i>Dailymotion</i></b> and <b><i>Youku</i></b> videos</small>
                </div>
                <textarea t-model="state.urlInput" class="form-control" id="o_video_text" placeholder="Copy-paste your URL or embed code here" t-on-input="onChangeUrl" t-att-class="{ 'is-valid': state.urlInput and !this.state.errorMessage, 'is-invalid': state.urlInput and this.state.errorMessage }"/>
            </div>
            <div t-if="shownOptions.length" class="o_video_dialog_options mt-4">
                <VideoOption t-foreach="shownOptions" t-as="option" t-key="option.id"
                    value="option.value"
                    onChangeOption="() => this.onChangeOption(option.id)"
                    label="option.label"
                    description="option.description"/>
            </div>
            <t t-if="state.vimeoPreviews.length">
                <span class="fw-bold">Suggestions</span>
                <div id="video-suggestion" class="mt-4 d-flex flex-wrap mh-75 overflow-auto">
                    <t t-foreach="state.vimeoPreviews" t-as="vimeoPreview" t-key="vimeoPreview.id">
                        <div class="o_sample_video w-25 mh-100 cursor-pointer" t-on-click="() => this.onClickSuggestion(vimeoPreview.src)">
                            <img class="mw-100 mh-100 p-1" t-att-src="vimeoPreview.thumbnailSrc"/>
                        </div>
                    </t>
                </div>
            </t>
        </div>
        <div class="col-md-6">
            <div class="o_video_preview position-relative border-0 p-3">
                <div t-if="this.state.src and !this.state.errorMessage" class="o_video_dialog_preview_text mb-2">Preview</div>
                <div class="media_iframe_video">
                    <div class="media_iframe_video_size"/>
                    <iframe t-if="this.state.src and !this.state.errorMessage" height="720" width="1280" class="o_video_dialog_iframe mw-100 mh-100 overflow-hidden shadow" allowfullscreen="allowfullscreen" frameborder="0" t-att-src="this.state.src"/>
                    <div t-if="this.state.errorMessage" class="alert alert-warning o_video_dialog_iframe mw-100 mh-100 mb-2 mt-2" t-esc="this.state.errorMessage"/>
                </div>
            </div>
        </div>
    </div>
</t>
</templates>
