{% extends 'Application/' ~ settings.get("theme") ~ '/base.html.twig' %}

{% block title %}
Liste des objets
{% endblock %}

{% block seo %}
<meta name="title" content="Liste des objets | {{ settings.get('seo_description') }}">
<meta name="description" content="{{ settings.get('seo_description') }}">

<meta property="og:type" content="website">
<meta property="og:url" content="{{ app.request.uri }}">
<meta property="og:title" content="Liste des objets | {{ settings.get('seo_description') }}">
<meta property="og:description" content="{{ settings.get('seo_description') }}">
<meta property="og:image" content="{{ asset('assets/general/seo/seo.png') }}">

<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="{{ app.request.uri }}">
<meta property="twitter:title" content="Liste des objets | {{ settings.get('seo_description') }}">
<meta property="twitter:description" content="{{ settings.get('seo_description') }}">
<meta property="twitter:image" content="{{ asset('assets/general/seo/seo.png') }}">
{% endblock %}

{% block stylesheets %}
<style>
    .tooltip-container {
        position: relative;
        display: inline-block;
        margin: 4px;
    }

    .tooltip-content {
        visibility: hidden;
        width: 250px;
        background-color: rgba(34, 34, 34, 0.95);
        color: #fff;
        text-align: left;
        border-radius: 6px;
        padding: 10px;
        position: absolute;
        z-index: 1;
        bottom: 110%;
        left: 50%;
        transform: translateX(-50%);
        box-shadow: 0 0 10px rgba(0,0,0,0.5);
        font-size: 12px;
        line-height: 1.4;
    }

    .tooltip-container:hover .tooltip-content {
        visibility: visible;
    }

    .item-icon {
        width: 48px;
        height: 48px;
        image-rendering: pixelated;
    }

    .item-title {
        font-size: 1.4rem;
        margin-bottom: 1rem;
    }
</style>
{% endblock %}

{% block body %}

<h1>{{ 'Liste des objets'|trans }}</h1>

<div id="news" class="read">
    <article>
	<div style="min-height:600px;">
    <form id="filter-form" action="{{ path('game.items') }}" class="mb-3">
    <label for="folder-select">Filtrer par catégorie :</label>
<select name="category" id="category">
    {% for cat in categories %}
        <option value="{{ cat.id }}" {% if cat.id == selectedCategory %}selected{% endif %}>{{ cat.name }}</option>
    {% endfor %}
</select>

</form>


<div id="items-container">
    {% include 'Application/' ~ settings.get('theme') ~ '/items/_items_list.html.twig' with {'items': items} %}
</div>

<script>
    document.getElementById('folder-select').addEventListener('change', function () {
        const form = document.getElementById('filter-form');
        const params = new URLSearchParams(new FormData(form)).toString();
        fetch(form.action + '?' + params, {
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(response => response.text())
        .then(html => {
            document.getElementById('items-container').innerHTML = html;
        });
    });
</script>

      </div>  
    </article>
    <div class="clear"></div>
</div>

{% endblock %}