{% extends '@SyliusShop/layout.html.twig' %}
{% import "@SyliusShop/Common/Macro/money.html.twig" as money %}
{% set variant = product|sylius_resolve_variant %}
{% set has_discount = variant is not null and variant|sylius_has_discount({'channel': sylius.channel}) %}

{% if product.imagesByType('main') is not empty %}
{% set source_path = product.imagesByType('main').first.path %}
{% set original_path = source_path|imagine_filter('sylius_shop_product_original') %}
{% set path = source_path|imagine_filter(filter|default('sylius_shop_product_large_thumbnail')) %}
{% elseif product.images.first %}
{% set source_path = product.images.first.path %}
{% set original_path = source_path|imagine_filter('sylius_shop_product_original') %}
{% set path = source_path|imagine_filter(filter|default('sylius_shop_product_large_thumbnail')) %}
{% else %}
{% set original_path = '//placehold.it/400x300' %}
{% set path = original_path %}
{% endif %}

{% block title %} {{ product.name }} | {{ parent() }}{% endblock %}

{% block meta_description %}
{{ product.getMetaDescription() }}
{% endblock %}

{% block head %}
{{ parent() }}
<!-- Open Graph Meta Tags -->
<meta property="og:type" content="product">
<meta property="og:url" content="{{ url('sylius_shop_product_show', {'slug': product.slug}) }}">
<meta property="og:title" content="{{ product.name }}">
<meta property="og:site_name" content="Ma Pépinière">
<meta property="og:description" content="{{ product.description|striptags|slice(0, 160) }}">
<meta property="og:image" content="{{ path}}">
<meta property="product:retailer_item_id" content="{{ product.code }}">
<meta property="product:pretax_price:amount" content="{{ variant ? variant.getHTPrice() : '' }}">
<meta property="product:pretax_price:currency" content="EUR">
<meta property="product:price:amount" content="{{ variant ? variant.getPrice() : '' }}">
<meta property="product:price:currency" content="{{ 'EUR' }}">
<meta property="product:weight:value" content="{{ variant ? variant.getWeight() : '' }}">
<meta property="product:weight:units" content="kg">
{% endblock %}

{% block content %}
<section>
    {% include '@SyliusShop/Product/Show/_breadcrumb.html.twig' %}
    <div class="row">
        <div class="col-md-7 col-xl-7">

            {{ sylius_template_event('sylius.shop.product.show.header', _context) }}
            {{ sylius_template_event('sylius.shop.product.show.left_sidebar', _context) }}

            {# Selling points under photos on desktop #}
            {% include '@SyliusShop/Product/Show/_shortDescription.html.twig' with {'placement': 'desktop'} %}
        </div>
        <div class="col-md-5 col-xl-5">
            {{ sylius_template_event('sylius.shop.product.show.right_sidebar', _context) }}

            {# Selling points on mobile only (keep visibility for phones) #}
            {% include '@SyliusShop/Product/Show/_shortDescription.html.twig' %}
        </div>
    </div>

    <section class="my-5 py-4 border-top">
        <h2 class="h4 mb-4">Caractéristiques</h2>
        {% include '@SyliusShop/Product/Show/Tabs/_attributes.html.twig' %}
    </section>

    <section class="my-5 py-4 border-top">
        {% include '@SyliusShop/Product/Show/Tabs/_details.html.twig' %}
    </section>

    <section class="my-5 py-4 border-top">
        <h2 class="h4 mb-4">{{ 'sylius.ui.reviews'|trans }} ({{ product.acceptedReviews|length }})</h2>
        {% include '@SyliusShop/Product/Show/Tabs/_reviews.html.twig' %}
    </section>

    <section class="my-5 py-4 border-top">
        {% include '@SyliusShop/Product/Show/_associations.html.twig' %}
    </section>
</section>
{% endblock %}