<?xml version="1.0" encoding="utf-8" ?>
<odoo>
    <template id="onboarding_panel">
        <t t-call="onboarding.onboarding_container">
            <t t-foreach="steps" t-as="step">
                <t t-call="onboarding.onboarding_step">
                    <t t-set="title" t-value="step.title"/>
                    <t t-set="description" t-value="step.description"/>
                    <t t-set="done_icon" t-value="step.done_icon"/>
                    <t t-set="btn_text" t-value="step.button_text"/>
                    <t t-set="done_text" t-value="step.done_text"/>
                    <t t-set="image" t-value="'/web/image/onboarding.onboarding.step/'+str(step.id)+'/step_image'"/>
                    <t t-set="alt" t-value="step.step_image_alt"/>
                    <!-- Model/method used by JS implementation of banners for each step-->
                    <t t-set="method" t-value="step.panel_step_open_action_name"/>
                    <t t-set="model">onboarding.onboarding.step</t>
                    <!-- to mimic first implementation of onboarding, the 'state' queried holds
                    a rendering state for all steps. See _get_and_update_onboarding_state -->
                    <t t-set="state" t-value="state.get(step.id)"/>
                </t>
            </t>
        </t>
    </template>

    <template id="onboarding_container">
        <div class="modal o_onboarding_modal o_technical_modal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Hide Onboarding Tips</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"/>
                    </div>
                    <div class="modal-body">
                        <p>Are you sure you want to hide these configuration steps?</p>
                    </div>
                    <div class="modal-footer justify-content-start">
                        <a type="action" class="btn btn-primary me-1" data-bs-dismiss="modal"
                            data-o-hide-banner="true" t-att-data-model="close_model" t-att-data-method="close_method"
                        >
                            Get them out of my sight!
                        </a>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="o_onboarding_main d-print-none position-relative border-bottom overflow-hidden">
            <div class="o_onboarding_wrap py-3 py-lg-4">
                <a href="#" data-bs-toggle="modal" data-bs-target=".o_onboarding_modal" class="o_onboarding_btn_close position-absolute top-0 end-0 py-2 px-3 h2" title="Close the onboarding panel"><i class="oi oi-close"/></a>
                <div class="o_onboarding_steps d-flex" t-out="0"/>

                <div t-if="state.get('onboarding_state') == 'just_done'"
                        t-att-state="state.get('onboarding_state')"
                        class="o_onboarding_completed_message position-absolute end-0 start-0 border-bottom py-4 bg-white d-flex align-items-center justify-content-center">
                    <span class="h3 m-0">
                        <i class="fa fa-check text-success me-3" />
                        <t t-if="text_completed" t-out="text_completed" />
                    </span>
                    <a type="action" class="btn btn-primary ms-4" t-att-data-model="close_model" t-att-data-method="close_method">
                        Close Panel
                    </a>
                </div>
            </div>
        </div>
    </template>

    <template id="onboarding_step">
        <div class="o_onboarding_step position-relative d-flex flex-column align-items-center justify-content-start text-center" t-att-data-step-state="state">
            <img t-if="state == 'just_done'" class="o_onboarding_confetti position-absolute w-100" src="/base/static/img/onboarding_confetti.svg" alt="o_onboarding_confetti"/>

            <div class="o_onboarding_line position-absolute"/>
            <div class="o_onboarding_step_side d-flex">
                <img class="z-1" t-attf-src="#{image}" t-attf-alt="#{alt}"/>
            </div>

            <div class="o_onboarding_step_content position-relative pt-2 flex-grow-1 d-flex flex-column align-items-center justify-content-around">
                <div class="o_onboarding_step_content_info flex-grow-1 mb-2">
                    <a type="action" data-reload-on-close="true" role="button" t-att-data-method="method" t-att-data-model="model">
                        <h5 class="o_onboarding_step_title mb-1" t-out="title"/>
                    </a>
                    <p class="m-0 small" t-out="description"/>
                </div>
                <a t-if="state == 'not_done'" class="o_onboarding_step_action btn px-4" type="action" data-reload-on-close="true" role="button" t-att-data-method="method" t-att-data-model="model">
                    <span>
                        <t t-if="btn_text" t-out="btn_text" />
                        <t t-else="">Let's do it</t>
                    </span>
                </a>
                <a t-else="" class="o_onboarding_step_action__done btn" type="action" data-reload-on-close="true" role="button" t-att-data-method="method" t-att-data-model="model">
                    <span>
                        <i t-attf-class="p-1 me-1 fa #{done_icon if done_icon else 'fa-check'} rounded-circle" />
                        <t t-if="done_text" t-out="done_text" />
                        <t t-else="">All done!</t>
                    </span>
                </a>
            </div>
        </div>
    </template>
</odoo>
