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

{% block title %}Administration{% endblock %}

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

{% block titlePage %}
    <div class="bulle-container">
        <div class="bulle bulle-all-col bulle-nohover bulle-header">
            <h1 class="bulle-title">Administration : Modpacks</h1>
        </div>
    </div>
{% endblock %}

{% block main %}
    <div class="bulle-container">

        {# ADD BUTTON #}
        <a href="{{ path("app_admin_modpacks_add") }}" class="bulle bulle-all-col modpack-card">
            <span class="modpack-add-icon">
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
                     <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"/>
                 </svg>
            </span>
            <div class="modpack-name">
                Créer un modpack
            </div>
        </a>
        {% for modpack in modpacks %}
            <div class="bulle bulle-all-col modpack-card"
                 data-controller="clickable-card"
                 data-href="{{ path('app_admin_modpacks_edit', {'id': modpack.id}) }}"
                 data-action="click->clickable-card#navigate">

                <div class="modpack-name">{{ modpack.version }}</div>
                <div class="modpack-space"></div>
                <div class="modpack-number">{{ modpack.numberofmods }} mod{% if modpack.numberofmods>=2 %}s{% endif %}</div>
                <div class="modpack-used {% if not modpack.downloadable %}non-utilise{% endif %}">
                    {% if modpack.downloadable %}Téléchargeable{% else %}Caché{% endif %}
                </div>

                <a href="{{ path('app_admin_modpacks_delete', {'id' : modpack.id}) }}" class="modpack-delete" data-action="click->clickable-card#stopPropagation">Supprimer</a>
            </div>
        {% endfor %}
    </div>
{% endblock %}