{% extends 'base.html.twig' %}

{% block title %}{{ product.title }}{% endblock %}
{% block body %}
    <section>
        <div class="container">
            <div class="row p-lg-relative">
                {{ render(path('shop_menu')) }}
                {% block content %}
                {% endblock %}
            </div>
        </div>
    </section>

    <div class="modal-box modal-box--wide" id="cartModal">
        <button class="modal-box__close modal-close">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.19239 7.77817L15.5563 1.41421L14.1421 0L7.77818 6.36396L1.41421 0L0 1.41421L6.36396 7.77817L0 14.1421L1.41421 15.5564L7.77818 9.19239L14.1421 15.5563L15.5564 14.1421L9.19239 7.77817Z" fill="black"/>
            </svg>
        </button>
        <h3 class="modal-box__heading">{% trans %}zbozi.pridano{% endtrans %}</h3>
        <ul class="cart-products">
            <li class="cart-products__item">
                <img src="{{ asset('build/img/hp-book2.jpg') }}" alt="Book" class="cart-products__image">
                <div class="cart-products__info">
                    <div class="cart-products__title">{% trans %}statni.moc{% endtrans %}</div>
                    <div class="cart-products__author">Jan Vondráček</div>
                    <div class="product-info__availability-status product-info__availability-status--available">{% trans %}skladem{% endtrans %}</div>
                </div>
                <div class="cart-products__count">
                    <div class="count-input">
                        <button type="button" class="count-input__btn count-input__minus">
                            <svg width="6" height="2" viewBox="0 0 6 2" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect width="6" height="2" fill="#636363"/>
                            </svg>
                        </button>
                        <input class="count-input__input" value="1" min="0" type="number" name="productsCount" id="">
                        <button type="button" class="count-input__btn count-input__plus">
                            <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect y="3" width="8" height="2" fill="#636363"/>
                                <rect x="3" y="8" width="8" height="2" transform="rotate(-90 3 8)" fill="#636363"/>
                            </svg>
                        </button>
                    </div>
                </div>
                <div class="cart-products__price-per-item">
                    262,50 {% trans %}mena.kusy{% endtrans %}
                    <div class="cart-products__sale">
                        <span class="cart-products__old-price">280,50 {% trans %}mena{% endtrans %}</span> <span class="cart-products__sale-percents">-15 %</span>
                    </div>
                </div>
                <div class="cart-products__total-price">
                    262,50 {% trans %}mena{% endtrans %}
                </div>
            </li>
        </ul>
        <div class="modal-box__cart-buttons">
            <a href="javascript:void(0)" class="product-info__button product-info__button--no-border modal-close">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9 5L10.41 6.41L5.83 11H22V13H5.83L10.42 17.59L9 19L2 12L9 5Z" fill="black"/>
                </svg>
                {% trans %}zpetk.makupu{% endtrans %}

            </a>
            <a href="_kosik1.html" class="product-info__to-cart">
                {% trans %}prejit.kosiku{% endtrans %}
                <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M16.2503 5.41602L14.7228 6.94352L19.6845 11.916H2.16699V14.0827H19.6845L14.712 19.0552L16.2503 20.5827L23.8337 12.9993L16.2503 5.41602Z" fill="black"/>
                </svg>
            </a>
            <div class="product-info"></div>
        </div>
    </div>

    {% set loginError = app.flashes('loginError') %}
    <dialog class="modal modal--sm" id="login">
        <button type="button" class="modal__close js-modal-close">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.36396 7.77818L0 14.1421L1.41421 15.5564L7.77817 9.19239L14.1421 15.5564L15.5564 14.1421L9.19239 7.77818L15.5563 1.41421L14.1421 0L7.77817 6.36396L1.41421 4.63293e-06L0 1.41422L6.36396 7.77818Z" fill="black"/>
            </svg>
        </button>
        <h3 class="text-center mb-3">{% trans %}prihlasit.se{% endtrans %}</h3>
        {% if loginError is not empty %}
            <p class="mb-5" style="color: red; text-align: center">
                {{ loginError[0] }}
            </p>
        {% endif %}
        <form method="POST" action="{{ path('shop_custom_login') }}">
            <label class="d-block mb-3" for="LoginMail">{% trans %}email{% endtrans %}</label>
            <input type="email" inputmode="email" class="input mb-3" id="LoginMail" name="_username" required autofocus>
            <label class="d-block mb-3" for="LoginPassword">{% trans %}heslo{% endtrans %}</label>
            <input type="password" inputmode="password" class="input mb-3" id="LoginPassword" name="_password" required>

            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
            <input type="hidden" name="_target_path" value="{{ path(app.request.attributes.get('_route'),
                app.request.attributes.get('_route_params')) }}"/>

            <div class="row mt-6">
                <div class="col-12 d-flex justify-content-center">
                    <button type="submit" class="product-info__to-cart">
                        {% trans %}prihlasit.se{% endtrans %}
                    </button>
                </div>
                <div class="col-12 d-flex justify-content-center mt-3">
                    <a href="{{ path('app_forgot_password_request') }}">{% trans %}zapomenute.heslo{% endtrans %}</a>
                </div>
            </div>
        </form>

    </dialog>
    {% if loginError is not empty %}
        <script>
            document.getElementById('login').showModal();
        </script>
    {% endif %}
{% endblock %}