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

{% block title %} Maps {% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('styles/vitrine/index.css') }}">
    <link rel="stylesheet" href="{{ asset('styles/globals/bulles.css') }}">
    <link rel="stylesheet" href="{{ asset('styles/maps/index.css') }}">
{% endblock %}

{% block main %}
    <div class="bulle-container">
        <section class="bulle bulle-all-col flex-column align-items-center">
            <h1 class="text-center">Télécharger les Maps</h1>
        </section>

        <section class="bulle bulle-all-col flex-column align-items-center">
            <h4>Liste des maps : </h4>
            {% if files is not empty %}
                <div class="maps-list">
                    {% for file in files %}
                        <div class="maps">
                            <div class="maps-info">
                                <p class="maps-name"> {{ file.display }} </p>
                                <p class="maps-size">
                                    {% set sizeInMB = (file.size / 1024 / 1024) %}
                                    {% if sizeInMB >= 950 %}
                                        {{ (file.size / 1024 / 1024 / 1024) | round(2) }} Go
                                    {% else %}
                                        {{ sizeInMB | round(2) }} Mo
                                    {% endif %}
                                </p>
                            </div>
                            <a href="{{ path('app_maps_download', {'filename': file.filename}) }}" class="maps-btn" >
                                Télécharger
                            </a>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <p class="text-center">Aucune map n'est actuellement disponible au téléchargement.</p>
            {% endif %}
        </section>
    </div>
{% endblock %}