{% 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/common.css') }}" rel="stylesheet" type="text/css"/>
    {% if channel is defined and channel.ecomTemplate is not empty %}
        <link href="{{ asset('webshop/css/' ~ channel.ecomTemplate ~ '.css') }}" rel="stylesheet" type="text/css"/>
    {% else %}
        <link href="{{ asset('webshop/css/standard.css') }}" rel="stylesheet" type="text/css"/>
    {% endif %}
    {#    <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 and channel.ecomColorForText is not empty %}
        <style>
            .scroll-down-button {
                background-color: {{ channel.ecomColorForText }};
                color: {{ channel.contrastColor(channel.ecomColorForText) }};
            }
        </style>
    {% endif %}
    {% if channel is defined and channel.ecomTemplate == 'standard' %}
        {% 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>
                .back-button {
                    border: 1px solid #000;
                    border-radius: 4px;
                    padding: 5px 10px;
                    display: inline-flex;
                    justify-content: center;
                    align-items: center;
                    background: #fff;
                }

                .footer,
                .ecom .category-page__products-item .thumbnail .sale-tag,
                .ecom .category-page__products-item .when-hover a,
                .filter-block .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,
                .back-button,
                .filter-block .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;
                }

                .ecom_checkout .ecom-modal-cart .table > :not(caption) > * > * {
                    background: transparent;
                }
            </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 %}
    {% if channel is defined and channel.ecomTemplate == 'niclas' %}
        <style>
            {% if channel.ecomFontFamily is not empty %}
            body,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                font-family: {{ channel.ecomFontFamily }};
            }

            {% endif %}
            {% if channel.ecomColorBackground is not empty %}
            body {
                background-color: {{ channel.ecomColorBackground }};
            }

            {% endif %}
            {% if channel.ecomColorForText is not empty %}
            .header, .footer {
                background-color: {{ channel.ecomColorForText }};
            }

            {% endif %}
            {% if channel.ecomColorBoxes is not empty %}
            .filter-block,
            .category-page__products-item,
            .niclas.ecom_index .latest-products .category-page__products-item {
                background-color: {{ channel.ecomColorBoxes }};
            }

            .ecom .btn-more-menu .dropdown-menu {
                background-color: {{ channel.ecomColorBoxes }};
                border-color: {{ channel.ecomColorBoxes }};
            }

            .footer,
            .niclas .ecom__homepage-top-text {
                border-color: {{ channel.ecomColorBoxes }};
            }

            {% endif %}
        </style>
    {% endif %}

{% endblock %}

{% macro recursiveCategory(category) %}
    {% if category.type == 'link' %}
        {% set url = category.url %}
    {% else %}
        {% set url = path('ecom_category', {'channelEcomId': app.request.get('channelEcomId'), 'categorySlug': category.categorySlug}) %}
    {% endif %}
    <li>
        <a data-type="{{ category.type }}" href="{{ url }}">
            {{ category.textToShow }}
        </a>
        {% set children = category.children %}
        {% if children is not empty %}
            <ul>
                {% for child in children %}
                    {{ _self.recursiveCategory(child) }}
                {% endfor %}
            </ul>
        {% endif %}
    </li>
{% endmacro %}

{% block body %}
    {% set mainMenuHtml = '' %}
    {% if mainMenu is defined and mainMenu is not empty %}
        {% for item in mainMenu %}
            {% set mainMenuHtml = mainMenuHtml ~ _self.recursiveCategory(item) %}
        {% endfor %}
    {% endif %}

    {% set mobileLeftMenuHtml = '' %}
    {% if mobileLeftMenu is defined and mobileLeftMenu is not empty %}
        {% for item in mobileLeftMenu %}
            {% set mobileLeftMenuHtml = mobileLeftMenuHtml ~ _self.recursiveCategory(item) %}
        {% endfor %}
    {% endif %}

    {% set rightMenuHtml = '' %}
    {% if rightMenu is defined and rightMenu is not empty %}
        {% for item in rightMenu %}
            {% set rightMenuHtml = rightMenuHtml ~ _self.recursiveCategory(item) %}
        {% endfor %}
    {% endif %}
    <div class="scroll-down">
        <div class="scroll-down-button">
            <i class="fa fa-angle-down"></i>&nbsp;
            {{ 'Läs mer' | trans }}
        </div>
    </div>
    {% set template = constant('App\\Entity\\Channel::ECOM_TEMPLATE_STANDARD') %}
    {% if channel is defined and channel is not empty %}
        {% set template = channel.ecomTemplate %}
    {% endif %}

    {{ include('webshop/template/' ~ template ~'/header.html.twig', {'rightMenuHtml': rightMenuHtml}) }}
    {% block banner %}{% endblock %}
    <div class="main main--min-height page-custom-wrap ecom my-content-wrap">
        <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 %}
            {% if app.request.attributes.get('_route') != 'ecom_index' %}
                <div class="mb-5">
                    <a href="{{ app.request.headers.get('referer') }}" class="back-button">
                        &larr;
                        {{ 'Tillbaka' | trans }}
                    </a>
                </div>
            {% endif %}
            {% block content %}{% endblock %}
        </div>
    </div>
    {{ include('webshop/template/' ~ template ~'/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/jquery.scrollTo.min.js') }}"></script>
    <script src="{{ asset('webshop/js/ecom.js') }}"></script>
{% endblock %}