{% extends 'layout.html.twig' %}

{% block stylesheets %}
    {{ parent() }}

    {{ encore_entry_link_tags('forms') }}
{% endblock %}

{% block title %}
    {{ 'main.customer.breadcrumbs.gestion.clientes' | trans }}
{% endblock %}

{% block breadcrumbs_current %}{{ 'main.customer.breadcrumbs.gestion.keywords' | trans }}{% endblock %}

{% block breadcrumbs %}
    <li class="c-breadcrumbs__item"><a class="c-breadcrumbs__link" href="{{ path('dashboard') }}">{{ 'main.app.name' | trans }}</a></li>
    <li class="c-breadcrumbs__item">
        <a class="c-breadcrumbs__link" href="{{ path('customer_view', {slug: CustomerId.getSlug()}) }}">
            {{ 'main.customer.breadcrumbs.perfil.name' | trans({ '%name%': CustomerId.getName() }) }}
        </a>
    </li>
    <li class="c-breadcrumbs__item">{{ 'main.customer.breadcrumbs.gestion.keywords' | trans }}</li>
{% endblock %}

{% block wrapper -%}

    {% include 'customer/menu/menu.html.twig' with {'menu': 'keywords'} %}

    <div id="Keywords" class="o-tabs__content">
        <div class="o-panel o-panel--full">
            <div class="o-panel__header o-panel__header--color-primary">
                <h4 class="o-panel__title">Listado de Keywords</h4>

                <div class="o-panel__actions o-panel__actions--color-primary">
                    <a href="{{ path('keyword_new', {slug: CustomerId.getSlug()}) }}" class="o-panel__actions-item tooltipped " data-tippy-content="Añadir keyword" title="Añadir keyword">
                        <i class="u-icon--user-plus"></i>
                    </a>
                </div>
            </div>


            <div class="o-panel__content o-panel__content--no-margin">
                <div class="o-table">
                    <div class="o-table__inner js-table__inner js-table-draggable kinetic-active start">
                        <table>
                            <thead>
                            <tr>
                                <th></th>
                                <th><a class="sortable" href="/customer/1?sort=keyword&amp;direction=asc&amp;page=1" title="Keywords">Keyword</a>
                                </th>
                                <th><a class="sortable" href="/usuarios/?sort=u.name&amp;direction=asc&amp;page=1" title="Grupo">Grupos</a>
                                </th>
                                <th>Fecha de creación</th>
                                <th class="o-table__th--actions">Acciones</th>
                            </tr>
                            </thead>
                            <tbody>
                            {%  for key in keywords %}
                                <tr>
                                    <td>
                                        {{ key.getId() }}
                                    </td>
                                    <td>{{ key.getKeyword() }}</td>
                                    <td>
                                        {%   for groups in key.getKeywordGroups() %}
                                            {{ groups.getGroupName() }},
                                        {%  else %}
                                            -
                                        {%  endfor %}
                                    </td>
                                    <td>{{  key.getCreatedAt()|date("m/d/Y") }}</td>
                                    <td>
                                        <div class="o-table__actions">
                                            <a href="{{ path('keyword_edit', {slug: CustomerId.getSlug(), keyword: key.getSlug()}) }}" class="o-table__actions-item tooltipped" data-tippy-content="Editar Keyword" title="Editar Keyword">
                                                <i class="u-icon--edit-2"></i>
                                            </a>

                                            <a href="/ros/public/customer/keywords/{{ key.getId() }}/delete" class="o-table__actions-item o-table__actions-item--color-delete tooltipped js-entity-delete" data-tippy-content="Borrar Keyword" data-form="delete-{{ key.getId() }}" data-modal-title="¿Quieres elimar la keyword {{ key.getKeyword() }}?" data-modal-text="La keyword y sus resultados serán borrados de la Base de Datos">
                                                <i class="u-icon--trash"></i>
                                            </a>

                                            <div class="u-hide">
                                                <form id="delete-{{ key.getId() }}" action="/ros/public/customer/keywords/{{ key.getId() }}/delete" method="POST"></form>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            {%  endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    {{ encore_entry_script_tags('forms') }}
{% endblock %}