{% extends 'base.html.twig' %}
{% block title  %} {{product.name|title}} - Catalogue Spécial Extérieur - 17 mars 17 avril 2021 | Gedimat Martinique {% endblock %}
{% block seo %}
<meta name="description" content="" />
<meta property="og:title" content="{{product.name|title}}" />
<meta property="og:type" content="Website" />
<meta property="og:description" content="" />
<meta property="og:url" content="{{absolute_url( app.request.uri)}}" />
<meta property="og:site_name" content="" />
<meta property="og:image" content="{{asset('img/upload/')}}{{product.img}}" />

<meta name ="twitter:card" content = "summary_large_image"/>
<meta name="twitter:title" content="{{product.name|title}} - Catalogue Spécial Extérieur - 17 mars 17 avril 2021 | Gedimat Martinique ">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="{{asset('img/upload/')}}{{product.img}}">
{% endblock %}
{% block stylesheets %}
    <link rel="stylesheet" href="{#{asset('css/product/styles.css')}#}">
    <link rel="stylesheet" href="{{asset('css/product/@libs/zoom.css')}}">
{% endblock %}
{% block body %}
  <style media="screen">
    .product__desc-wrapper li{
      color: #867e75;
    }
  </style>
    <!--
    ==================================== -->
    <main class="st-main page--product">

        <div class="grid margin-grid">
            <div class="col-5_xs-12">
                <!--  -->
                <div class="product__img-wrapper">
                    <div class="zoom-ui">
                        <i class="icon-zoom"></i>
                    </div>
                    {% if product.img %}
                    <img src="{{asset('img/upload/')}}{{product.img}}" alt="{{product.name}}" title="{{product.name}}" data-action="zoom">
                    {% else %}
                      <img src="{{asset('img/images/product-img.png')}}" alt="{{product.name}}" title="{{product.name}}" class="card-product-image">
                    {% endif %}
                </div>
            </div>
            <div class="col-7_xs-12">
                <div class="product__desc-wrapper">
                    <h1>{{product.name|upper}}</h1>
                    <p style="margin-top: 0px;">{{product.reference}}</p><br>
                    <p>
                      {{product.description|raw}}
                    </p>
                    <div class="product__price">
                      {% if product.mention %}
                      <span style="display:block;font-size:16px">À partir de</span>
                      {% endif %}
                        <span class="price">{{product.price}}</span><sup><span class="price--cents">{% if product.priceDecimal %},{{product.priceDecimal}}{% endif %}</span><span class="price--device">€</span></sup>
                    </div>
                </div>
            </div>
        </div>

    </main>
    {% endblock %}
    {% block javascripts %}
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <script src="{{asset('js/@libs/zoom.js')}}"></script>
    {% endblock %}