{% extends 'base.html.twig' %}
{% block title %}CRUD Contrib IA{% endblock %}

{% block body %}
<h1>CRUD Contrib IA</h1>
<div class="d-flex gap-3">
    <div style="flex:1;">
        <h2>Ajouter / Modifier</h2>
        <button class="btn btn-primary mb-3" id="btnAdd">+ Nouvelle contribution IA</button>
        {% if form is defined %}
            {% include 'contribia/_form.html.twig' with {'form': form, 'action': path('contribia_new')} %}
        {% endif %}
    </div>
    <div style="flex:2;">
        <h2>Liste</h2>
        {% include 'contribia/_list.html.twig' %}
    </div>
</div>

<div class="modal fade" id="crudModal" tabindex="-1">
  <div class="modal-dialog"><div class="modal-content">
    <div class="modal-header"><h5 class="modal-title">Formulaire</h5></div>
    <div class="modal-body" id="modal-body"></div>
  </div></div>
</div>

<script>
document.addEventListener('click', async e => {
    if(e.target.id === 'btnAdd'){
        const res = await fetch('{{ path("contribia_new") }}');
        const html = await res.text();
        document.getElementById('modal-body').innerHTML = html;
        new bootstrap.Modal(document.getElementById('crudModal')).show();
    }
    if(e.target.classList.contains('btn-edit')){
        const url = e.target.dataset.url;
        const res = await fetch(url);
        const html = await res.text();
        document.getElementById('modal-body').innerHTML = html;
        new bootstrap.Modal(document.getElementById('crudModal')).show();
    }
});
</script>
{% endblock %}