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

{% block title %}{{ 'wording.menu'|trans|parse_icons }}{% endblock %}
{% block main %}
<div class="p-2 my-3 border border-info rounded">
    {{ 'wording.help_info'|trans }}
</div>

<tigris-data-list route="tigris_base_admin_wording_data" :init-filters="{page:'{{ firstPage }}'}" v-slot="{entities, filters, loading, loadData, sort, begin, end, totalCount}">
{% embed '@TigrisBase/decorators/_card.html.twig' with {'class': ''} %}
    {% block body %}
    <form action="" method="GET" class="d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center">
            <div class="form-group">
                <label class="form-label"><small>{{ 'wording.page'|trans }}</small></label>
                <select class="form-control" v-model="filters.page">
                {% for page in pages %}
                    <option value="{{ page }}">{{ ('wording.page_name.' ~ page)|trans }}</option>
                {% endfor %}
                </select>
            </div>
        </div>
    </form>
    {% endblock %}

    {% block table %}
    <div class="list-group">
        <div class="list-group-item d-lg-flex p-0" v-for="entity in entities" :key="entity.name">
            <div class="col-lg-5 col-xl-4 bg-body-secondary p-2">
                <div class="d-flex justify-content-between">
                    <h5>${ entity.label }</h5>
                    <div>
                        <button-action route="tigris_base_admin_wording_edit" :route-params="{page: entity.page, name: entity.name}" type="secondary" :modal="true" title="{{ 'button.edit'|trans }}" v-on:formsaved="loadData()">{{ '.icon-pencil'|parse_icons }}</button-action>
                    </div>
                </div>
                <p>${ entity.description }</p>
            </div>
            <div class="col-lg-7 col-xl-8 p-2">
                <div v-html="entity.entity.content"></div>
            </div>
        </div>
    </div>
    {% endblock %}
{% endembed %}
</tigris-data-list>
{% endblock %}