{% 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/mods/index.css') }}">
{% endblock %}

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

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

        {# ADD BUTTON #}
        <a href="{{ path("app_admin_mods_add") }}" class="bulle bulle-all-col mod-card">
            <span class="mod-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="mod-name">
                Ajouter un mod
            </div>
        </a>
        {% for mod in mods %}
            <div class="bulle bulle-all-col mod-card"
                 data-controller="clickable-card"
                 data-href="{{ path('app_admin_mods_edit', {'idmod': mod.id}) }}"
                 data-action="click->clickable-card#navigate">

                <div class="mod-name">{{ mod.nom }}</div>
                <div class="mod-space"></div>
                <div class="mod-version"> Version : {{ mod.version }}</div>

                <div class="mod-deps">
                    {% for dependance in mod.dependances %}
                        <a href='{{ path('app_admin_mods_edit', {'idmod': dependance.id}) }}'
                           class="mod-dep" data-action="click->mod-card#stopPropagation">
                            {{ dependance.nom }} - {{ dependance.version }}
                        </a>
                    {% endfor %}
                </div>

                <div class="mod-used {% if not mod.isUsed %}non-utilise{% endif %}">
                    {% if mod.isUsed %}Utilisé{% else %}Non utilisé{% endif %}
                </div>

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