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

<t t-name="website_payment.DonationOption">
    <BuilderRow label.translate="Recipient Email">
        <BuilderTextInput dataAttributeAction="'donationEmail'" />
    </BuilderRow>
    <BuilderRow label.translate="Display Options" preview="false">
        <BuilderCheckbox id="'display_options_opt'" action="'toggleDisplayOptions'" />
    </BuilderRow>
    <BuilderRow t-if="!isActiveItem('no_input_opt')"
                label.translate="Pre-filled Options" preview="false">
        <BuilderCheckbox id="'pre_filled_opt'" action="'togglePrefilledOptions'" />
    </BuilderRow>
    <t t-if="isActiveItem('no_input_opt') || isActiveItem('pre_filled_opt')">
        <t t-set="translatedDefaultDescription">Add a description here</t>
        <BuilderList
                action="'setPrefilledOptions'"
                addItemTitle.translate="Add"
                itemShape="{ value: 'number', description: 'text' }"
                default="{ value: '50', description: translatedDefaultDescription }"
                columnWidth="{ value: 'w-25' }"
                hiddenProperties="isActiveItem('pre_filled_descriptions_opt') ? [] : ['description']"
        />
        <BuilderRow label.translate="Descriptions" level="1" preview="false">
            <BuilderCheckbox id="'pre_filled_descriptions_opt'" action="'toggleDescriptions'" />
        </BuilderRow>
    </t>
    <BuilderRow label.translate="Custom Amount" preview="false">
        <BuilderSelect action="'selectAmountInput'">
            <t t-if="!isActiveItem('display_options_opt') || isActiveItem('pre_filled_opt') || isActiveItem('no_input_opt')">
                <BuilderSelectItem id="'free_amount_opt'" actionParam="'freeAmount'">Input</BuilderSelectItem>
            </t>
            <t t-if="isActiveItem('display_options_opt')">
                <BuilderSelectItem id="'slider_opt'" actionParam="'slider'">Slider</BuilderSelectItem>
            </t>
            <t t-if="isActiveItem('no_input_opt') || isActiveItem('pre_filled_opt')">
                <BuilderSelectItem id="'no_input_opt'" actionParam="''">None</BuilderSelectItem>
            </t>
        </BuilderSelect>
    </BuilderRow>
    <BuilderRow t-if="!isActiveItem('no_input_opt')"
                label.translate="Minimum" level="1">
        <BuilderNumberInput step="1" action="'setMinimumAmount'"/>
    </BuilderRow>
    <t t-if="isActiveItem('slider_opt')">
        <BuilderRow label.translate="Maximum" level="1">
            <BuilderNumberInput step="1" action="'setMaximumAmount'"/>
        </BuilderRow>
        <BuilderRow label.translate="Step" level="1">
            <BuilderNumberInput step="1" action="'setSliderStep'"/>
        </BuilderRow>
    </t>
    <BuilderRow label.translate="Default Amount">
        <BuilderNumberInput step="1" default="25" dataAttributeAction="'defaultAmount'"/>
    </BuilderRow>
</t>

<t t-name="website_payment.donation.descriptionTranslationInputs">
    <t t-foreach="descriptions" t-as="description" t-key="description_index">
        <input type="hidden" class="o_translatable_input_hidden d-block mb-1 w-100" name="donation_descriptions" t-att-value="description"/>
    </t>
</t>

<t t-name="website_payment.donation.prefilledButtons">
    <div class="s_donation_prefilled_buttons mb-2">
        <t t-foreach="prefilled_buttons" t-as="prefilled_button_value" t-key="prefilled_button_value_index">
            <button class="s_donation_btn btn btn-outline-primary btn-lg mb-2 me-1 o_not_editable"
                    type="button"
                    contenteditable="false"
                    t-att-data-donation-value="prefilled_button_value"
                    t-esc="prefilled_button_value"/>
        </t>
        <span t-if="custom_input" class="s_donation_btn s_donation_custom_btn btn btn-outline-primary btn-lg mb-2 me-1">
            <input id="s_donation_amount_input" type="number" t-att-min="minimum_amount" class="" placeholder="Custom Amount" aria-label="Amount"/>
        </span>
    </div>
</t>
<t t-name="website_payment.donation.prefilledButtonsDescriptions">
    <div class="s_donation_prefilled_buttons my-4">
        <t t-foreach="prefilled_buttons" t-as="prefilled_button" t-key="prefilled_button_value_index">
            <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"
                        t-att-data-donation-value="prefilled_button.value"
                        t-esc="prefilled_button.value"/>
                <p class="s_donation_description mt-2 my-sm-auto text-muted fst-italic" t-esc="prefilled_button.description"></p>
            </div>
        </t>
        <div t-if="custom_input" class="d-sm-flex align-items-center my-3">
            <span class="s_donation_btn s_donation_custom_btn btn btn-outline-primary btn-lg">
                <input id="s_donation_amount_input" type="number" t-att-min="minimum_amount" placeholder="Custom Amount" aria-label="Amount"/>
            </span>
        </div>
    </div>
</t>
<t t-name="website_payment.donation.slider">
    <div class="s_donation_range_slider_wrap mb-2 position-relative">
        <label for="s_donation_range_slider">Choose Your Amount</label>
        <input type="range" class="form-range" t-att-min="minimum_amount" t-att-max="maximum_amount" t-att-step="slider_step" id="s_donation_range_slider" contenteditable="false"/>
        <output class="s_range_bubble" contenteditable="false">25</output>
    </div>
</t>

</templates>
