<div class="popover-mini-basket {{mod}}">
    <div class="popover-mini-basket__added popover-mini-basket__alert">
        <i class="fas fa-check-circle basket-icon"></i>
        <div class="popover-mini-basket__alert-text-wrapper">
            <p class="popover-mini-basket__alert-message">
                Added to your basket
            </p>
        </div>
        <span class="icon notification__close">
            <span class="fas fa-times"></span>
        </span>
    </div>
    <div class="popover-mini-basket__not-added popover-mini-basket__alert">
        <i class="fas fa-times-circle basket-icon"></i>
        <div class="popover-mini-basket__alert-text-wrapper">
            <p class="popover-mini-basket__alert-message">
                Not added to basket due to insufficient stock
            </p>
            <span class="popover-mini-basket__alert-desc">An error occurred when adding to the basket</span>
        </div>
        <span class="icon notification__close">
            <span class="fas fa-times"></span>
        </span>
    </div>
    <div class="popover-mini-basket__lower-quantity popover-mini-basket__alert">
        <i class="fas fa-exclamation-circle basket-icon"></i>
        <div class="popover-mini-basket__alert-text-wrapper">
            <p class="popover-mini-basket__alert-message">
                A lower quantity of product(s) was  added to the basket
            </p>
            <span class="popover-mini-basket__alert-desc">We are only able to fulfil a maximum of 30 Weed Control Landscape Fabric - 25m X 2m Roll per order.</span>
        </div>
        <span class="icon notification__close">
            <span class="fas fa-times"></span>
        </span>
    </div>
    <div class="popover-mini-basket__calculating popover-mini-basket__alert">
        <i class="fas fa-calculator basket-icon"></i>
        <div class="popover-mini-basket__alert-text-wrapper">
            <p class="popover-mini-basket__alert-message">
                Calculating your basket...
            </p>
        </div>
        <span class="icon notification__close">
            <span class="fas fa-times"></span>
        </span>
    </div>
    {{#if just-added}}
        {{> notifications classModifier="notification_success" text="Added to your basket" success=true withCloseBtn="true"}}
    {{/if}}
    <div class="popover-mini-basket__content">
        <div class="popover-mini-basket__cards-holder">
            {{#if products.length}}
                {{#each products}} {{>card_product_preview switch-vat=../switch-vat modifier="product-card-preview_horizontal"}} {{/each}}
            {{else}}
                <div class="popover-mini-basket__empty">
                    <p>Your Basket is currently empty.</p>
                </div>
            {{/if}}
        </div>
        <form action="#" id="form-mini-basket">
            <div class="popover-mini-basket__actions">
                <div class="popover-mini-basket__actions-btn">
                    <a id="cartPopupViewBasketButton" class="btn btn-secondary btn_full" href="./page_shopping-cart.html" role="button">View basket</a>
                </div>
                <div class="popover-mini-basket__actions-btn">
                    <a id="cartPopupCheckoutButton" class="btn btn-action btn_full" href="./page_checkout_sign-in.html" role="button">
                        <span class="btn__text">Checkout</span>
                        <span class="icon">
                            <i class="fas fa-arrow-right"></i>
                        </span>
                    </a>
                </div>
            </div>
        </form>
    </div>
</div>