<?xml version="1.0"?>
<t t-name="onboarding.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>
    </t>
