Basket Page

<h1 class="h3 text-uppercase fw-bolder">Basket</h1>

<h2 class="h4 mt-3 text-uppercase fw-bolder">Tickets</h2>

<div class="p-3 my-3 border border-2 border-secondary rounded d-flex">

    <div class="col-md-3 d-none d-md-block pe-3">
        <img src="/images/samples/show-image/macintyre-large-square.png" alt="Sample image" class="img-fluid">
    </div>

    <div class="col">
        <h3 class="h5 text-uppercase fw-bolder"><a href="#">Adam Kay: Undoctored - This is Going to Hurt...More</a></h3>

        <p>
            Pleasance Courtyard<br>
            The Grand
        </p>

        <h3 class="h6 fw-bolder mt-3">Wed, 08/16/2023 - 19:30</h3>

        <form class="d-flex gap-2 align-items-center flex-wrap my-2">
            <div class="d-flex align-items-center">
                <label for="qty" class="form-label flex-shrink-0 pe-2 m-0">£15.50 x</label>
                <input type="number" id="qty" value="1" step="1" min="0" class="form-control form-control__small">
            </div>

            <div class="d-flex gap-2 flex-nowrap">
                <input type="submit" value="Update" class="btn btn-primary">
                <input type="submit" value="Remove" class="btn btn-primary">
            </div>

        </form>
        <h3 class="h6 fw-bolder mt-3">Wed, 08/16/2023 - 19:30</h3>

        <form class="d-flex gap-2 align-items-center flex-wrap my-2">
            <div class="d-flex align-items-center">
                <label for="qty" class="form-label flex-shrink-0 pe-2 m-0">£15.50 x</label>
                <input type="number" id="qty" value="1" step="1" min="0" class="form-control form-control__small">
            </div>

            <div class="d-flex gap-2 flex-nowrap">
                <input type="submit" value="Update" class="btn btn-primary">
                <input type="submit" value="Remove" class="btn btn-primary">
            </div>

        </form>
    </div>
</div>
<div class="p-3 my-3 border border-2 border-secondary rounded d-flex">

    <div class="col-md-3 d-none d-md-block pe-3">
        <img src="/images/samples/show-image/macintyre-large-square.png" alt="Sample image" class="img-fluid">
    </div>

    <div class="col">
        <h3 class="h5 text-uppercase fw-bolder"><a href="#">Adam Kay: Undoctored - This is Going to Hurt...More</a></h3>

        <p>
            Pleasance Courtyard<br>
            The Grand
        </p>

        <h3 class="h6 fw-bolder mt-3">Wed, 08/16/2023 - 19:30</h3>

        <form class="d-flex gap-2 align-items-center flex-wrap my-2">
            <div class="d-flex align-items-center">
                <label for="qty" class="form-label flex-shrink-0 pe-2 m-0">£15.50 x</label>
                <input type="number" id="qty" value="1" step="1" min="0" class="form-control form-control__small">
            </div>

            <div class="d-flex gap-2 flex-nowrap">
                <input type="submit" value="Update" class="btn btn-primary">
                <input type="submit" value="Remove" class="btn btn-primary">
            </div>

        </form>
        <h3 class="h6 fw-bolder mt-3">Wed, 08/16/2023 - 19:30</h3>

        <form class="d-flex gap-2 align-items-center flex-wrap my-2">
            <div class="d-flex align-items-center">
                <label for="qty" class="form-label flex-shrink-0 pe-2 m-0">£15.50 x</label>
                <input type="number" id="qty" value="1" step="1" min="0" class="form-control form-control__small">
            </div>

            <div class="d-flex gap-2 flex-nowrap">
                <input type="submit" value="Update" class="btn btn-primary">
                <input type="submit" value="Remove" class="btn btn-primary">
            </div>

        </form>
    </div>
</div>
<div class="p-3 my-3 border border-2 border-secondary rounded d-flex">

    <div class="col-md-3 d-none d-md-block pe-3">
        <img src="/images/samples/show-image/macintyre-large-square.png" alt="Sample image" class="img-fluid">
    </div>

    <div class="col">
        <h3 class="h5 text-uppercase fw-bolder"><a href="#">Adam Kay: Undoctored - This is Going to Hurt...More</a></h3>

        <p>
            Pleasance Courtyard<br>
            The Grand
        </p>

        <h3 class="h6 fw-bolder mt-3">Wed, 08/16/2023 - 19:30</h3>

        <form class="d-flex gap-2 align-items-center flex-wrap my-2">
            <div class="d-flex align-items-center">
                <label for="qty" class="form-label flex-shrink-0 pe-2 m-0">£15.50 x</label>
                <input type="number" id="qty" value="1" step="1" min="0" class="form-control form-control__small">
            </div>

            <div class="d-flex gap-2 flex-nowrap">
                <input type="submit" value="Update" class="btn btn-primary">
                <input type="submit" value="Remove" class="btn btn-primary">
            </div>

        </form>
        <h3 class="h6 fw-bolder mt-3">Wed, 08/16/2023 - 19:30</h3>

        <form class="d-flex gap-2 align-items-center flex-wrap my-2">
            <div class="d-flex align-items-center">
                <label for="qty" class="form-label flex-shrink-0 pe-2 m-0">£15.50 x</label>
                <input type="number" id="qty" value="1" step="1" min="0" class="form-control form-control__small">
            </div>

            <div class="d-flex gap-2 flex-nowrap">
                <input type="submit" value="Update" class="btn btn-primary">
                <input type="submit" value="Remove" class="btn btn-primary">
            </div>

        </form>
    </div>
</div>
<div class="p-4 rounded border border-2 border-secondary mt-3">

    <h2 class="h4 text-uppercase fw-bolder">Donate</h2>

    <div class="d-md-flex gap-4">
        <form class="via-basket-donation col-md-3">
            <div id="via_cart_donation_amount_wrapper">
                <div class="mt-2">
                    <label for="edit-amount" class="form-label">Amount</label>
                    <input aria-describedby="edit-amount--description" type="text" id="edit-amount" name="amount" value="5.00" size="60" maxlength="128" class="form-control form-control__small mb-2">
                    <div id="edit-amount--description" class="mt-2 description">
                        Please enter an amount in pounds.
                    </div>
                </div>
            </div>
            <input type="submit" id="edit-submit" value="Update" class="btn my-2 btn-primary">
        </form>

        <div class="p-3 pb-0 mt-2 mb-4 border border-2 border-secondary rounded col-md">

            <h3 class="h5 text-uppercase fw-bolder">Currently selected donations</h3>

            <table class="table align-middle">
                <thead>
                    <tr>
                        <th>Fund</th>
                        <th>Amount</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody class="table-group-divider">
                    <tr>
                        <td>Pleasance Theatre</td>
                        <td>£5.00</td>
                        <td>
                            <form class="via-basket-donation-removal__1" data-drupal-selector="via-basket-donation-removal-1" action="/via/basket" method="post" id="via-basket-donation-removal-1" accept-charset="UTF-8">
                                <input data-drupal-selector="edit-submit" type="submit" id="edit-submit--9" name="op" value="Remove" class="button js-form-submit form-submit btn my-2 btn-primary">
                                <input autocomplete="off" data-drupal-selector="form-so8-zza8he4qm8ad2dvtgzkffbzvurh-dzhavidnb4k" type="hidden" name="form_build_id" value="form-sO8-zza8He4Qm8AD2DVTGzKFFBZVURH_DZHAvIDnB4k" class="form-control mb-2">
                                <input data-drupal-selector="edit-via-basket-donation-removal-1" type="hidden" name="form_id" value="via_basket_donation_removal__1" class="form-control mb-2">

                            </form>
                        </td>
                    </tr>
                </tbody>
            </table>

        </div>
    </div>

</div>
<div class="row">

    <div class="col-md-6 mt-3">
        <div class="rounded p-3 bg-secondary text-white">
            <h2 class="h4 text-uppercase fw-bolder">Apply promo code</h2>

            <form>
                <label for="code" class="form-label">Promo code</label>
                <input type="text" class="mb-2 form-control" id="code" name="code" value="" size="60" maxlength="128" placeholder="__">

                <div class="text-end">
                    <input type="submit" class="my-2 btn btn-primary" id="button" name="button" value="Apply">
                </div>
            </form>
        </div>
    </div>

    <div class="col-md-6 mt-3">
        <div class="rounded p-3 bg-secondary text-white">
            <h2 class="h4 text-uppercase fw-bolder">Redeem voucher</h2>

            <form>
                <label for="code" class="form-label">Voucher code</label>
                <input type="text" class="mb-2 form-control" id="code" name="code" value="" size="60" maxlength="128" placeholder="__">

                <div class="text-end">
                    <input type="submit" class="my-2 btn btn-primary" id="button" name="button" value="Redeem">
                </div>
            </form>
        </div>
    </div>

</div>

<h2 class="h4 mt-3 text-uppercase fw-bolder">Summary</h2>

<table class="table">
    <tbody>
        <tr>
            <th>Number of tickets</th>
            <td>6</td>
        </tr>
        <tr>
            <th>Number of non-ticket items</th>
            <td>1</td>
        </tr>
        <tr>
            <th>Donation</th>
            <td>£5.00</td>
        </tr>
        <tr>
            <th>Order fee</th>
            <td>£5.00</td>
        </tr>
        <tr>
            <th>Postage fee</th>
            <td>£0.00</td>
        </tr>
        <tr>
            <th>Total fee</th>
            <td>£5.00</td>
        </tr>
        <tr>
            <th>Subtotal</th>
            <td>£72.00</td>
        </tr>
        <tr>
            <th>Voucher discount</th>
            <td>£0.00</td>
        </tr>
        <tr>
            <th>Total gift-aidable value</th>
            <td>£5.00</td>
        </tr>
    </tbody>
    <tfoot class="table-group-divider">
        </tbody>
        <tr>
            <th>Grand total</th>
            <td>£77.00</td>
        </tr>
    </tfoot>
</table>
<form class="mt-4 py-4 border-top border-2 border-primary">

    <h3 class="h5 text-uppercase">Gift Aid</h3>

    <p class="me-2">Thank you for your donation! The Pleasance Theatre Trust is a registered charity; if you are a UK Taxpayer and
        pay income tax, you can sign up to Gift Aid and we can claim 25p on every £1 you donate. Can we treat this and any
        future donations as Gift Aid?</p>

    <div class="d-md-flex justify-content-between mt-4">
        <img src="/images/logos/gift-aid.svg" class="gift-aid--logo mb-3 mb-md-0" alt="Gift Aid logo">

        <div class="form-check form-check__large">
            <input aria-describedby="edit-gift-aid--2--description" type="checkbox" id="edit-gift-aid--2" name="gift_aid" value="1" class="form-check-input">
            <label class="form-check-label" for="edit-gift-aid--2">Gift Aid</label>
            <div id="edit-gift-aid--2--description" class="description">
                Allow Gift Aid to be claimed on this order
            </div>
        </div>
    </div>

    <div class="text-end mt-4 py-2 border-top border-2 border-primary">
        <input type="submit" id="edit-clear--2" value="Clear basket" class="btn my-2 btn-secondary">
        <input type="submit" id="edit-submit--5" value="Go to checkout" class="btn my-2 btn-primary">
    </div>

</form>