<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <t t-name="website.slide.upload.modal">
        <div>
            <div class="o_w_slide_upload_modal_container">
                <t t-call="website.slide.upload.modal.select"/>
            </div>
        </div>
    </t>

    <!--
        Slide Type Selection template
    -->
    <t t-name="website.slide.upload.modal.select">
        <div class="row p-1 mt-4 mb-2">
            <div t-foreach="widget.slide_type_data" t-as="slide_type" class="col-6 col-md-3">
                <t t-set="type_data" t-value="widget.slide_type_data[slide_type]"/>

                <a href="#" t-att-data-slide-type="slide_type"
                    class="content-type d-flex flex-column align-items-center mb-4 o_wslides_select_type btn rounded border text-600 p-3">
                    <i t-attf-class="fa #{type_data['icon']} mb-2 fa-3x"/>
                    <t t-esc="type_data['label']"/>
                </a>
            </div>
        </div>
        <t t-if="widget.modulesToInstall">
            <t t-foreach="widget.modulesToInstall" t-as="module_info">
                <a class="o_wslides_js_upload_install_button w-100 text-center mb-4 btn rounded border text-600 p-3"
                    href="#" t-att-title="module_info['name']"
                    t-att-data-module-id="module_info['id']">
                    <i class="fa fa-trophy"></i> <t t-esc="module_info['motivational']"/>
                </a>
            </t>
        </t>
    </t>

    <!--
        Uploading template
    -->
    <t t-name="website.slide.upload.modal.uploading">
        <div class="text-center" role="status">
            <div class="fa-3x">
                <i class="fa fa-circle-o-notch fa-spin"></i>
            </div>
            <h4>Uploading document ...</h4>
        </div>
    </t>

    <!--
        Import module template
    -->
    <t t-name="website.slide.upload.modal.import">
        <p id="o_wslides_install_module_text"/>
    </t>

    <!--
        Slide Type common form part template
    -->
    <t t-name="website.slide.upload.modal.common">
        <div class="form-group">
            <label for="name" class="col-form-label">Title</label>
            <input id="name" name="name" placeholder="Title" class="form-control" required="required"/>
        </div>
        <div t-if="!widget.defaultCategoryID" class="form-group">
            <label for="category_id" class="col-form-label">Section</label>
            <input class="form-control" id="category_id"/>
        </div>
        <div class="form-group">
            <label for="tag_ids" class="col-form-label">Tags</label>
            <input id="tag_ids" name="tag_ids" type="hidden"/>
        </div>
        <div class="form-group">
            <label for="duration" class="col-form-label">Duration</label>
            <div class="input-group">
                <input type="number" id="duration" min="0" name="duration" placeholder="Estimated slide completion time" class="form-control"/>
                    <div class="input-group-prepend">
                    <span class="input-group-text">Minutes</span>
                </div>
            </div>
        </div>
    </t>

    <!--
        Slide Type templates
    -->
    <t t-name="website.slide.upload.modal.presentation">
        <div>
            <form class="clearfix">
                <div class="row">
                    <div id="o_wslides_js_slide_upload_left_column" class="col-md-6">
                        <div class="form-group">
                            <label for="upload" class="col-form-label">Choose a PDF or an Image</label>
                            <input id="upload" name="file" class="form-control h-100" accept="image/*,application/pdf" type="file" required="required"/>
                        </div>
                        <canvas id="data_canvas" class="d-none"></canvas>
                        <t t-call="website.slide.upload.modal.common"/>
                    </div>
                    <div id="o_wslides_js_slide_upload_preview_column" class="col-md-6">
                        <div class="img-thumbnail h-100">
                            <div class="o_slide_tutorial p-3">
                                <div class="h5">How to upload your PowerPoint Presentations or Word Documents?</div>
                                <div class="mx-3 my-4">Save your presentations or documents as PDF files and upload them.</div>
                                <div class="alert alert-warning" role="alert">
                                    <i class="fa fa-info-circle pr-2"/>
                                    Only JPG, PNG, PDF, files types are supported
                                </div>
                            </div>
                            <div class="o_slide_preview d-none">
                                <img src="/website_slides/static/src/img/document.png" id="slide-image" title="Content Preview" alt="Content Preview" class="img-fluid"/>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </t>

    <t t-name="website.slide.upload.modal.webpage">
        <div>
            <form class="clearfix">
                <div class="row">
                    <div id="o_wslides_js_slide_upload_left_column" class="col-md-6">
                        <canvas id="data_canvas" class="d-none"></canvas>
                        <t t-call="website.slide.upload.modal.common"/>
                    </div>
                    <div id="o_wslides_js_slide_upload_preview_column" class="col-md-6">
                        <div class="img-thumbnail h-100">
                            <div class="o_slide_tutorial p-3">
                                <div class="h5">How to create a Lesson as a Web Page?</div>
                                <div class="mx-3 my-4">First, create your lesson, then edit it with the website builder. You'll be able to drop building blocks on your page and edit them.</div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </t>

    <t t-name="website.slide.upload.modal.video">
        <div>
            <form class="clearfix">
                <div class="row">
                    <div id="o_wslides_js_slide_upload_left_column" class="col-md-6">
                        <div class="form-group">
                            <label for="url" class="col-form-label">Youtube Link</label>
                            <input id="url" name="url" class="form-control" placeholder="Youtube Video URL" required="required"/>
                        </div>
                        <canvas id="data_canvas" class="d-none"></canvas>
                        <t t-call="website.slide.upload.modal.common"/>
                    </div>
                    <div id="o_wslides_js_slide_upload_preview_column" class="col-md-6">
                        <div class="img-thumbnail h-100">
                            <div class="o_slide_tutorial p-3">
                                <div class="h5">How to upload your videos ?</div>
                                <div class="mx-3 my-4">First, upload your videos on YouTube and mark them as <strong>unlisted</strong>. This way, they will be secured.</div>
                                <div class="mx-3 my-4">What does <strong>unlisted</strong> means? The YouTube "unlisted" means it is a video which can be viewed only by the users with the link to it. Your video will never come up in the search results nor on your channel.</div>
                                <div class="mx-3 my-4"><a href="https://support.google.com/youtube/answer/157177" target="_blank" >Change video privacy settings</a></div>
                            </div>
                            <div class="o_slide_preview d-none">
                                <img src="/website_slides/static/src/img/document.png" id="slide-image" title="Content Preview" alt="Content Preview" class="img-fluid"/>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </t>

    <t t-name="website.slide.upload.quiz">
        <div>
            <form class="clearfix">
                <div class="row">
                    <div id="o_wslides_js_slide_upload_left_column" class="col-md-6">
                        <canvas id="data_canvas" class="d-none"></canvas>
                        <t t-call="website.slide.upload.modal.common"/>
                    </div>
                    <div id="o_wslides_js_slide_upload_preview_column" class="col-md-6">
                        <div class="img-thumbnail h-100">
                            <div class="o_slide_tutorial p-3">
                                <div class="h5">Test your students with small Quizzes</div>
                                <div class="mx-3 my-4">With Quizzes you can keep your students focused and motivated by answering some questions and gaining some karma points</div>
                                <img src="/website_slides/static/src/img/onboarding-quiz.png" title="Quiz Demo Data" class="img-fluid"/>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </t>
</templates>
