{% extends '@TigrisBase/user/my_account_layout.html.twig' %}

{% block content %}
<h1>
{% if types|length == 1 %}
{{ ((types|keys|first) ~ '.list')|trans }}
{% else %}
{{ 'content.element.list'|trans }}
{% endif %}
</h1>
<tigris-data-list route="tigris_content_element_userdata" :init-filters='{"search":"", "type":"", "public":""}' v-slot="{loadData, entities, filters, totalCount, begin, end, sort}">
{% embed '@TigrisBase/decorators/_card.html.twig' with {'class': ''} %}
    {% block header %}
        {% if types|length == 1 %}
        <button-action v-on:formsaved="loadData()" route="tigris_content_element_new" :modal="true" :route-params="{type: '{{ types|keys|first }}'}" type="success">
            <span class="btn-label">{{ '.icon-plus'|parse_icons }}</span> {{ ((types|keys|first) ~ '.add.add')|trans }}
        </button-action>
        {% else %}
        <div class="btn-group" role="group">
            <button id="btn-add-element" type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                {{ '.icon-plus'|parse_icons }}</span> {{ 'content.element.add.add'|trans }}
            </button>
            <div class="dropdown-menu" aria-labelledby="btn-add-element">
            {% for name, type in types %}
            <button-action v-on:formsaved="loadData()" route="tigris_content_element_new" :modal="true" :route-params="{type: '{{ name }}'}" class="dropdown-item">
                {{ ('content.element.type.' ~ name)|trans }}
            </button-action>
            {% endfor %}
            </div>
        </div>
        {% endif %}

    {% endblock %}
    {% block body %}
    <div class="hstack flex-wrap">
        {% if types|length > 1 %}
    
        <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 }}">{{ (type.name ~ ".label")|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 class="ms-auto d-none d-md-block">
            <div class="form-group">
                <label><small>{{ 'results_per_page'|trans }}</small></label>
                <item-count-select></item-count-select>
            </div>
        </div>
    </div>
    {% 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>
                <th class="d-none d-lg-table-cell"><sort-item label="{{ 'content.element.createdAt'|trans }}" value="createdAt" v-on:change="sort"></sort-item></th>
                <th class="d-none d-lg-table-cell"><sort-item label="{{ 'content.element.updatedAt'|trans }}" value="updatedAt" v-on:change="sort"></sort-item></th>
                {#<th><sort-item label="{{ 'content.element.publishedAt'|trans }}" value="publishedAt" v-on:change="sort"></sort-item></th>#}
                <th><sort-item label="{{ 'content.element.status.public'|trans }}" value="public" v-on:change="sort"></sort-item></th>
                {% if types|length > 1 %}<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><b>${ entity.name }</b></td>
                <td class="d-none d-lg-table-cell">${ entity.createdAt | formatDate }</td>
                <td class="d-none d-lg-table-cell">
                    <span v-show="entity.updatedAt != entity.createdAt">${ entity.updatedAt | formatDate }</span>
                    <span v-show="entity.updatedAt == entity.createdAt">-</span>
                </td>
                {#<td>${ entity.publishedAt | formatDate }</td>#}
                <td>
                    <span class="badge bg-danger" v-if="!entity.public">{{ 'no'|trans }}</span>
                    <span class="badge bg-success" v-if="entity.public">{{ 'yes'|trans }}</span>
                </td>
                {% if types|length > 1 %}
                <td>${entity.typeLabel}</td>
                {% endif %}
                <td>
                    <div class="btn-group btn-group-sm">
                        <button-action v-on:formsaved="loadData()" route="tigris_content_element_show_id" :route-params="{id:entity.id, type:entity.type}" type="primary" target="_blank">{{ '.icon-eye'|parse_icons }}</button-action>
                        <button-action v-on:formsaved="loadData()" route="tigris_content_element_edit" :route-params="{id:entity.id}" type="secondary">{{ '.icon-pencil-alt'|parse_icons }}</button-action>
                        <button-action v-on:formsaved="loadData()" route="tigris_content_element_remove" :modal="true" :route-params="{id:entity.id}" type="danger" v-if="!entity.public">{{ '.icon-trash'|parse_icons }}</button-action>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
    {% endblock %}
    {% block footer %}
    <div class="data-list-footer">
        <em>{{ 'data_count'|trans({'%begin%':'${begin}', '%end%':'${end}', '%total%':'${totalCount}'}) }}</em>
        <pagination></pagination>
    </div>
    {% endblock %}
{% endembed %}
</tigris-data-list>
{% endblock %}