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

{% block title %}{{ 'family.my_family'|trans|parse_icons }}{% endblock %}
{% block main %}
<div id="person-list">
    <h1>{{ 'family.my_family'|trans|parse_icons }}</h1>
    <tigris-data-list route="app_person_data" :route-params="{}" :init-filters="{family: '{{ families[0].id }}'}" v-slot="{entities, filters, countPerPage, order, loading, loadData, sort, begin, end, totalCount, pageCount, updateEntity}">
        <div class="d-flex justify-content-between align-items-center">
        
            <div class="filters">
                <div class="d-flex flex-wrap">
                    {% for family in families %}
                    <input type="radio" class="btn-check" id="{{ family.id }}" value="{{ family.id }}" name="family" autocomplete="off" v-model="filters.family">
                    <label class="btn" for="{{ family.id }}">{{ family.name }}</label>
                    {% endfor %}
                </div>
            </div>
            {% if is_granted('ROLE_FAMILY_ADMIN') %}
            <button-action route="app_person_new" :route-params="{}" class="" type="primary" :modal="true" v-on:formsaved="loadData()">
                {{ 'person.add.add'|trans }}
            </button-action>
            {% endif %}
        </div>
        <div class="person-list">
            <div v-for="entity in entities" :key="entity.id" class="person-item" v-if="!loading">
                <button-action class="userimage" :modal="true" route="app_person_show" :route-params="{id: entity.id}">
                    <img src="{{ asset('img/noavatar.png') }}" alt="user image" v-if="entity.userimagePath === null" />
                    <img :src="entity.userimagePath" alt="user image" v-else />
                </button-action>
                <div>
                    {% if is_granted('ROLE_FAMILY_ADMIN') %}
                    <button-action route="app_person_edit" :route-params="{id: entity.id}" class="" :modal="true" v-on:formsaved="loadData()">
                        {{ '.icon-pencil'|parse_icons }}
                    </button-action>
                    {% endif %}
                    <button-action class="mx-2" :modal="true" route="app_person_show" :route-params="{id: entity.id}">
                    ${ entity.fullname }
                    </button-action>
                </div>
                
            </div>
            <div v-else class="d-flex justify-content-center p-4 w-100">
                <div class="spinner-border text-primary mx-auto" role="status">
                    <span class="visually-hidden">Chargement...</span>
                </div>
            </div>
        </div>
    </tigris-data-list>
</div>
{% endblock %}