{% extends app.request.xmlHttpRequest 
         ? '@TigrisBase/admin/ajax-layout.html.twig'
         : '@TigrisBase/admin/layout.html.twig' %}

{% block title %}{% if type is empty %}{{ 'content.element.list'|trans }}{% else %}{{ (typeName ~ '.list')|trans }}{% endif %}{% endblock %}
{% block main %}
<tigris-data-list route="tigris_content_admin_element_data" :route-params="{type: '{{ typeName }}'}" :init-filters="{search:'', public:''}" :count-per-page="{{ criteria.count }}" :init-begin="{{ criteria.begin }}" update-route="tigris_content_admin_element_updatepart" v-slot="{loadData, entities, filters, totalCount, begin, end, sort, updateEntity}">
{% embed '@TigrisBase/decorators/_card.html.twig' with {'class': ''} %}
    {% block header %}
    <button-action v-on:formsaved="loadData()" route="tigris_content_admin_element_new" :modal="true" :route-params="{type: '{{ typeName }}'}" type="success">
        <span class="btn-label">{{ '.icon-plus'|parse_icons }}</span> 
        {% if type is empty %}{{ 'content.element.add.add'|trans }}{% else %}{{ (typeName ~ '.add.add')|trans }}{% endif %}
    </button-action>
    {% endblock %}
    {% block body %}
    <form method="get" class="d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center">
            {% if type is empty %}
            <div class="form-group">
                <label class="form-label"><small>{{ 'content.element.type.type'|trans }}</small></label>
                <select class="form-control" v-model="filters.type">
                    <option value="">{{ 'content.element.type.all'|trans }}</option>
                    {% for key, type in types %}
                    <option value="{{ key }}">{{ ('content.element.type.' ~ type.name)|trans }}</option>
                    {% endfor %}
                </select>
            </div>
            {% endif %}

            <div class="form-group ms-2">
                <label class="form-label"><small>{{ 'content.element.status.label'|trans }}</small></label>
                <select class="form-control" v-model="filters.public">
                    <option value="">{{ 'content.element.status.all'|trans }}</option>
                    <option value="1">{{ 'content.element.status.public'|trans }}</option>
                    <option value="0">{{ 'content.element.status.non_public'|trans }}</option>
                </select>
            </div>

            <div class="form-group ms-2">
                <label class="form-label"><small>{{ 'content.element.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><small>{{ 'results_per_page'|trans }}</small></label>
                <item-count-select></item-count-select>
            </div>
        </div>
    </form>
    {% endblock %}
    {% block table %}
    <table class="table table-striped">
        <thead>
            <tr>
                <th><sort-item label="{{ 'name'|trans }}" value="name" v-on:change="sort"></sort-item></th>
                {% if type.allow_user_adding %}
                <th class="d-none d-xxl-table-cell"><sort-item label="{{ 'content.element.owner'|trans }}" value="user" v-on:change="sort"></sort-item></th>
                {% endif %}
                {% if type.categories %}
                <th>{{ 'content.element.categories'|trans }}</th>
                {% endif %}
                <th class="d-none d-xxl-table-cell"><sort-item label="{{ 'content.element.createdAt'|trans }}" value="createdAt" v-on:change="sort"></sort-item></th>
                <th class="d-none d-xxl-table-cell"><sort-item label="{{ 'content.element.updatedAt'|trans }}" value="updatedAt" v-on:change="sort"></sort-item></th>
                {% if type.published_date %}
                <th><sort-item label="{{ 'content.element.publishedAt'|trans }}" value="publishedAt" v-on:change="sort"></sort-item></th>
                {% endif %}
                {% if type.unpublished_date %}
                <th><sort-item label="{{ 'content.element.unpublishedAt'|trans }}" value="unpublishedAt" v-on:change="sort"></sort-item></th>
                {% endif %}
                {% if type.enable_view_count %}
                <th><sort-item label="{{ 'content.element.view_count'|trans }}" value="viewCount" v-on:change="sort"></sort-item></th>
                {% endif %}
                <th><sort-item label="{{ 'content.element.status.public'|trans }}" value="public" v-on:change="sort"></sort-item></th>
                {% if type is empty %}<th><sort-item label="{{ 'content.element.type.type'|trans }}" value="type" v-on:change="sort"></sort-item></th>{% endif %}
                <th width="120px">{{ 'actions'|trans }}</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="entity in entities" :key="entity.id">
                <td><strong>${ entity.name }</strong></td>
                {% if type.allow_user_adding %}
                <td class="d-none d-xxl-table-cell"><button-action v-if="entity.user" route="tigris_base_admin_user_show" :route-params="{id:entity.user.id}" :modal="true">${ entity.user.username }</button-action></td>
                {% endif %}

                {% if type.categories %}
                <td>
                    <span class="badge bg-secondary me-2" v-for="category in entity.categories">${category.name}</span>
                </td>
                {% endif %}
                <td class="d-none d-xxl-table-cell"><span :title="$filters.formatDate(entity.createdAt)">${ $filters.formatDate(entity.createdAt, 'L') }</span></td>
                <td class="d-none d-xxl-table-cell">
                    <span v-show="entity.updatedAt != entity.createdAt" :title="$filters.formatDate(entity.updatedAt)">${ $filters.formatDate(entity.updatedAt, 'L') }</span>
                    <span v-show="entity.updatedAt == entity.createdAt">-</span>
                </td>
                {% if type.published_date %}
                <td><span :title="$filters.formatDate(entity.publishedAt)">${ $filters.formatDate(entity.publishedAt, 'L') }</span></td>
                {% endif %}
                </td>
                {% if type.unpublished_date %}
                <td><span :title="$filters.formatDate(entity.unpublishedAt)">${ $filters.formatDate(entity.unpublishedAt, 'L') }</span></td>
                {% endif %}
                {% if type.enable_view_count %}
                <td class="text-light bg-secondary">${ entity.viewCount }</td>
                {% endif %}
                <td class="text-light" :class="{'bg-success':entity.public, 'bg-warning': !entity.public}">
                    {#<span class="badge bg-danger" v-if="!entity.public">{{ 'no'|trans }}</span>
                    <span class="badge bg-success" v-if="entity.public">{{ 'yes'|trans }}</span>#}
                    <div class="form-check form-switch form-check form-switch">
                        <input 
                            type="checkbox" 
                            v-model="entity.public" 
                            @change="updateEntity()" 
                            class="form-check-input form-check-input" 
                            :id="'public-' + entity.id"
                        >
                        <label class="form-check-label form-check-label" :for="'public-' + entity.id">
                            <small v-if="!entity.public">{{ 'no'|trans }}</small>
                            <small v-if="entity.public">{{ 'yes'|trans }}</small>
                        </label>
                    </div>
                </td>
                {% if type is empty %}<td>
                    ${entity.typeLabel}
                </td>{% endif %}
                <td>
                    {% include '@TigrisContent/admin/element/_element_index_options.html.twig' %}
                </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>
{% endblock %}