<?xml version="1.0" encoding="utf-8"?>
<odoo>

    <!-- Inline payment form template for Clover -->
    <template id="inline_form">
        <t t-set="inline_form_values"
           t-value="provider_sudo._clover_get_inline_form_values(
                        amount,
                        currency,
                        partner_id,
                        mode == 'validation',
                        payment_method_sudo=pm_sudo,
                    )"
        />
        <div name="o_clover_payment_container"
             class="o_clover_payment_form"
             t-att-data-clover-inline-form-values="inline_form_values">

            <!-- Terminal toggle -->
            <div class="mb-3 form-check">
                <input type="checkbox" class="form-check-input"
                       id="clover_use_terminal" name="use_terminal"/>
                <label class="form-check-label" for="clover_use_terminal">
                    <i class="fa fa-credit-card-alt me-1"/>
                    Pay on Clover Terminal
                </label>
            </div>

            <!-- Terminal select (hidden by default) -->
            <div class="mb-3" id="clover_terminal_select_wrapper" style="display:none;">
                <label class="form-label" for="clover_terminal_select">Select Terminal</label>
                <select class="form-select" id="clover_terminal_select" name="terminal_id">
                    <option value="">Loading terminals...</option>
                </select>
            </div>

            <!-- Card number input -->
            <div class="mb-3">
                <label class="form-label" for="clover_card_number">Card Number</label>
                <input type="text" class="form-control"
                       id="clover_card_number"
                       name="card_number"
                       placeholder="4111 1111 1111 1111"
                       maxlength="19"
                       autocomplete="cc-number"
                       required="required"/>
            </div>

            <!-- Expiry and CVV row -->
            <div class="row mb-3">
                <div class="col-6">
                    <label class="form-label" for="clover_expiry">Expiry Date</label>
                    <input type="text" class="form-control"
                           id="clover_expiry"
                           name="expiry"
                           placeholder="MM/YY"
                           maxlength="5"
                           autocomplete="cc-exp"
                           required="required"/>
                </div>
                <div class="col-6">
                    <label class="form-label" for="clover_cvv">CVV</label>
                    <input type="password" class="form-control"
                           id="clover_cvv"
                           name="cvv"
                           placeholder="123"
                           maxlength="4"
                           autocomplete="cc-csc"
                           required="required"/>
                </div>
            </div>

            <!-- Cardholder name -->
            <div class="mb-3">
                <label class="form-label" for="clover_cardholder">Cardholder Name</label>
                <input type="text" class="form-control"
                       id="clover_cardholder"
                       name="cardholder_name"
                       placeholder="John Doe"
                       autocomplete="cc-name"/>
            </div>

            <!-- Card type selector -->
            <div class="mb-3 o_clover_card_type_section" style="display:none;">
                <label class="form-label">Card Type</label>
                <div class="d-flex gap-2 flex-wrap">
                    <div class="form-check">
                        <input type="radio" class="form-check-input" name="clover_card_type"
                               id="clover_ct_visa" value="visa"/>
                        <label class="form-check-label" for="clover_ct_visa">Visa</label>
                    </div>
                    <div class="form-check">
                        <input type="radio" class="form-check-input" name="clover_card_type"
                               id="clover_ct_mc" value="mastercard"/>
                        <label class="form-check-label" for="clover_ct_mc">Mastercard</label>
                    </div>
                    <div class="form-check">
                        <input type="radio" class="form-check-input" name="clover_card_type"
                               id="clover_ct_amex" value="amex"/>
                        <label class="form-check-label" for="clover_ct_amex">Amex</label>
                    </div>
                    <div class="form-check">
                        <input type="radio" class="form-check-input" name="clover_card_type"
                               id="clover_ct_other" value="other" checked="checked"/>
                        <label class="form-check-label" for="clover_ct_other">Other</label>
                    </div>
                </div>
            </div>

            <!-- Surcharge notice -->
            <div class="mb-3 o_clover_surcharge_notice" style="display:none;">
                <div class="alert alert-info py-2 mb-0">
                    <small>
                        <i class="fa fa-info-circle me-1"/>
                        <span>A credit card processing fee of </span>
                        <strong id="clover_surcharge_rate">0.00</strong>
                        <span>% (<strong id="clover_surcharge_amount">$0.00</strong>) will be added to your total.</span>
                    </small>
                </div>
            </div>
        </div>
    </template>

</odoo>
