{% extends "page/titled/default.html.twig" %}

{% 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="grid grid-flow-row-dens grid-cols-12 md:p-8 gap-5">
        {% for mesh in pager %}
            <div class="card shadow-md col-span-12 md:col-span-6 lg:col-span-4 m-3 bg-box">
                <div class="card">
                    <figure>
                        <img src="{{ asset('build/images/px.png') }}" data-color="{{ generate_color_by_string(mesh.id) }}" data-src="{{- asset(mesh.preview)|imagine_filter('mesh_preview_filter') -}}" data-src-error="{{ asset('build/images/post-image-logo.png') }}" alt="{{ mesh.label }}">
                    </figure>
                    <div class="card-body">
                        <h2 class="card-title">{{ mesh.label }}</h2>

                        {{- mesh.description|murph_url|file_attributes|markdown('post') -}}

                        <div class="card-actions mt-5">
                            {% for key, item in mesh.files %}
                                <div class="dropdown dropdown-top">
                                    <label tabindex="0" class="btn btn-xs">{{ item.name }}</label>
                                    <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
                                        <li>
                                            <a class="mesh-viewer" data-modal href="{{ path('mesh_viewer', {stlMesh: mesh.id, key: key + 1}) }}">Voir en 3D</a>
                                        </li>
                                        <li>
                                            <a target="_blank" href="{{ path('mesh_download', {stlMesh: mesh.id, key: key + 1}) }}">Télécharger</a>
                                        </li>
                                    </ul>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>

            {# for key, item in mesh.files %}
                <input type="checkbox" id="mesh-{{ mesh.id }}-{{ key }}" class="modal-toggle" />
                <div class="modal modal-mesh">
                    <div class="modal-box max-w-full w-full m-10">
                        <iframe src="{{ path('mesh_viewer', {stlMesh: mesh.id, key: key + 1}) }}" frameborder="0"></iframe>
                        <div class="modal-action">
                            <label for="mesh-{{ mesh.id }}-{{ key }}" class="btn btn-sm">Fermer</label>
                        </div>
                    </div>
                </div>
            {% endfor #}
        {% endfor %}
    </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.pageCount,
                            currentPage: pager.paginationData.current
                        }) }}
                    {% endblock %}
                </div>
            </div>
        </div>
    {% endif %}
    #}
{% endblock %}