{% extends app.request.xmlHttpRequest 
        ? '@TigrisBase/admin/ajax-layout.html.twig'
        : '@TigrisBase/admin/layout.html.twig' %}
{% block title %}{{ 'contact.message.list'|trans }}{% endblock %}
{% block main %}
    <tigris-data-list route="tigris_contact_admin_contact_data" :init-filters='{}' v-slot="{loadData, entities, filters, totalCount, begin, end, sort, selectedItems, selectAll, selectItem}">
    {% embed '@TigrisBase/decorators/_card.html.twig' with {'class': ''} %}
        {% block body %}
            <div class="d-flex justify-content-between align-items-center">
                <div class="d-flex align-item-center">
                    <div class="form-check custom-control-inline me-2 mt-1">
                        <input type="checkbox" class="toggle form-check-input select-all" id="message-select-all" v-on:change="selectAll()">
                        <label class="form-check-label" for="message-select-all"> {{ 'select_all'|trans }}</label>
                    </div>
                    <button-action v-on:formsaved="loadData" route="tigris_contact_admin_contact_remove" :class="{disabled:selectedItems.length == 0}" type="danger" :modal="true" :selected-items="selectedItems" title="{{ 'button.delete'|trans }}">{{ 'button.delete'|trans|parse_icons }}</button-action>
                </div>
                <div class="form-group">
                    <label><small>{{ 'results_per_page'|trans }}</small></label>
                    <item-count-select/>
                </div>
            </div>
        {% endblock %}
        {% block table %}
        <div class="accordion list-group" id="contact-message-list">
            <div v-for="entity in entities" :key="entity.id">
                <div class="list-group-item d-flex justify-content-between align-items-center" :id="'heading-' + entity.id">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="form-check custom-control-inline m-0">
                            <input type="checkbox" class="toggle form-check-input select-item" :id="'select-msg-' + entity.id" v-model="selectedItems" :value="entity.id" @change="(e) => {selectItem(entity.id, e.target.checked)}">
                            <label class="form-check-label" :for="'select-msg-' + entity.id"> </label>
                        </div>
                        
                        <button class="btn btn-link" type="button" data-bs-toggle="collapse" :href="'#collapse-' + entity.id" aria-expanded="true" :aria-controls="'collapse-' + entity.id">
                        ${ $filters.formatDate(entity.createdAt, 'lll') }
                        - ${ $filters.truncate(entity.data.message, 80) }
                        </button>
                    </div>
                </div>

                <div :id="'collapse-' + entity.id" class="collapse list-group-item" :aria-labelledby="'heading-' + entity.id" data-parent="#contact-message-list">
                    <ul class="list-unstyled">
                        <li v-for="(item, field) in entity.data"><strong>${ $filters.capitalize(field) }</strong>: 
                            <span v-if="typeof item != 'object'" v-html="item" class="whitespace-pre"></span>
                            <span v-if="typeof item == 'object' && 'date' in item" >${ $filters.formatDate(item.date) }</span>
                        </li>
                    </ul>
                    <a v-if="entity.email !== null" :href="'mailto:' + entity.email" class="btn btn-success">{{ 'contact.message.reply'|trans }}</a>
                </div>
            </div>
        </div>

        {% endblock %}
        {% block footer %}
        <div class="d-flex justify-content-between">
            <em>{{ 'data_count'|trans({'%begin%':'${begin}', '%end%':'${end}', '%total%':'${totalCount}'}) }}</em>
            <pagination></pagination>
        </div>
        {% endblock %}
    {% endembed %}

    </tigris-data-list>
{% endblock %}