<?xml version="1.0"?>
<t t-name="base.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_step_side d-flex pt-0 flex-grow-1">
                <div class="o_onboarding_progress position-absolute"/>
                <span t-attf-class="o_onboarding_dot fa fa-check d-inline-block rounded-circle small {{state != 'not_done' and 'o_onboarding_dot_isChecked' or ''}}"/>
            </div>

            <div class="o_onboarding_step_content py-3 flex-grow-1 d-flex flex-column align-items-center justify-content-around">
                <div class="o_onboarding_step_content_info mb-3">
                    <a type="action" data-reload-on-close="true" role="button" t-att-data-method="method" t-att-data-model="model">
                        <h4 class="o_onboarding_step_title" t-out="title"/>
                    </a>
                    <p class="text-white-75 m-0" 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="me-2 fa #{done_icon if done_icon else 'fa-check'}"/>
                        <t t-if="done_text" t-out="done_text"/>
                        <t t-else="">All done!</t>
                    </span>
                </a>
            </div>
        </div>
    </t>

    