{% extends "@templates/"~template~"/view/base.html.twig" %}

{% block meta %}{{ getMeta(product) }}{% endblock %}

{% block javascript %}
<script src="{{ asset('media/Public/vendor/lightbox/dist/js/lightbox.min.js') }}"></script>
    {{ parent() }}
{% endblock %}

{% block content %}
    <div class="grid-container">
        <h3>{{ product.title }}</h3>
        <img src="{{ absolute_url(asset(product.getImage('thumbnail'))) }}" alt="{{ product.title }}">
        <p>
            {%- for category in product.categories -%}
                <a href="{{ url('front_ecommerce_product_by_category', { 'id': category.id, 'slug': slugify(category.title) }) }}" class="label">{{ category.title }}</a>
            {%- endfor -%}
        </p>
        {%- if product.priceVisible -%}
            <p>Cena {{ product.price ?? '—' }} zł</p>
        {%- endif -%}
        {%- if product.enableOptions and product.options.count > 0 -%}
            <h5>Cechy:</h5>
            <table style="width: auto;">
                <tbody>
                {% for option in product.options %}
                    <tr>
                        <th style="border: 1px solid #ccc;">{{ option.option.label }}</th>
                        <td style="border: 1px solid #ccc;">{{ option.value }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        {%- endif -%}

        <div>
            <h5>Opis:</h5>
            {{- product.content|raw -}}
        </div>
        <hr>
        <div class="grid-x">
            <div class="large-4">
                <h5>Zapytaj o produkt</h5>
                {% for message in app.flashes('order.success') %}
                    <div class="callout success">{{ message }}</div>
                {% endfor %}

                {{ form_start(form) }}
                    {{ form_widget(form) }}
                    <input type="submit" class="button" value="Zapytaj">
                {{ form_end(form) }}
            </div>
        </div>
    </div>
{% endblock %}
