{% extends 'base.html.twig' %}

{%- block meta_title -%}
    {{- _page.title.value -}}
{% endblock %}

{%- block page_title -%}
    {{- _page.title.value -}}
{% endblock %}

{% block page_subtitle %}
    <p class="h3">
        {{- _page.subTitle.value -}}
    </p>
{% endblock %}

{% block body %}
    <div class="col-12">
        <div class="body">
            <div class="body-content">
                {{- _page.content.value|murph_url|file_attributes|markdown('post') -}}
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12 meshes">
            <div class="row">
                {% for mesh in pager %}
                    <div class="col-4 mesh-wrapper">
                        <div class="mesh">
                            <div class="mesh-preview">
                                <a data-modal href="{{ path('mesh_viewer', {stlMesh: mesh.id}) }}">
                                    <img src="{{ asset(mesh.preview)|imagine_filter('mesh_preview_filter') }}" alt="{{ mesh.label }}">
                                </a>
                            </div>
                            <h2 class="mesh-title">{{ mesh.label }}</h2>
                            <div class="mesh-description">
                                {{ mesh.description|murph_url|file_attributes|markdown('post') }}

                                <ul class="list--inline">
                                    <li>
                                        <a class="button small mesh-viewer" data-modal href="{{ path('mesh_viewer', {stlMesh: mesh.id}) }}">
                                            Visualiser en 3D
                                        </a>
                                    </li>
                                    <li>
                                        <a class="button small" target="_blank" href="{{ path('mesh_download', {stlMesh: mesh.id}) }}">
                                            Télécharger
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="modal" id="mesh-viewer">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <span class="close"></span>
                </div>
                <div class="modal-body">
                </div>
            </div>
        </div>
    </div>

    {% if pager.getPaginationData.pageCount > 1 %}
        <div class="col-12">
            <div class="body">
                <div class="pager align-right">
                    {% block pager %}
           {{ include('module/_pager.html.twig', {
                            route: _node.routeName,
                            routeParams: {},
                            pages: pager.paginationData.endPage,
                            currentPage: pager.paginationData.current
                        }) }}
                    {% endblock %}
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}