<?xml version="1.0"?>
<t name="Donation Button" t-name="website_payment.s_donation_button">
    <div class="s_donation" data-name="Donation Button" data-donation-email="info@yourcompany.example.com" data-custom-amount="freeAmount" t-att-data-display-options="display_options" data-prefilled-options="true" data-descriptions="true" data-donation-amounts="[&quot;10&quot;, &quot;25&quot;, &quot;50&quot;, &quot;100&quot;]" data-minimum-amount="5" data-maximum-amount="100" data-slider-step="5" data-default-amount="25">
        <form class="s_donation_form" action="/donation/pay" method="post" enctype="multipart/form-data">
            <span id="s_donation_description_inputs">
                <input type="hidden" class="o_translatable_input_hidden d-block mb-1 w-100" name="donation_descriptions" value="A year of cultural awakening."/>
                <input type="hidden" class="o_translatable_input_hidden d-block mb-1 w-100" name="donation_descriptions" value="Caring for a baby for 1 month."/>
                <input type="hidden" class="o_translatable_input_hidden d-block mb-1 w-100" name="donation_descriptions" value="One year in elementary school."/>
                <input type="hidden" class="o_translatable_input_hidden d-block mb-1 w-100" name="donation_descriptions" value="One year in high school."/>
            </span>
            <div t-if="display_options" class="s_donation_prefilled_buttons my-4">
                <div class="s_donation_btn_description d-sm-flex align-items-center my-3 o_not_editable o_translate_mode_hidden" contenteditable="false">
                    <button class="s_donation_btn btn btn-outline-primary btn-lg me-3" type="button" data-donation-value="10">
                        <span class="s_donation_currency pe-1">$</span>10
                    </button>
                    <p class="s_donation_description mt-2 my-sm-auto text-muted fst-italic">A year of cultural awakening.</p>
                </div>
                <div class="s_donation_btn_description d-sm-flex align-items-center my-3 o_not_editable o_translate_mode_hidden" contenteditable="false">
                    <button class="s_donation_btn btn btn-outline-primary btn-lg me-3" type="button" data-donation-value="25">
                        <span class="s_donation_currency pe-1">$</span>25
                    </button>
                    <p class="s_donation_description mt-2 my-sm-auto text-muted fst-italic">Caring for a baby for 1 month.</p>
                </div>
                <div class="s_donation_btn_description d-sm-flex align-items-center my-3 o_not_editable o_translate_mode_hidden" contenteditable="false">
                    <button class="s_donation_btn btn btn-outline-primary btn-lg me-3" type="button" data-donation-value="50">
                        <span class="s_donation_currency pe-1">$</span>50
                    </button>
                    <p class="s_donation_description mt-2 my-sm-auto text-muted fst-italic">One year in elementary school.</p>
                </div>
                <div class="s_donation_btn_description d-sm-flex align-items-center my-3 o_not_editable o_translate_mode_hidden" contenteditable="false">
                    <button class="s_donation_btn btn btn-outline-primary btn-lg me-3" type="button" data-donation-value="100">
                        <span class="s_donation_currency pe-1">$</span>100
                    </button>
                    <p class="s_donation_description mt-2 my-sm-auto text-muted fst-italic">One year in high school.</p>
                </div>
                <div class="d-sm-flex align-items-center my-3">
                    <span class="s_donation_btn s_donation_custom_btn btn btn-outline-primary btn-lg">
                        <span class="s_donation_currency pe-1">$</span>
                        <input id="s_donation_amount_input" type="number" placeholder="Custom Amount" aria-label="Amount" min="5" style="max-width: 156px;"/>
                    </span>
                </div>
            </div>
            <a href="#" type="button" class="s_donation_donate_btn btn btn-secondary btn-lg mb-2">Donate Now</a>
        </form>
    </div>
</t>

