{% extends '@TigrisBase/admin/layout.html.twig' %}

{% block title %}{{ 'menu.persons'|trans|parse_icons }}{% endblock %}
{% block main %}
    <div>
        <tigris-data-list route="app_admin_person_data" :init-filters="{search: ''}" v-slot="{entities, filters, countPerPage, order, loading, loadData, sort, begin, end, totalCount, pageCount}">
            {% embed '@TigrisBase/decorators/_card.html.twig' %}
                {% block header %}
                    <h2 class="card-title">{{ 'person.list'|trans }}</h2>
                {% endblock %}

                {% block body %}
                <form method="get" class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="form-group">
                            <label class="form-label"><small>{{ 'user.search'|trans }}</small></label>
                            <div class="input-group ">
                                <span class="input-group-text">{{ '.icon-search'|parse_icons }}</span>
                                <input type="text" class="form-control" v-model="filters.search"/>
                            </div>
                        </div>
                    </div>

                    <div>
                        <div class="form-group">
                            <label class="form-label"><small>{{ 'results_per_page'|trans }}</small></label>
                            <item-count-select/>
                        </div>
                    </div>
                </form>
                {% endblock %}
                {% block table %}
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>{{ 'person.name'|trans }}</th>
                            <th>{{ 'person.has_account'|trans }}</th>
                            <th>{{ 'actions'|trans }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="entity in entities" :key="entity.id">
                            <td>
                                <div class="d-flex">
                                    <div class="me-2">
                                        <img v-if="entity.userimagePath" :src="entity.userimagePath" width="72px" height="72px" class="object-fit-cover rounded-circle border border-info-subtle border-3">
                                        <img v-else src="{{ asset('/img/noavatar.png') }}" width="72px" height="72px" class="object-fit-cover rounded-circle border border-info-subtle border-3">
                                    </div>
                                    <div>
                                        ${ entity.name }
                                        ${ entity.firstname }
                                        <div>
                                            ${ $filters.formatDate(entity.birthdate, 'LL') }
                                            <span v-if="entity.deathdate"> - {{ '.icon-cross'|parse_icons }} ${ $filters.formatDate(entity.deathdate, 'LL') } </span>    
                                        </div>
                                    </div>
                                </div>
                                
                            </td>
                            <td>${ entity.hasAccount ? 'Oui' : 'Non' }</td>
                            <td>
                                <button-action route="app_person_edit" :route-params="{id: entity.id}" class="btn btn-primary btn-sm" :modal="true" v-on:formsaved="loadData()">
                                    {{ '.icon-pencil'|parse_icons }}
                                </button-action>
                            </td>
                        </tr>
                    </tbody>
                </table>
                {% endblock %}

                {% block footer %}
                <div class="data-list-footer">
                    <div>
                        <em>{{ 'data_count'|trans({'%begin%':'${begin}', '%end%':'${end}', '%total%':'${totalCount}'}) }}</em>
                    </div>
                    <pagination></pagination>
                </div>
                {% endblock %}
            {% endembed %}
        </tigris-data-list>
    </div>

    <div class="mt-5">
        <tigris-data-list route="app_admin_person_similarities" :init-filters="{}" v-slot="{entities, filters, countPerPage, order, loading, loadData, sort, begin, end, totalCount, pageCount}">
            {% embed '@TigrisBase/decorators/_card.html.twig' %}
                {% block header %}
                    <h2 class="card-title">{{ 'person.similarities'|trans }}</h2>
                {% endblock %}

                {% block table %}
                <div class="card-body">
                    <div class="row row-cols-1 row-cols-md-2 g-4">
                        <div class="col" v-for="entity in entities" :key="entity.id">
                            <div class="card h-100">
                                <div class="card-body">
                                    <h5 class="card-title text-primary">${ entity.name } ${ entity.firstname }</h5>
                                    <div class="card-text">${ $filters.formatDate(entity.birthdate, 'LL') }</div>
                                    <span class="badge text-bg-info" v-if="entity.hasAccount">{{ 'person.has_account'|trans }}</span>
                                    <button-action v-else route="app_admin_person_transfert" :route-params="{id: entity.id}" class="btn btn-primary" :modal="true" v-on:formsaved="loadData()">
                                        {{ 'person.transfert.transfert'|trans }}
                                    </button-action>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% endblock %}
            {% endembed %}
        </tigris-data-list>
    </div>


{% endblock %}