{% extends "base.html" %}

{% block content %}
<section class="section">
    <div class="container">
        <h1 class="title">Bienvenue sur NenuScanner</h1>
        {% if projects %}
            <div class="content">
                <p>Voici les projets existants dans la base de données :
                <ul>
                {% for project in projects %}
                    <li>
                        <h2 class="title mb-0 mt-3">{{ project.name }} <em>({{ project.objects | length }} objets)</em></h2>

                        <ul>
                            {% for object in project.objects %}
                                <li><a href="/object/{{ object.id }}">{{ object.name }}</a></li>
                            {% endfor %}
                        </ul>
                    </li>
                {% endfor %}
                </ul>
            </div>
        {% else %}
            <p>Il n'y a aucun projet pour le moment...</p>
        {% endif %}
        <button id="add-object" class="button is-link">Ajouter un nouvel objet</button>
        <div id="add-object-modal" class="modal">
            <div class="modal-background"></div>
            <form action="/create-object/" method="POST">
                <div class="modal-content">
                    <div class="field">
                        <label class="label">Nom du projet</label>
                        <div class="control">
                            <input class="input" type="text" name="project" placeholder="Nom du projet" required>
                        </div>
                    </div>
                    <div class="field">
                        <label class="label">Nom de l'objet</label>
                        <div class="control">
                            <input class="input" type="text" name="name" placeholder="Nom de l'objet" required>
                        </div>
                    </div>

                    <div class="field is-grouped is-grouped-centered">
                        <div class="control">
                            <button class="button is-link">Créer un objet</button>
                        </div>
                    </div>
                </div>
                <button class="modal-close is-large" aria-label="close"></button>
            </form>
        </div>
    </div>
</section>
{% endblock content %}

{% block extrajs %}
<script>
document.addEventListener('DOMContentLoaded', () => {
    let addObjectButton = document.getElementById('add-object');
    let addObjectModal = document.getElementById('add-object-modal');

    // Modal button show the modal
    addObjectButton.addEventListener('click', () => {
        addObjectModal.classList.add('is-active');
    });

    (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach((close) => {
        close.addEventListener('click', () => {
            addObjectModal.classList.remove('is-active');
        });
    });
});
</script>
{% endblock extrajs %}