{% extends "admin/base.html.twig" %}

{% block module_content %}
    <div class="page-title">
        <div class="title_left">
            <h3>Destacar palabras para el slide id #{{ entity.id }}</h3>
        </div>    
    </div>

    {{ include('admin/_flash_messages.html.twig') }}

    <div class="clearfix"></div>

    <div class="wrapper-preview">
        <h5>El texto en el slide se visualizaría de la siguiente manera:</h5>
        <div class="preview">
            {{ entity.textoInformativo|customizeTextHome(entity.palabrasDestacadas)|raw }}
        </div>
    </div>
  
    {{ form_start(form) }}
    
    <ul>
    {% for choice in form.palabrasDestacadas.vars.choices %}
        <li>
            <input 
            type="checkbox" 
            id="{{ form.palabrasDestacadas.vars.id }}_{{ loop.index - 1 }}" 
            name="{{ form.palabrasDestacadas.vars.full_name }}[{{ loop.index - 1 }}]" 
            value="{{ choice.value }}">
            <label for="{{ form.palabrasDestacadas.vars.id }}_{{ loop.index - 1 }}">{{ choice.label }}</label>
        </li>
    {% endfor %}
    </ul>
    {% do form.palabrasDestacadas.setRendered %}

    <div class="ln_solid"></div>

    <div class="form-group">
      <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
        <a href="{{ path('admin_slides_list') }}" class="btn btn-primary">Volver al listado</a>
        {{ form_widget(form.save, { 'attr': {'class': 'btn btn-success'} }) }}
      </div>
    </div>

    {{ form_end(form) }}

    <style>
        .wrapper-preview {
            padding: 20px 30px;
        }
        .preview {
            background:#333333; padding:20px;margin-top:20px;
            color:#fff;
            text-transform: uppercase;
        }
        .preview .destacado {
            color: #1fc4f4;
            font-weight: bold;
        }
        .preview span {
            margin: 0 2px;
        }

        ul li label {
            text-transform: uppercase;
        }
    </style>
{% endblock %}