{# @var product \App\Model\Product\Car #}

{% import 'product/macros.html.twig' as macros %}

{% extends 'layouts/layout.html.twig' %}

{% block content %}

    <div id="main-content" class="main-content">

        <div class="d-md-none mt-3">
            {% if(product.manufacturer and product.manufacturer.logo)  %}
                {{ product.manufacturer.logo.thumbnail('product_detail_manufacturer').getHTML({imgAttributes: {class: 'img-fluid float-right'}})|raw }}
            {%  endif  %}
            <div class="page-header">
                <h1>{{ product.oSName }}</h1>
            </div>
        </div>

        <div class="bg-white my-3">
            <div class="row">

                <div class="col-md-6 mb-4">
                    {% if(product.mainImage) %}

                        <div class="p-3">
                            <a href="{{ product.mainImage.getThumbnail('galleryLightbox')|raw }}" class="thumbnail">
                                {{ product.mainImage.thumbnail('product_detail').getHTML({imgAttributes: {class: 'img-thumbnail1 img-fluid'}})|raw }}
                            </a>

                            {% block additionalimages %}
                                {% set additionalImages = product.additionalImages %}
                                {%  if(additionalImages) %}

                                    <div class="row">

                                        {% for image in additionalImages %}

                                            <div class="col-4 mt-3">

                                                <a href="{{ image.getThumbnail('galleryLightbox')|raw }}" class="thumbnail">
                                                    {{ image.thumbnail('product_detail_small').getHTML({imgAttributes: {class: 'img-thumbnail1 img-fluid'}})|raw }}
                                                </a>

                                            </div>

                                        {% endfor %}

                                    </div>

                                {%  endif %}
                            {% endblock %}
                        </div>
                    {% endif %}
                </div>

                <div class="col-md-6 mb-4">

                    <div class="p-3 pt-4">

                        <div class="row d-none d-md-block mb-3">
                            <div class="col-12">
                                {% if(product.manufacturer and product.manufacturer.logo)  %}
                                    {{ product.manufacturer.logo.thumbnail('product_detail_manufacturer').getHTML({imgAttributes: {class: 'img-fluid float-right'}})|raw }}
                                {%  endif  %}

                                <h2 class="">{{ product.oSName }}</h2>
                            </div>
                        </div>
                        <div class="row">

                            {% block colorvariants %}
                                <dl class="item-property col-12">
                                    <dt>{{ 'general.color' | trans }}</dt>
                                    <dd>
                                        {% for colorVariant in product.colorVariants %}
                                            <a href="{{ app_product_detaillink(colorVariant) }}"
                                               class="btn {{ product.id == colorVariant.id ? 'btn-primary' : 'btn-outline-primary' }}">
                                                {{ colorVariant.color | colorname }}
                                            </a>
                                        {% endfor %}
                                    </dd>

                                </dl>
                            {% endblock %}

                            {% block detailinfos %}
                                {% if(product.bodyStyle) %}
                                    <dl class="item-property col-6">
                                        <dt>{{ 'general.body-style' | trans }}</dt>
                                        <dd>{{ product.bodyStyle.name }}</dd>
                                    </dl>
                                {% endif %}

                                <dl class="item-property col-6">
                                    <dt>{{ 'general.car-class' | trans }}</dt>
                                    <dd>{{ ('attribute.' ~ product.carClass) | lower | trans }}</dd>
                                </dl>
                            {% endblock %}

                            {% block salesinfos %}

                                {% if product.saleInformation.saleInformation %}

                                    <dl class="item-property col-6 mb-0">
                                        <dt>{{ 'general.condition' | trans }}</dt>
                                        <dd>{{ ('attribute.' ~ product.saleInformation.saleInformation.condition) | lower | trans}}</dd>
                                    </dl>

                                    <dl class="item-property col-6 mb-0">
                                        <dt>{{ 'general.milage' | trans }}</dt>
                                        <dd>{{ product.saleInformation.saleInformation.milage}}</dd>
                                    </dl>

                                {% endif %}
                            {% endblock %}

                        </div>

                        <hr/>
                        <div class="mt-4 text-center">
                            {% set priceInfo = product.oSPriceInfo %}
                            {% set price = product.oSPrice %}

                            {% if(priceInfo.rules) %}

                                <div class="alert alert-success mb-4" role="alert">

                                    <p class="small mb-2"><strong>{{ 'general.your-benefits' | trans }}</strong></p>

                                    <ul class="list-unstyled mb-0 small">
                                        {% for rule in priceInfo.rules %}
                                            <li>{{ rule.label }}</li>
                                        {% endfor %}
                                    </ul>

                                </div>

                            {% endif %}

                            {% if(priceInfo.hasDiscount) %}
                                <p class="detail-price original mb-3">{{ priceInfo.originalPrice }}</p>
                            {% endif %}

                            <p class="detail-price mb-2">{{ price }}</p>

                            <div class="detail-tax text-muted">
                                <ul class="list-unstyled">
                                    {% for taxEntry in price.taxEntries %}
                                        <li>{{ taxEntry.entry.name }}: {{ taxEntry.percent }}% ({{ taxEntry.amount.asNumeric | currency(price.currency.shortName) }})</li>
                                    {% endfor %}
                                </ul>
                            </div>

                            {% if product.saleInformation.saleInformation %}
                                <p class="small text-muted mt-1">{{ 'general.available-in' | trans }} {{ ('attribute.' ~ product.saleInformation.saleInformation.availabilityType) | lower | trans }}</p>
                            {% endif %}
                        </div>
                        <form id="shop_add_to_cart_form_{{ product.id }}" method="post" action="{{ path('shop-add-to-cart', { id: product.id }) }}">
                            <input type="hidden" name="_csrf_token" value="{{ csrf_token('addToCart') }}">
                            <a href="#"
                               onclick="document.getElementById('shop_add_to_cart_form_{{ product.id }}').submit();"
                               class="btn btn-success btn-block">{{ 'general.add-to-cart' | trans }}</a>
                        </form>

                    </div>

                </div>

            </div>

            <hr>

            {% block description %}
                <div class="mt-5 col-12 text-center">
                    <h4 class="text-center">{{ 'general.additional-information' | trans }}</h4>

                    {% if(product.description) %}
                        <p>{{ product.description | raw }}</p>
                    {% endif %}

                </div>
            {% endblock %}

            {% block attributes %}
                <div class="col-12">

                <ul class="nav nav-tabs" id="attributes" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">{{ 'general.general' | trans }}</a>
                    </li>
                    {% if(product.attributes.dimensions or product.attributes.bodywork) %}
                        <li class="nav-item">
                            <a class="nav-link" id="dimensions-tab" data-toggle="tab" href="#dimensions" role="tab" aria-controls="dimensions" aria-selected="false">{{ 'general.dimensions' | trans }}</a>
                        </li>
                    {% endif %}
                    {% if(product.attributes.engine or product.attributes.transmission) %}
                        <li class="nav-item">
                            <a class="nav-link" id="engine-tab" data-toggle="tab" href="#engine" role="tab" aria-controls="engine" aria-selected="false">{{ 'general.engine' | trans }}</a>
                        </li>
                    {%  endif %}
                </ul>
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">

                        <div class="m-3">

                            <div class="row">

                                {% if(product.manufacturer) %}
                                    <dl class="item-property col-6 col-md-3">
                                        <dt>{{ 'general.manufacturer' | trans }}</dt>
                                        <dd>{{ product.manufacturer.name }}</dd>
                                    </dl>
                                {% endif %}

                                {{ macros.attribute(product.productionYear, 'general.productionYear') }}

                                {% if(product.country) %}
                                    <dl class="item-property col-6 col-md-3">
                                        <dt>{{ 'general.country' | trans }}</dt>
                                        <dd>{{ product.country | country }}</dd>
                                    </dl>
                                {% endif %}

                            </div>

                        </div>

                    </div>
                    {% if(product.attributes.dimensions or product.attributes.bodywork) %}
                        <div class="tab-pane fade" id="dimensions" role="tabpanel" aria-labelledby="dimensions-tab">

                            <div class="m-3">

                                <div class="row">

                                    {% if(product.attributes.dimensions) %}
                                        {{ macros.attribute(product.attributes.dimensions.length, 'general.length') }}
                                        {{ macros.attribute(product.attributes.dimensions.width, 'general.width') }}
                                        {{ macros.attribute(product.attributes.dimensions.wheelbase, 'general.wheelbase') }}
                                        {{ macros.attribute(product.attributes.dimensions.weight, 'general.weight') }}
                                    {%  endif %}

                                    {% if(product.attributes.bodywork) %}
                                        {{ macros.attribute(product.attributes.bodywork.numberOfDoors, 'general.numberOfDoors') }}
                                        {{ macros.attribute(product.attributes.bodywork.numberOfSeats, 'general.numberOfSeats') }}
                                    {%  endif %}

                                </div>

                            </div>

                        </div>
                    {%  endif %}
                    {% if(product.attributes.engine or product.attributes.transmission) %}
                        <div class="tab-pane fade" id="engine" role="tabpanel" aria-labelledby="engine-tab">

                            <div class="m-3">

                                <div class="row">

                                    {% if(product.attributes.engine) %}
                                        {{ macros.attribute(product.attributes.engine.cylinders, 'general.cylinders') }}
                                        {{ macros.attribute(product.attributes.engine.capacity, 'general.capacity') }}
                                        {{ macros.attribute(product.attributes.engine.power, 'general.power') }}
                                        {{ macros.attribute(product.attributes.engine.engineLocation, 'general.engineLocation') }}
                                    {%  endif %}

                                    {% if(product.attributes.transmission) %}
                                        {{ macros.attribute(product.attributes.transmission.wheelDrive, 'general.wheelDrive', true, 'attribute.') }}
                                    {%  endif %}

                                </div>

                            </div>

                        </div>
                    {%  endif %}
                </div>

            </div>
            {% endblock %}

            {% block productrelations %}
                {% set accessories = product.accessories %}

                {%  if(accessories.count) %}

                    <hr>

                    <div class="mt-5 col-12">
                        <h4 class="text-center">{{ 'general.accessories' | trans }}</h4>

                        <div class="row">
                            {% for item in accessories %}

                                <div class="col-md-3 d-flex align-items-stretch">
                                    {% include 'product/product_teaser.html.twig' with {'product': item} %}
                                </div>

                            {% endfor %}
                        </div>

                    </div>

                {% endif %}
            {% endblock %}


        </div>
    </div>
{% endblock %}