{% extends 'layouts/main.twig' %}

{% block main %}
    {% include "components/bread-crumbs.twig" %}

    <section class="cart-head-section">
        <h1 class="cart-head-section__title">Корзина</h1>
    </section>

    <section class="cart-grid-section">
        <div class="cart-grid-section__list-empty">
            <svg class="cart-grid-section__list-empty__icon"><use xlink:href="/sprite.svg#cart-remove"></use></svg>
            <div class="cart-grid-section__list-empty__main">
                <span class="cart-grid-section__list-empty__title">В корзине ничего нет</span>
                <p class="cart-grid-section__list-empty__desc">Перейдите в каталог, чтобы найти подходящий аккумулятор</p>
            </div>
            <a href="" class="cart-grid-section__list-empty__link-btn">В каталог</a>
        </div>
        
        <div class="cart-grid-section__block" x-data="{ isApplied: false, value: '' }">
            <div class="cart-grid-section__block__sum">
                <span>0 товара в корзине</span>
                <b>0 ₽</b>
            </div>

            <ul class="cart-grid-section__block__total">
                <li><span>Стоимость товаров</span><span>0 ₽</span></li>
                <li><span>Скидка</span><span>0 ₽</span></li>
                <li x-show="isApplied"><span>Промокод</span><span>500 ₽</span></li>
            </ul>

            <div class="cart-grid-section__block__input" :class="{ applied: isApplied }">
                <input type="text" placeholder="Промокод" :disabled="isApplied" x-model="value">
                <button class="cart-grid-section__block__input-apply-btn" @click.prevent="isApplied = true" x-show="!!value.length && !isApplied">Применить</button>
                <button class="cart-grid-section__block__input-clear-btn" x-show="isApplied" @click="value = ''; isApplied = false;">
                    <svg><use xlink:href="/sprite.svg#close"></use></svg>
                </button>
                <div class="cart-grid-section__block__input-error">Промокод недействителен</div>
            </div>

            <button class="cart-grid-section__block__submit-btn" disabled>К оформлению</button>
        </div>
    </section>

    {% include "components/products-slider-section.twig" with { 
        productsSliderTitle: "Популярные товары",
        productsSliderMoreHide: true
    } %}
{% endblock %}