{{-- Cart drawer: opened by the header cart button (resources/js/basket.js). It lists the items picked
     on one campaign page (kept in this browser only) and links back to that campaign's checkout. --}}
<div class="cartd" id="cart-drawer" data-donate-url="{{ route('donate') }}" hidden>
    <div class="cartd__backdrop" data-cart-close></div>
    <div class="cartd__panel" role="dialog" aria-modal="true" aria-labelledby="cartd-title">
        <div class="cartd__head">
            <h2 id="cartd-title"><svg class="i" aria-hidden="true"><use href="#i-cart"/></svg>Your cart</h2>
            <button class="cartd__close" type="button" data-cart-close aria-label="Close cart"><svg class="i" aria-hidden="true"><use href="#i-close"/></svg></button>
        </div>

        <div class="cartd__body">
            <div class="cartd__empty" data-cart-empty>
                <span class="cartd__empty-ico" aria-hidden="true"><svg class="i i--xl"><use href="#i-cart"/></svg></span>
                <h3>Your cart is empty</h3>
                <p>Open any campaign and pick the items you would like to give. They will wait for you here.</p>
                <a class="btn btn--blue" href="{{ route('causes') }}">Explore campaigns <svg class="i" aria-hidden="true"><use href="#i-arrow"/></svg></a>
            </div>

            <div data-cart-filled hidden>
                <p class="cartd__label">Campaign</p>
                <a class="cartd__camp" href="#" data-cart-camp></a>
                <ul class="cartd__lines" data-cart-lines></ul>
                <p class="cartd__note"><svg class="i" aria-hidden="true"><use href="#i-info"/></svg>Your cart holds items from one campaign at a time. Prices are checked again at checkout.</p>
            </div>
        </div>

        <div class="cartd__foot" data-cart-foot hidden>
            <p class="cartd__total">Total <strong data-cart-total>₹0</strong></p>
            <a class="btn btn--green btn--lg btn--block" href="#" data-cart-checkout><svg class="i" aria-hidden="true"><use href="#i-heart"/></svg>Continue to donate</a>
            <div class="cartd__links">
                <a href="#" data-cart-edit>Edit items</a>
                <button type="button" data-cart-clear>Clear cart</button>
            </div>
        </div>
    </div>
</div>