{% extends "admin/change_list.html" %}
{% load static %}

{% block extrahead %}
{{ block.super }}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
<style>
    .folder-grid { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; }
    .folder-item { width: 220px; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 8px; transition: 0.3s; position: relative; }
    .folder-icon { font-size: 40px; color: #007bff; }
    .subfolders { margin-left: 20px; display: none; }
    .toggle-btn { cursor: pointer; color: #007bff; margin-top: 5px; display: inline-block; }
</style>
<script>
    function toggleSubfolders(id) {
        var el = document.getElementById("children-" + id);
        if (el.style.display === "none") {
            el.style.display = "block";
        } else {
            el.style.display = "none";
        }
    }
</script>
{% endblock %}

{% block content %}
<div>
	<div>
		{% if parent_folder %}
		<div>
		<p><a href="?{% if parent_folder.parent %}parent={{ parent_folder.parent.id }}{% endif %}">
			<i class="fas fa-arrow-left"></i> Revenir au dossier parent
		</a></p>
		</div>
		{% endif %}

		<div>
			<h1> Mon Espace d'Echange </h1>
		</div>
		<div>
			<h4 class="text-primary">Dossiers{% if parent_folder %} dans « {{ parent_folder.name }} »{% endif %}</h4>
		</div>
	</div>
	<div class="folder-grid">
	    {% for folder in folders %}
		<div class="folder-item">
		    <div class="folder-icon"><i class="fas fa-folder"></i></div>
		    <div><a href="?parent={{ folder.id }}"><strong>{{ folder.name }}</strong></a></div>
		</div>
	    {% empty %}
		<p>Aucun sous-dossier ici.</p>
	    {% endfor %}
	</div>

</div>

{% endblock %}
