{#{% extends '::backendLayout.html.twig' %}#}

{#{% block content_id "formador-feedback" %}
{% block content_class  "shadow"%}#}

{#{% block stylesheets -%}#}
{#    {{ parent() }}#}
    {% stylesheets
            '@WebelopingLanderBundle/Resources/public/css/color_palette_widget.css'
            '@WebelopingLanderBundle/Resources/public/css/archivo_secreto.css'
    filter='?yui_css' %}
        <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
    {% endstylesheets %}
{#{% endblock %}#}

{#{% block bottom_scripts -%}#}
{#    {{ parent() }}#}
    {% javascripts
        '@WebelopingLanderBundle/Resources/public/js/collection.js'
    filter='?yui_js' %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script type="text/javascript">
        jQuery( document ).ready( function() {
            var collection2 = new collection();
            collection2.collectionHolder        = 'ul.files';
            collection2.addMultipleCollection   = true;
            collection2.addLinkTitle            = "{{ 'Añadir documento' |trans |capitalize }}";
            collection2.removeLinkTitle         = "{{ 'Delete' |trans |capitalize }}";
            collection2.addDefaultCollection    =  {{ ( form.files.vars.data is empty )? 1 : 0 }};
            collection2.collectionMin           =  0;
            collection2.removeFormHTMLTag       =  '<button type="button" class="close del-el left" data-dismiss="alert">×</button>';
            collection2.init();
        });
    </script>
{#{% endblock %}#}

{% form_theme form 'WebelopingLanderBundle:Form:Theme/files.html.twig' %}

{#{% block content -%}#}
    <div class="shadow" id="formador-feedback">
        <div class="row margin">
            <div class="col-sm-11 header">
                <span class="title">ARCHIVO SECRETO</span>
                <span class="subtitle blue">{{ title |upper}}</span>
                    <!--
                    <span class="subtitle blue">EDITAR</span><span class="path blue">Ejemplo Archivador / Ejemplo Carpeta / Nombre Documento</span>
                    -->
            </div>
            <div class="col-sm-1 header-right">
                <i class="blue glyphicons {{ icon }}"></i>
            </div>

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

            <div class="bottom-divider-light"></div>

            {{ form_start(form) }}
                <!-- Anadir archivador block-->
                <div class="col-sm-12 header">
                    <span class="title-seccion blue">ARCHIVADOR</span>
                </div>

                <div class="select-collection">
                    {{ form_label( form.archive ) }} <i class="fa fa-info-circle label-help"  data-toggle="popover" data-trigger="hover" data-html="true" data-content="{{ 'archivo_secreto.archive.help.popover' |trans |raw }}"></i>
                    <div class="dropdown">
                        {{ form_widget( form.archive ) }}
                    </div>
                    {% if form.archive.vars.errors.count > 0 %}
                        <div class="col-sm-12 error-msg">
                            {{ form_errors( form.archive ) }}
                        </div>
                    {% endif %}
                </div>

                <div class="create-collection">
                    {{ form_label( form.newArchive ) }}
                    {{ form_widget( form.newArchive ) }}
                    {% if form.newArchive.vars.errors.count > 0 %}
                        <div class="col-sm-12 error-msg">
                            {{ form_errors( form.newArchive ) }}
                        </div>
                    {% endif %}
                </div>

                <div class="select-color">
                    <label for="">{{ form_label( form.color ) }}</label>
                    {{ form_widget( form.color ) }}
                    {% if form.color.vars.errors.count > 0 %}
                        <div class="col-sm-12 error-msg">
                            {{ form_errors( form.color ) }}
                        </div>
                    {% endif %}
                </div>

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

                <div class="bottom-divider-light"></div>

                <!-- Anadir carpeta block-->
                <div class="col-sm-12 header">
                    <span class="title-seccion blue">CARPETA</span>
                </div>

                <div class="select-collection">
                    {{ form_label(form.directory) }} <i class="fa fa-info-circle label-help"  data-toggle="popover" data-trigger="hover" data-html="true" data-content="{{ 'archivo_secreto.directory.help.popover' |trans |raw }}"></i>
                    <div class="dropdown">
                        {{ form_widget(form.directory) }}
                    </div>
                    {% if form.directory.vars.errors.count > 0 %}
                        <div class="col-sm-12 error-msg">
                            {{ form_errors( form.directory ) }}
                        </div>
                    {% endif %}
                </div>

                <div class="create-collection">
                    {{ form_label( form.newDirectory ) }}
                    {{ form_widget( form.newDirectory ) }}
                    {% if form.newDirectory.vars.errors.count > 0 %}
                        <div class="col-sm-12 error-msg">
                            {{ form_errors( form.newDirectory ) }}
                        </div>
                    {% endif %}
                </div>

                <div class="clearfix"></div>
                <div class="bottom-divider-light"></div>
                <div class="clearfix"></div>

                <div class="col-sm-12 header">
                    <span class="title-seccion blue">DOCUMENTOS</span>
                    <span class="btn default-blue">Documentos existentes</span>
                </div>
                <div class="ducument-list">
                    <span class="no-docs-text{{ (documents is empty)? '' : ' hide'}}">Selecciona una carpeta para ver sus documentos existentes.</span>
                    {% if documents is not empty %}
                        <ul>
                            {% for value in documents %}
                                <li>{{ value.title }}<a href="{{ path( 'backend_archivo_screto_delete', { 'id': value.id } ) }}" class="delete">Eliminar</a></li>
                            {% endfor%}
                        </ul>
                    {% endif %}
                </div>

                <div class="col-sm-12 header">
                    <span class="btn default-blue add-docs-title">Documentos nuevos</span>
                </div>

                <!-- Anadir documentos block-->
                <div class="document-name col-sm-4">
                    <div class="row">
                        <div class="col-sm-12 header">
                            <span class="title-seccion blue">
                                NOMBRE DOCUMENTO
                            </span>
                        </div>
                    </div>
                </div>

                <div class="document-name col-sm-5">
                    <div class="row">
                        <div class="col-sm-12 header">
                            <span class="title-seccion blue">
                                DOCUMENTO
                            </span>
                        </div>
                    </div>
                </div>

                <ul class="files" data-prototype="{{ form_widget(form.files.vars.prototype)|e }}">
                    {% if form.files.vars.data %}
                        {{ form_errors( form.files ) }}
                        {{ form_widget( form.files, { 'attr': { 'class': '_col-init' } } ) }}
                    {% endif %}
                </ul>

                <div class="clearfix"></div>
                <div class="bottom-divider-light"></div>

                {{ form_widget(form['_secToken']) }}

                {{ form_widget(form.submit) }}
                <a href="#" class="btn default-blue save" data-dismiss="modal">CANCELAR</a>
            </form>      
        </div>
    </div>
{#{% endblock %}#}