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

{% block title %}
    {% if channel is defined %}
        {{ channel.channelName }}
    {% endif %}
{% endblock %}

{% block meta %}
    {% if channel is defined %}
        <meta property="og:locale" content="sv_SE">
        <meta property="og:type" content="website">
        <meta property="og:title" content="{{ channel.channelName }}">
        <meta property="og:description" content="">
        <meta property="og:url" content="{{ url('ecom_index', {'channelEcomId': app.request.get('channelEcomId')}) }}">
        <meta property="og:site_name" content="Ecom - {{ channel.channelName }}">
        {% if channel.banner is not empty %}
            <meta property="og:image" content="{{ absolute_url(asset(channel.banner)) }}">
            <meta property="og:image:secure_url" content="{{ absolute_url(asset(channel.banner)) }}">
        {% endif %}
        {% if channel.ecomFavicon is not empty %}
            <link rel="icon" href="{{ absolute_url(asset(channel.ecomFavicon)) }}" type="image/x-icon">
        {% endif %}
    {% endif %}
{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('webshop/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css"/>
    <link href="{{ asset('webshop/css/style.css') }}" rel="stylesheet" type="text/css"/>
    <link href="{{ asset('webshop/css/ecom.css') }}?v=1.01" rel="stylesheet" type="text/css"/>
    <link href="{{ asset('webshop/css/font-awesome.css') }}" rel="stylesheet" type="text/css"/>
    {% if channel is defined %}
        {% if channel.ecomColorBackground is not empty %}
            <style>
                body,
                .ecom .category-page .page__title span {
                    background: {{ channel.ecomColorBackground }};
                }
            </style>
        {% endif %}
        {% if channel.ecomColor is not empty %}
            {% set color = channel.ecomColor %}
            {% set colorText = channel.ecomColorForText %}
            <style>
                .footer,
                .ecom .category-page__products-item .thumbnail .sale-tag,
                .ecom .category-page__products-item .when-hover a,
                .ecom__categories-link.active,
                .ecom .btn-cart .ecom-quantity-header {
                    background: {{ color }};
                    color: {{ colorText ? colorText : '#000' }};
                }
                .ecom .product-page .info--price .price-text--discount {
                    color: {{ color }};
                }

                .card,
                .ecom__categories-link {
                    border-color: {{ color }};
                }

                .ecom .btn-more-menu .dropdown-menu {
                    background: {{ color }};
                    color: {{ colorText ? colorText : '#000' }};
                    border-color: {{ color }};
                }

                .header-category-menu ul ul {
                    background: {{ color }};
                    border-color: {{ color }};
                }

                .btn-warning {
                    background: {{ color }};
                    color: {{ colorText ? colorText : '#000' }};
                    border-color: {{ color }};
                    box-shadow: none;
                }

                .btn-warning:focus,
                .btn-warning:active,
                .btn-warning:visited,
                .btn-warning:hover {
                    background: {{ color }} !important;
                    color: {{ colorText ? colorText : '#000' }} !important;
                    border-color: {{ color }} !important;;
                }
            </style>
        {% endif %}
        {% if channel.ecomColorBoxes is not empty %}
            <style>
                .ecom_checkout .card,
                .ecom_checkout .card,
                .ecom_checkout .table>:not(caption)>*>*,
                .ecom__categories,
                .ecom .category-page__products-item {
                    background: {{ channel.ecomColorBoxes }};
                }
                .checkout-page-done {
                    background: {{ channel.ecomColorBoxes }};
                    padding: 30px;
                }
            </style>
        {% endif %}
        {% if channel.ecomColorBackgroundText is not empty %}
            <style>
                .ecom .category-page .page__title span,
                .ecom .ecom_checkout .page__title--h1,
                .ecom .ecom_checkout .form-check-text,
                .header-category-menu ul.menu-top > li > a,
                .header-category-menu ul.menu-top > li > a,
                .ecom .pagination-wrapper {
                    color: {{ channel.ecomColorBackgroundText }} !important;
                }
                .ecom .btn-more-menu .btn span {
                    background: {{ channel.ecomColorBackgroundText }} !important;
                }
            </style>
        {% endif %}
    {% endif %}
{% endblock %}

{% block body %}
    {{ include('webshop/__header.html.twig') }}
    {% block banner %}{% endblock %}
    <div class="main main--min-height page-custom-wrap ecom">
        <div class="{{ app.request.get('_route') }}">
            {% for message in app.flashes('success') %}
                <div class="alert alert-success" role="alert">
                    {{ message | raw }}
                </div>
            {% endfor %}
            {% for message in app.flashes('error') %}
                <div class="alert alert-danger" role="alert">
                    {{ message | raw }}
                </div>
            {% endfor %}
            {% block content %}{% endblock %}
        </div>
    </div>
    {{ include('webshop/__footer.html.twig') }}
    {{ include('webshop/__cart_modal.html.twig') }}
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('webshop/js/jquery-3.5.1.min.js') }}"></script>
    <script src="{{ asset('webshop/js/popper.js') }}"></script>
    <script src="{{ asset('webshop/js/bootstrap.min.js') }}"></script>
    <script src="{{ asset('webshop/js/ecom.js') }}"></script>
{% endblock %}