{% extends "layout_contacts.html.twig" %}

{% block body %}

<div class="row">
    <div id="menu-carnets" class="col-2" style="display: none">
        <div class="card card-panel sticky-top" style="top: 75px; z-index: auto">
            <div class="card-header text-center">MENU</div>
            <ul class="list-group list-group-flush">
                <a href="#" id="carnet-creer-mail" class="list-group-item">Créer mail</a>
                <a href="#" id="carnet-voir-contacts" class="list-group-item">Voir carnet/Autres actions</a>
                <a href="#" class="list-group-item">Changer type</a>
                <a href="#" class="list-group-item">Ajouter à une diffusion</a>
                <a href="#" id="carnet-suppr" class="list-group-item">Supprimer</a>
            </ul>
        </div>
    </div>

    <div class="col">
        <div style="white-space: pre-line" class="alert alert-warning" role="alert">Cocher un carnet pour afficher les différentes actions possibles</div>
        <ul class="nav nav-tabs">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#carnets-perso" data-bs-toggle="tab">Carnets personnels</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#carnets-communs" data-bs-toggle="tab">Carnets communs</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#carnets-globaux" data-bs-toggle="tab">Carnets globaux</a>
          </li>
        </ul>

        <div class="tab-content">
          <div id="carnets-perso" class="tab-pane fade show active">
              <table id="table-carnets-perso" class="table table-striped mt-2" data-search="false" data-locale="fr-FR" data-show-columns="false" data-show-export="false" data-filter-control="true" data-pagination="false" data-detail-view="true" data-detail-formatter="detailCarnet">
              </table>
          </div>
          <div id="carnets-communs" class="tab-pane fade">
              <table id="table-carnets-communs" class="table table-striped mt-2" data-search="false" data-locale="fr-FR" data-show-columns="false" data-show-export="false" data-filter-control="true" data-pagination="false" data-detail-view="true" data-detail-formatter="detailCarnet">
              </table>
          </div>
          <div id="carnets-globaux" class="tab-pane fade">
              <table id="table-carnets-globaux" class="table table-striped mt-2" data-search="false" data-locale="fr-FR" data-show-columns="false" data-show-export="false" data-filter-control="true" data-pagination="false" data-detail-view="true" data-detail-formatter="detailCarnet">
              </table>
          </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-carnet-creer-mail" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Configuration d'envoi mail</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <h6>Liste des personnes</h6>
                <div class="card bg-light mb-3">
                    <div class="card-body">
                        <table id="table-carnet-mail-personnes" class="table table-striped mt-2" data-search="false" data-locale="fr-FR" data-show-columns="false" data-show-export="false" data-filter-control="true" data-pagination="false" data-detail-view="false" data-detail-formatter="">
                        </table>
                    </div>
                </div>
                <h6>Liste des organismes</h6>
                <div class="card bg-light mb-3">
                    <div class="card-body">
                        <table id="table-carnet-mail-org" class="table table-striped mt-2" data-search="false" data-locale="fr-FR" data-show-columns="false" data-show-export="false" data-filter-control="true" data-pagination="false" data-detail-view="false" data-detail-formatter="">
                        </table>
                    </div>
                </div>
                <h6>Liste des appartenances à un service</h6>
                <div class="card bg-light mb-3">
                    <div class="card-body">
                        <table id="table-carnet-mail-serv" class="table table-striped mt-2" data-search="false" data-locale="fr-FR" data-show-columns="false" data-show-export="false" data-filter-control="true" data-pagination="false" data-detail-view="false" data-detail-formatter="">
                        </table>
                    </div>
                </div>
                <h6>Liste des appartenances à une commission</h6>
                <div class="card bg-light mb-3">
                    <div class="card-body">
                        <table id="table-carnet-mail-comm" class="table table-striped mt-2" data-search="false" data-locale="fr-FR" data-show-columns="false" data-show-export="false" data-filter-control="true" data-pagination="false" data-detail-view="false" data-detail-formatter="">
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer modal-footer--sticky">
                <button id="btn-carnet-copier-adresses" class="btn btn-primary" role="button">Copier les adresses sélectionnées dans le presse-papiers</button>
                <button id="btn-carnet-mail-tous" class="btn btn-primary">Envoyer mail à tous</button>
                <button id="btn-carnet-mail-selection" class="btn btn-primary">Envoyer mail aux contacts sélectionnés</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-carnet-voir-contacts" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Gestion des contacts du carnet</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <h6>Liste des personnes</h6>
                <div class="card bg-light mb-3">
                    <div class="card-body">
                        <table id="table-carnet-voir-personnes" class="table table-striped mt-2" data-search="false" data-locale="fr-FR" data-show-columns="false" data-show-export="false" data-filter-control="true" data-pagination="false" data-detail-view="false" data-detail-formatter="">
                        </table>
                    </div>
                </div>
                <h6>Liste des organismes</h6>
                <div class="card bg-light mb-3">
                    <div class="card-body">
                        <table id="table-carnet-voir-org" class="table table-striped mt-2" data-search="false" data-locale="fr-FR" data-show-columns="false" data-show-export="false" data-filter-control="true" data-pagination="false" data-detail-view="false" data-detail-formatter="">
                        </table>
                    </div>
                </div>
                <h6>Liste des appartenances à un service</h6>
                <div class="card bg-light mb-3">
                    <div class="card-body">
                        <table id="table-carnet-voir-serv" class="table table-striped mt-2" data-search="false" data-locale="fr-FR" data-show-columns="false" data-show-export="false" data-filter-control="true" data-pagination="false" data-detail-view="false" data-detail-formatter="">
                        </table>
                    </div>
                </div>
                <h6>Liste des appartenances à une commission</h6>
                <div class="card bg-light mb-3">
                    <div class="card-body">
                        <table id="table-carnet-voir-comm" class="table table-striped mt-2" data-search="false" data-locale="fr-FR" data-show-columns="false" data-show-export="false" data-filter-control="true" data-pagination="false" data-detail-view="false" data-detail-formatter="">
                        </table>
                    </div>
                </div>
                <table id="table-carnet-voir-export" style="display:none"></table>
            </div>
            <div class="modal-footer modal-footer--sticky">
                {% if 'Administrateur' in app.user.roles or 'Validateur local' in app.user.roles %}
                    <button id="btn-carnet-voir-verrouiller" class="btn btn-primary">Verrouiller sélection</button>
                    <button id="btn-carnet-voir-diffusion" class="btn btn-primary">Ajouter sélection à une diffusion</button>
                {% endif %}
                <button id="btn-carnet-voir-export" class="btn btn-primary">Exporter</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-carnet-renommer" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Changer le nom du carnet</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="card bg-light mb-3">
                    <div class="card-body">
                        <div class="row justify-content-start">
                            <div class="col-auto">
                                <input id="change-carnet-nom" class="form-control" type="text"></input>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="btn-carnet-changer-nom" class="btn btn-primary">Valider</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-carnet-retirer-contacts" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Retirer des contacts au carnet</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <h6>Liste des personnes</h6>
                <div class="card bg-light mb-3">
                    <div class="card-body">
                        <table id="table-carnet-retirer-personnes" class="table table-striped mt-2" data-search="false" data-locale="fr-FR" data-show-columns="false" data-show-export="false" data-filter-control="true" data-pagination="false" data-detail-view="false" data-detail-formatter="">
                        </table>
                    </div>
                </div>
                <h6>Liste des organismes</h6>
                <div class="card bg-light mb-3">
                    <div class="card-body">
                        <table id="table-carnet-retirer-org" class="table table-striped mt-2" data-search="false" data-locale="fr-FR" data-show-columns="false" data-show-export="false" data-filter-control="true" data-pagination="false" data-detail-view="false" data-detail-formatter="">
                        </table>
                    </div>
                </div>
                <h6>Liste des appartenances à un service</h6>
                <div class="card bg-light mb-3">
                    <div class="card-body">
                        <table id="table-carnet-retirer-serv" class="table table-striped mt-2" data-search="false" data-locale="fr-FR" data-show-columns="false" data-show-export="false" data-filter-control="true" data-pagination="false" data-detail-view="false" data-detail-formatter="">
                        </table>
                    </div>
                </div>
                <h6>Liste des appartenances à une commission</h6>
                <div class="card bg-light mb-3">
                    <div class="card-body">
                        <table id="table-carnet-retirer-comm" class="table table-striped mt-2" data-search="false" data-locale="fr-FR" data-show-columns="false" data-show-export="false" data-filter-control="true" data-pagination="false" data-detail-view="false" data-detail-formatter="">
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer modal-footer--sticky">
                <button id="btn-carnet-retirer-selection" class="btn btn-primary">Retirer la sélection</button>
            </div>
        </div>
    </div>
</div>

<script>
var list_carnets_globaux = {{ list_carnets_globaux|json_encode|raw }};
var list_carnets_communs = {{ list_carnets_communs|json_encode|raw }};
var list_carnets_perso = {{ list_carnets_perso|json_encode|raw }};
</script>

{% endblock %}