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

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

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

{% block title %}
    {{ 'main.uikit.breadcrumbs.uikit' | trans }}
{% endblock %}

{% block breadcrumbs_current %}{{ 'main.uikit.breadcrumbs.uikit' | 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">{{ 'main.uikit.breadcrumbs.uikit' | trans }}</li>
{% endblock %}

{% block wrapper -%}
    <div class="u-uikit">
        <h3 class="u-uikit__title"># Typography</h3>

        <div class="u-uikit__block">
            {% for i in ['light', 'regular', 'medium', 'bold'] %}
                <div style="font-size: var(--font-xxl); line-height: 180%; font-family: var(--font-family-primary); font-weight: var(--font-weight-{{ i }});">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                </div>
            {% endfor %}
        </div>

        <h3 class="u-uikit__title"># Color theme</h3>

        <div class="u-uikit__block u-hide-on-mobile">
            <div class="u-uikit__color-row">
                <span class="u-uikit__color-row__title">Black & white</span>
                <div class="u-uikit__color-row__list">
                    <div class="u-uikit__color" style="background-color: var(--color-black)"><span>black</span></div>
                    <div class="u-uikit__color" style="background-color: var(--color-white)"><span>white</span></div>
                </div>
            </div>

            {% for i in ['primary', 'primary-alt', 'secondary', 'success', 'error', 'info', 'warning', 'gray'] %}
                <div class="u-uikit__color-row">
                    <span class="u-uikit__color-row__title">Color {{ i }}</span>
                    <div class="u-uikit__color-row__list">
                        <div class="u-uikit__color" style="background-color: var(--color-{{ i }}_100)"><span>100</span></div>
                        <div class="u-uikit__color" style="background-color: var(--color-{{ i }}_200)"><span>200</span></div>
                        <div class="u-uikit__color" style="background-color: var(--color-{{ i }}_300)"><span>300</span></div>
                        <div class="u-uikit__color" style="background-color: var(--color-{{ i }}_400)"><span>400</span></div>
                        <div class="u-uikit__color" style="background-color: var(--color-{{ i }})"><span>base</span></div>
                        <div class="u-uikit__color" style="background-color: var(--color-{{ i }}_600)"><span>600</span></div>
                        <div class="u-uikit__color" style="background-color: var(--color-{{ i }}_700)"><span>700</span></div>
                        <div class="u-uikit__color" style="background-color: var(--color-{{ i }}_800)"><span>800</span></div>
                        <div class="u-uikit__color" style="background-color: var(--color-{{ i }}_900)"><span>900</span></div>
                    </div>
                </div>
            {% endfor %}
        </div>

        <h3 class="u-uikit__title"># Grid system</h3>

        <div class="u-uikit__block">
            <div class="o-grid-layout">
                <div class="row">
                    <div class="col-xs-12 col-md-12"><div class="u-uikit__muestra">item</div></div>
                    <div class="col-xs-12 col-md-6"><div class="u-uikit__muestra">item</div></div>
                    <div class="col-xs-12 col-md-6"><div class="u-uikit__muestra">item</div></div>
                </div>

                <div class="row">
                    <div class="col-xs-12 col-md-4"><div class="u-uikit__muestra">item</div></div>
                    <div class="col-xs-12 col-md-4"><div class="u-uikit__muestra">item</div></div>
                    <div class="col-xs-12 col-md-4"><div class="u-uikit__muestra">item</div></div>
                </div>
            </div>
        </div>

        <h3 class="u-uikit__title"># Buttons</h3>

        <div class="u-uikit__block">
            <div class="o-grid o-grid--uikit">
                <a href="#" class="o-button o-button--color-primary">Botón primario</a>
                <a href="#" class="o-button o-button--color-secondary">Botón secundario</a>
                <a href="#" class="o-button o-button--color-secondary o-button--size-tiny">Botón tiny</a>
                <a href="#" class="o-button o-button--color-success">Botón success</a>
                <a href="#" class="o-button o-button--color-error">Botón error</a>
                <a href="#" class="o-button o-button--color-info">Botón info</a>
                <a href="#" class="o-button o-button--color-warning">Botón warning</a>
                <a href="#" class="o-button o-button--submit">Botón submit</a>
                <a href="#" class="o-button o-button--color-secondary o-button--size-full">Botón full</a>
            </div>
        </div>

        <h3 class="u-uikit__title"># Label object</h3>

        <div class="u-uikit__block">
            <div class="o-grid o-grid--uikit">
                <span class="o-label o-label--0">Sin información</span>
                <span class="o-label o-label--1">Pendiente</span>
                <span class="o-label o-label--2">Completado</span>
            </div>

        </div>

        <h3 class="u-uikit__title"># Flash messages</h3>

        <div class="u-uikit__block">
            <div class="o-grid o-grid--uikit">
                <a href="#" class="o-button o-button--color-success js-message-success">Mensaje éxito</a>
                <a href="#" class="o-button o-button--color-info js-message-info">Mensaje info</a>
                <a href="#" class="o-button o-button--color-warning js-message-warning">Mensaje aviso</a>
                <a href="#" class="o-button o-button--color-error js-message-error">Mensaje error</a>
            </div>
        </div>

        <h3 class="u-uikit__title"># Card object</h3>

        <div class="u-uikit__block">
            <div class="o-grid o-grid--columns-3">
                <div class="o-grid__item">
                    <div class="o-card">
                        <div class="o-card__header">
                            <div class="o-card__cover-container js-object-fit">
                                <img src="https://pbs.twimg.com/profile_banners/715535722086801408/1546854618/1500x500" alt="" class="o-card__cover-image">
                            </div>

                            <img src="https://avatars.io/twitter/la_mutua/large" alt="la_mutua" class="o-card__avatar">
                        </div>

                        <div class="o-card__info">
                            <div class="o-card__info__category o-label o-label--0">Sin escuchas</div>
                            <h4 class="o-card__info__title">Mutua Madrileña</h4>
                            <span class="o-card__info__subtitle"><a href="https://twitter.com/la_mutua" target="_blank">@la_mutua</a></span>

                            <a href="#" class="o-card__button">Ver perfil</a>
                        </div>
                    </div>
                </div>

                <div class="o-grid__item">
                    <div class="o-card">
                        <div class="o-card__header">
                            <div class="o-card__cover-container js-object-fit">
                                <img src="https://pbs.twimg.com/profile_banners/1139001474/1542572644/1500x500" alt="" class="o-card__cover-image">
                            </div>

                            <img src="https://avatars.io/twitter/sefutbol/large" alt="sefutbol" class="o-card__avatar">
                        </div>

                        <div class="o-card__info">
                            <div class="o-card__info__category o-label o-label--1">Pendiente</div>
                            <h4 class="o-card__info__title">Selección Española de Fútbol</h4>
                            <span class="o-card__info__subtitle"><a href="https://twitter.com/sefutbol" target="_blank">@sefutbol</a></span>

                            <a href="#" class="o-card__button">Ver perfil</a>
                        </div>
                    </div>
                </div>

                <div class="o-grid__item">
                    <div class="o-card">
                        <div class="o-card__header">
                            <div class="o-card__cover-container js-object-fit">
                                <img src="https://pbs.twimg.com/profile_banners/2672985499/1540897517/1500x500" alt="" class="o-card__cover-image">
                            </div>

                            <img src="https://avatars.io/twitter/habitant_es/large" alt="habitant_es" class="o-card__avatar">
                        </div>

                        <div class="o-card__info">
                            <div class="o-card__info__category o-label o-label--2">Listo</div>
                            <h4 class="o-card__info__title">Habitant</h4>
                            <span class="o-card__info__subtitle"><a href="https://twitter.com/habitant_es" target="_blank">@habitant_es</a></span>

                            <a href="#" class="o-card__button">Ver perfil</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <h3 class="u-uikit__title"># Panel object</h3>

        <div class="u-uikit__block">

            <div class="o-panel o-panel--full">
                <div class="o-panel__header o-panel__header--color-primary">
                    <h4 class="o-panel__title">OBJECT PANEL COLOR PRIMARY</h4>

                    <div class="o-panel__actions o-panel__actions--color-primary">
                        <a href="" class="o-panel__actions-item o-panel__actions-item--no-effect">
                            <i class="u-icon--delete"></i>
                        </a>
                    </div>
                </div>
                <div class="o-panel__content">
                    Contenido
                </div>
            </div>

            <div class="o-panel o-panel--full">
                <div class="o-panel__header o-panel__header--color-dark">
                    <h4 class="o-panel__title">OBJECT PANEL COLOR DARK</h4>

                    <div class="o-panel__actions o-panel__actions--color-dark">
                        <a href="" class="o-panel__actions-item o-panel__actions-item--no-effect">
                            <i class="u-icon--delete"></i>
                        </a>
                    </div>
                </div>
                <div class="o-panel__content">
                    Contenido
                </div>
            </div>

            <div class="o-panel">
                <div class="o-panel__header o-panel__header--tiny">
                    <h4 class="o-panel__title">OBJECT PANEL TINY </h4>

                    <div class="o-panel__actions o-panel__actions--color-primary">
                        <a href="" class="o-panel__actions-item o-panel__actions-item--no-effect">
                            <i class="u-icon--delete"></i>
                        </a>
                    </div>
                </div>
                <div class="o-panel__content ">
                    Contenido
                </div>
            </div>

            <div class="o-panel o-panel--full">
                <div class="o-panel__header"><h4 class="o-panel__title">Panel con aviso</h4></div>

                <div class="o-panel__info">
                    Aquí puedes incluir todo tipo de mensajes de aviso
                </div>

                <div class="o-panel__content">
                    Contenido
                </div>
            </div>

        </div>

        <h3 class="u-uikit__title"># Cover</h3>

        <div class="u-uikit__block">
            <div class="o-panel o-panel--full o-panel--cover">
                <div class="o-panel__content o-panel__cover">
                    <div class="o-panel__cover__bar-sup">
                        <div class="o-panel__cover__bar-sup__group">
                            <a href="#" class="o-panel__cover__bar-sup__action tooltipped" data-tippy-content="Ver red creada"  data-original-title="Creación nodos">
                                <i class="u-icon--skip-forward" aria-hidden="true"></i>
                            </a>

                            <a href="#" class="o-panel__cover__bar-sup__action tooltipped" data-tippy-content="Ver red creada"  data-original-title="Aplicar algoritmo">
                                <i class="u-icon--zap" aria-hidden="true"></i>
                            </a>

                            <a target="_blank" href="#" class="o-panel__cover__bar-sup__action tooltipped" data-tippy-content="Ver red creada"  data-original-title="Ver red creada">
                                <i class="u-icon--globe" aria-hidden="true"></i>
                            </a>

                            <a href="#" class="o-panel__cover__bar__action tooltipped" data-tippy-content="Editar marca Habitant"  data-original-title="Editar marca Habitant">
                                <i class="u-icon--edit-2"></i>
                            </a>

                            <a href="#" class="o-panel__cover__bar__action o-panel__cover__bar__action--color-delete tooltipped js-keyword-delete" data-tippy-content="Borrar escucha" data-form="keyword-delete-5c683d4766f4747411000033" data-modal-title="¿Quieres eliminar la marca Habitant?"
                               data-modal-text="Esto borrará definitivamente la marca junto a todas sus escuchas y la red generada"  data-original-title="Borrar marca">
                                <i class="u-icon--trash"></i>
                            </a>

                            <div class="u-hide">
                                <form id="keyword-delete-5c683d4766f4747411000033" action="#" method="POST"></form>
                            </div>
                        </div>
                    </div>

                    <div class="o-panel__cover__avatar js-object-fit"><img src="https://avatars.io/twitter/habitant_es/large" alt=""></div>
                    <div class="o-panel__cover__image" style="background-image: url('https://pbs.twimg.com/profile_banners/2672985499/1540897517/1500x500')"></div>
                </div>

                <div class="o-panel__cover__bar">
                    <div class="o-panel__cover__bar__group">
                        <div class="o-panel__cover__bar__group__item"><strong>Habitant</strong>
                            <span><a href="https://twitter.com/habitant_es" target="_blank">@habitant_es</a></span></div>
                        <div class="o-panel__cover__bar__group__item"><strong>Nº tweets</strong>
                            <span>66</span></div>
                        <div class="o-panel__cover__bar__group__item"><strong>Nº de escuchas</strong>
                            <span>1</span></div>
                        <div class="o-panel__cover__bar__group__item"><strong>Estado</strong>
                            <span><div class="o-label o-label--2">Listo</div></span></div>
                    </div>
                </div>
            </div>
        </div>

        <h3 class="u-uikit__title"># Tables</h3>

        <div class="u-uikit__block">
            <div class="o-panel">
                <div class="o-panel__header o-panel__header--tiny">
                    <h4 class="o-panel__title">FIXED TABLE </h4>
                </div>

                <div class="o-panel__content o-panel__content--no-margin">
                    <table class="o-table o-table--fixed">
                        <thead>
                        <tr>
                            <th class="o-table__td-small"></th>
                            <th>Nombre del término</th>
                            <th>Número de escuchas</th>
                            <th>Cliente</th>
                            <th class="o-table__th--actions">Acciones</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <div class="o-table__avatar js-object-fit"><img src="https://avatars.io/twitter/sefutbol/medium" alt=""></div>
                            </td>

                            <td>@sefutbol</td>
                            <td>1 escucha/s</td>
                            <td>Pixel Division</td>
                            <td class="o-table__actions-td">
                                <div class="o-table__actions">
                                    <a href="#" class="o-table__actions-item tooltipped" data-tippy-content="Editar marca @sefutbol"  data-original-title="Editar marca @sefutbol">
                                        <i class="u-icon--edit-2" aria-hidden="true"></i>
                                    </a>

                                    <a href="#" class="o-table__actions-item o-table__actions-item--color-delete tooltipped" data-tippy-content="Borrar marca"  data-original-title="Borrar marca">
                                        <i class="u-icon--trash"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="o-table__avatar js-object-fit"><img src="https://avatars.io/twitter/pixeldivision/medium" alt=""></div>
                            </td>

                            <td>@pixeldivision</td>
                            <td>1 escucha/s</td>
                            <td>Pixel Division</td>
                            <td class="o-table__actions-td">
                                <div class="o-table__actions">
                                    <a href="#" class="o-table__actions-item tooltipped" data-tippy-content="Editar marca @pixeldivision"  data-original-title="Editar marca @pixeldivision">
                                        <i class="u-icon--edit-2" aria-hidden="true"></i>
                                    </a>

                                    <a href="#" class="o-table__actions-item o-table__actions-item--color-delete tooltipped" data-tippy-content="Borrar marca"  data-original-title="Borrar marca">
                                        <i class="u-icon--trash"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="o-table__avatar js-object-fit"><img src="https://avatars.io/twitter/habitant_es/medium" alt=""></div>
                            </td>

                            <td>@habitant_es</td>
                            <td>1 escucha/s</td>
                            <td>Pixel Division</td>
                            <td class="o-table__actions-td">
                                <div class="o-table__actions">
                                    <a href="#" class="o-table__actions-item tooltipped" data-tippy-content="Editar marca @habitant_es"  data-original-title="Editar marca @habitant_es">
                                        <i class="u-icon--edit-2" aria-hidden="true"></i>
                                    </a>

                                    <a href="#" class="o-table__actions-item o-table__actions-item--color-delete tooltipped" data-tippy-content="Borrar marca"  data-original-title="Borrar marca">
                                        <i class="u-icon--trash"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="o-panel">
                <div class="o-panel__header o-panel__header--tiny">
                    <h4 class="o-panel__title">NO FIXED TABLE </h4>
                </div>

                <div class="o-panel__content o-panel__content--no-margin">
                    <table class="o-table">
                        <thead>
                        <tr>
                            <th class="o-table__td-small"></th>
                            <th>Nombre del término</th>
                            <th>Número de escuchas</th>
                            <th>Cliente</th>
                            <th class="o-table__th--actions">Acciones</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <div class="o-table__avatar js-object-fit"><img src="https://avatars.io/twitter/sefutbol/medium" alt=""></div>
                            </td>

                            <td>@sefutbol</td>
                            <td>1 escucha/s</td>
                            <td>Pixel Division</td>
                            <td class="o-table__actions-td">
                                <div class="o-table__actions">
                                    <a href="#" class="o-table__actions-item tooltipped" data-tippy-content="Editar marca @sefutbol"  data-original-title="Editar marca @sefutbol">
                                        <i class="u-icon--edit-2" aria-hidden="true"></i>
                                    </a>

                                    <a href="#" class="o-table__actions-item o-table__actions-item--color-delete tooltipped" data-tippy-content="Borrar marca"  data-original-title="Borrar marca">
                                        <i class="u-icon--trash"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="o-table__avatar js-object-fit"><img src="https://avatars.io/twitter/pixeldivision/medium" alt=""></div>
                            </td>

                            <td>@pixeldivision</td>
                            <td>1 escucha/s</td>
                            <td>Pixel Division</td>
                            <td class="o-table__actions-td">
                                <div class="o-table__actions">
                                    <a href="#" class="o-table__actions-item tooltipped" data-tippy-content="Editar marca @pixeldivision"  data-original-title="Editar marca @pixeldivision">
                                        <i class="u-icon--edit-2" aria-hidden="true"></i>
                                    </a>

                                    <a href="#" class="o-table__actions-item o-table__actions-item--color-delete tooltipped" data-tippy-content="Borrar marca"  data-original-title="Borrar marca">
                                        <i class="u-icon--trash"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="o-table__avatar js-object-fit"><img src="https://avatars.io/twitter/habitant_es/medium" alt=""></div>
                            </td>

                            <td>@habitant_es</td>
                            <td>1 escucha/s</td>
                            <td>Pixel Division</td>
                            <td class="o-table__actions-td">
                                <div class="o-table__actions">
                                    <a href="#" class="o-table__actions-item tooltipped" data-tippy-content="Editar marca @habitant_es"  data-original-title="Editar marca @habitant_es">
                                        <i class="u-icon--edit-2" aria-hidden="true"></i>
                                    </a>

                                    <a href="#" class="o-table__actions-item o-table__actions-item--color-delete tooltipped" data-tippy-content="Borrar marca"  data-original-title="Borrar marca">
                                        <i class="u-icon--trash"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="o-panel" style="width: 400px;">
                <div class="o-panel__header o-panel__header--color-dark">
                    <h4 class="o-panel__title">TINY TABLE</h4>
                </div>

                <div class="o-panel__content o-panel__content--no-margin">
                    <table class="o-table o-table--size-tiny">
                        <thead>
                        <tr>
                            <th></th>
                            <th>Nombre</th>
                            <th>Engagement %</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <div class="o-table__avatar js-object-fit"><img src="https://avatars.io/twitter/Making_Science_/large" alt=""></div>
                            </td>
                            <td><a href="https://twitter.com/Making_Science_" target="_blank"><strong>@Making_Science_</strong></a></td>
                            <td>9.79 %</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="o-table__avatar js-object-fit"><img src="https://avatars.io/twitter/pepechamorro/large" alt=""></div>
                            </td>
                            <td><a href="https://twitter.com/pepechamorro" target="_blank"><strong>@pepechamorro</strong></a></td>
                            <td>9.58 %</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="o-table__avatar js-object-fit"><img src="https://avatars.io/twitter/DICeducacion/large" alt=""></div>
                            </td>
                            <td><a href="https://twitter.com/DICeducacion" target="_blank"><strong>@DICeducacion</strong></a></td>
                            <td>7.91 %</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="o-table__avatar js-object-fit"><img src="https://avatars.io/twitter/BMIND_ES/large" alt=""></div>
                            </td>
                            <td><a href="https://twitter.com/BMIND_ES" target="_blank"><strong>@BMIND_ES</strong></a></td>
                            <td>6.87 %</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="o-table__avatar js-object-fit"><img src="https://avatars.io/twitter/TimHortonsES/large" alt=""></div>
                            </td>
                            <td><a href="https://twitter.com/TimHortonsES" target="_blank"><strong>@TimHortonsES</strong></a></td>
                            <td>2.7 %</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="o-table__avatar js-object-fit"><img src="https://avatars.io/twitter/AxiComSpain/large" alt=""></div>
                            </td>
                            <td><a href="https://twitter.com/AxiComSpain" target="_blank"><strong>@AxiComSpain</strong></a></td>
                            <td>2.5 %</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="o-table__avatar js-object-fit"><img src="https://avatars.io/twitter/josellinares/large" alt=""></div>
                            </td>
                            <td><a href="https://twitter.com/josellinares" target="_blank"><strong>@josellinares</strong></a></td>
                            <td>2.29 %</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="o-table__avatar js-object-fit"><img src="https://avatars.io/twitter/DQnA/large" alt=""></div>
                            </td>
                            <td><a href="https://twitter.com/DQnA" target="_blank"><strong>@DQnA</strong></a></td>
                            <td>1.87 %</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>

        <h3 class="u-uikit__title"># Forms</h3>

        <div class="u-uikit__block">
            <form name="user" method="post" class="o-form" enctype="multipart/form-data">



                <div class="o-panel o-panel--full">
                    <div class="o-panel__header o-panel__header--color-gray-light">
                        <h4 class="o-panel__title">Datos personales</h4>
                    </div>

                    <div class="o-panel__content o-grid-layout">
                        <div class="row">
                            <div class="col-xs-12 col-md-6 col-lg-4">
                                <div class="o-form__input">
                                    <label for="user_firstname" class="required">Nombre</label>
                                    <input type="text" id="user_firstname" name="user[firstname]" required="required" placeholder="Introduce el nombre del usuario" class="o-form__input-field" value="John">
                                    <span class="error-message">    </span>
                                </div>
                            </div>

                            <div class="col-xs-12 col-md-6 col-lg-4">
                                <div class="o-form__input">
                                    <label for="user_lastname" class="required">Apellidos</label>
                                    <input type="text" id="user_lastname" name="user[lastname]" required="required" placeholder="Introduce los apellidos del usuario" class="o-form__input-field" value="Doe">
                                    <span class="error-message">    </span>
                                </div>
                            </div>

                            <div class="col-xs-12 col-md-6 col-lg-4">
                                <div class="o-form__input">
                                    <label for="user_dni">DNI</label>
                                    <input type="text" id="user_dni" name="user[dni]" placeholder="Introduce el DNI del usuario" class="o-form__input-field" value="1557788jM">
                                    <span class="error-message">    </span>
                                </div>
                            </div>

                            <div class="col-xs-12 col-md-6 col-lg-4">
                                <div class="o-form__input">
                                    <label for="user_email" class="required">Email</label>
                                    <input type="email" id="user_email" name="user[email]" required="required" placeholder="Introduce el email del usuario" class="o-form__input-field" value="jdoe@email.com">
                                    <span class="error-message">    </span>
                                </div>
                            </div>

                            <div class="col-xs-12 col-md-6 col-lg-4">
                                <div class="o-form__input">
                                    <label for="user_phonenumber">Número de teléfono</label>
                                    <input type="tel" id="user_phonenumber" name="user[phonenumber]" placeholder="Introduce el número de teléfono del usuario" class="o-form__input-field" value="999888777">
                                    <span class="error-message">    </span>
                                </div>
                            </div>

                            <div class="col-xs-12 col-md-6 col-lg-4">
                                <div class="o-form__input">
                                    <label for="user_foto">Foto de perfil</label>
                                    <input type="file" id="user_foto" name="user[foto]" class="o-form__input-field">
                                    <label for="user_foto"><i class="u-icon--upload"></i>Seleccionar foto de perfil ...</label>
                                    <span class="error-message">    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="o-panel o-panel--full">
                    <div class="o-panel__header o-panel__header--color-gray-light">
                        <h4 class="o-panel__title">Datos de acceso</h4>
                    </div>

                    <div class="o-panel__content o-grid-layout">
                        <div class="row">
                            <div class="col-xs-12 col-md-6 col-lg">
                                <div class="o-form__input">
                                    <label for="user_username" class="required">Nombre usuario</label>
                                    <input type="text" id="user_username" name="user[username]" required="required" placeholder="Introduce el nombre de usuario" class="o-form__input-field" value="jdoe">
                                    <span class="error-message">    </span>
                                </div>
                            </div>

                            <div class="col-xs-12 col-md-6 col-lg">
                                <div class="o-form__input">
                                    <label for="user_rol" class="required">Rol</label>
                                    <select id="user_rol" name="user[rol]" class="o-form__input-field">
                                        <option value="ROLE_SUPER_ADMIN" >Super administrador</option>
                                        <option value="ROLE_ADMIN">Administrador</option>
                                        <option value="ROLE_USER">Usuario</option>
                                    </select>
                                    <span class="error-message">    </span>
                                </div>
                            </div>

                            <div class="col-xs-12 col-md-6 col-lg">
                                <div class="o-form__input">
                                    <label for="user_password_pass">Contraseña</label>
                                    <input type="password" id="user_password_pass" name="user[password][pass]" placeholder="******" class="o-form__input-field">
                                    <span class="error-message">    </span>
                                </div>
                            </div>
                            <div class="col-xs-12 col-md-6 col-lg">
                                <div class="o-form__input">
                                    <label for="user_password_confirm">Repite contraseña</label>
                                    <input type="password" id="user_password_confirm" name="user[password][confirm]" placeholder="******" class="o-form__input-field">
                                    <span class="error-message">    </span>
                                </div>
                            </div>
                        </div>

                        <div class="o-form__bottom">
                            <div><button type="submit" id="user_submit" name="user[submit]" class="o-button o-button--submit">Guardar cambios</button></div>
                        </div>
                    </div>
                </div>

                <input type="hidden" id="user__token" name="user[_token]" value="G9Kcj_59qvnvwIM_Shm362rXn0WTCJMwEdThPR0kJkU"></form>
        </div>

        <h3 class="u-uikit__title"># Filter form</h3>

        <div class="u-uikit__block">
            <div class="o-panel__content o-panel__content-filter">
                <form name="user_filter" method="get" class="o-filter o-form">
                    <div class="o-gallery o-gallery--filter">

                        <div class="o-filter__input">
                            <label for="user_filter_username">Nombre usuario</label>
                            <input type="text" id="user_filter_username" name="user_filter[username]" placeholder="Nombre de usuario">

                        </div>

                        <div class="o-filter__input">
                            <label for="user_filter_name">Nombre</label>
                            <input type="text" id="user_filter_name" name="user_filter[name]" placeholder="Nombre">

                        </div>

                        <div class="o-filter__input">
                            <label for="user_filter_email">Email</label>
                            <input type="text" id="user_filter_email" name="user_filter[email]" placeholder="Email">

                        </div>


                        <div class="o-filter__input">
                            <label for="user_filter_rol">Rol</label>
                            <select id="user_rl" name="user[ro" class="o-form__input-field">
                                <option value="ROLE_SUPER_ADMIN" >Super administrador</option>
                                <option value="ROLE_ADMIN">Administrador</option>
                                <option value="ROLE_USER">Usuario</option>
                            </select>
                        </div>

                        <div class="o-filter__submit ">
                            <a href="/usuarios/" class="o-panel__actions-item o-panel__actions-item--no-effect">
                                <i class="u-icon--rotate-ccw"></i>
                            </a>
                            <div><button type="submit" id="user_filter_save" name="user_filter[save]" class="o-filter__submit o-button o-button--inline">Filtrar</button></div>
                        </div>
                    </div>


                </form>
            </div>
        </div>

        <h3 class="u-uikit__title"># Tabs</h3>

        <div class="u-uikit__block">
            <nav class="o-tabs">
                <ul class="o-tabs__list tabs">
                    <li class="o-tabs__item tab"><a class="active" href="#escuchas"><i class="u-icon--headphones"></i> Escuchas</a></li>
                    <li class="o-tabs__item tab"><a href="#ranking"><i class="u-icon--briefcase"></i>Listado</a></li>
                    <li class="o-tabs__item tab"><a href="#red"><i class="u-icon--globe"></i> Redes</a></li>
                </ul>
            </nav>

            <div id="escuchas" class="o-tabs__content">Contenido tabs 1</div>

            <div id="ranking" class="o-tabs__content">Contenido tabs 2</div>

            <div id="red" class="o-tabs__content">Contenido tabs 3</div>
        </div>

        <h3 class="u-uikit__title"># Pagination</h3>

        <div class="u-uikit__block">
            <div class="u-flex-space-between">
                <div>Encontrados 101 usuarios</div>

                <div class="c-pagination">
                    <span class="c-pagination__item c-pagination__item--current">1</span>
                    <a class="c-pagination__item" href="#">2</a>
                    <a class="c-pagination__item" href="#">3</a>
                    <a class="c-pagination__item" href="#">4</a>
                    <a class="c-pagination__item" href="#">5</a>

                    <a class="c-pagination__item" href="#"><i class="u-icon--chevron-right"></i></a>

                    <a class="c-pagination__item" href="#"><i class="u-icon--chevrons-right"></i></a>
                </div>

            </div>
        </div>

        <h3 class="u-uikit__title"># Steps object</h3>

        <div class="u-uikit__block">
            <div class="o-steps">
                <ol class="o-steps__list">
                    <li class="step step--completed ">
                        <a href="#1" class="step__label">Inicio</a>

                        <span class="step__separator" aria-hidden="true"><i class="u-icon--chevron-right"></i></span>

                        <div class="step__circle" aria-hidden="true">
                            <i class="u-icon--check"></i>                 </div>
                    </li>
                    <li class="step  step--current">
                        <a href="#2" class="step__label">Listado usuarios</a>

                        <span class="step__separator" aria-hidden="true"><i class="u-icon--chevron-right"></i></span>

                        <div class="step__circle" aria-hidden="true">
                            2                 </div>
                    </li>
                    <li class="step  ">
                        <a href="#3" class="step__label">Plantilla email</a>

                        <span class="step__separator" aria-hidden="true"><i class="u-icon--chevron-right"></i></span>

                        <div class="step__circle" aria-hidden="true">
                            3                 </div>
                    </li>
                    <li class="step  ">
                        <a href="#4" class="step__label">Resumen</a>


                        <div class="step__circle" aria-hidden="true">
                            4                 </div>
                    </li>
                </ol>
            </div>
        </div>
    </div>
{% endblock %}

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

    {{ encore_entry_script_tags('tabs') }}
    {{ encore_entry_script_tags('forms') }}

    <script>
        $(document).ready(function ($) {
            $('.js-message-success').click(function (event) {
                event.preventDefault();
                Swal.fire({
                    type: 'success',
                    title: 'Marca creada con éxito',
                    showConfirmButton: false,
                    timer: 2000,
                    animation: false,
                })
            });

            $('.js-message-info').click(function (event) {
                event.preventDefault();
                Swal.fire({
                    type: 'info',
                    title: 'Se han actualizado los registros',
                    showConfirmButton: false,
                    timer: 2000,
                    animation: false,
                })
            });

            $('.js-message-warning').click(function (event) {
                event.preventDefault();
                Swal.fire({
                    title: '¿Estás seguro?',
                    text: "No podrás deshacer este cambio!",
                    type: 'warning',
                    animation: false,
                    showCancelButton: true,
                    confirmButtonColor: '#9b59b6',
                    cancelButtonColor: '#666',
                    confirmButtonText: 'Si, borrar marca!',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.value
                    )
                    {
                        Swal.fire(
                            '¡Éxito!',
                            'La marca ha sido borrada',
                            'success'
                        )
                    }
                })
            });

            $('.js-message-error').click(function (event) {
                event.preventDefault();
                Swal.fire({
                    type: 'error',
                    title: 'Error 500',
                    text: 'Ha ocurrido un error inesperado',
                    timer: 2000,
                    animation: false,
                })
            });
        });
    </script>

{% endblock %}