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

{% block content %}

    <div class="right_col" role="main">

        <div class="row">
            <div class="col-xs-12">
                <div class="breadcrumb-panel">
                    <ul class="breadcrumb-list">
                        <li><a href="{{ path('admin_blog_list') }}"><i class="fa fa-pencil-square-o"></i> Blog</a> / </li>
                        <li><span>Configuración</span></li>
                    </ul>
                </div>
            </div>
        </div>

        {% block flashMessages %}

            {% for flashMessage in app.session.flashbag.get('message') %}
                <div class="row message">
                    <div class="col-xs-12">
                        <div class="alert alert-success alert-dismissible" role="alert">
                            <i class="fa fa-check-square-o"></i> {{ flashMessage }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        </div>
                    </div>
                </div>
            {% endfor %}

        {% endblock %}

        <div class="row">
            <div class="col-xs-12">
                <div class="panel panel-plaza">
                    <div class="panel-heading">
                        Portada
                    </div>
                    <div class="panel-body">
                        {% if cover and cover.name %}
                            <div class="row">
                                <div class="col-xs-12">
                                    <div class="cover-settings">
                                        <img class="cover" src="{{ asset('assets/files/blog/' ~ cover.name) }}">
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                        <div class="row">
                            <div class="col-xs-12 col-sm-6 col-md-7 col-lg-5">
                                <div class="input-group">
								<span class="input-group-btn">
								{{ form_start(coverForm) }}
                                    <span class="btn btn-primary btn-file">
										<i class="fa fa-folder-open"></i> Buscar&hellip; {{ form_widget(coverForm.file) }}
									</span>
								</span>
                                    <input type="text" class="form-control input-file-text" placeholder="Selecciona una imagen de portada" readonly>
                                    {{ form_widget(coverForm.submit,{'label':'Editar','attr':{'class':'btn btn-success pull-left', 'style': 'margin-top:10px;'}}) }}
                                </div>
                                {{ form_errors(coverForm.file) }}
                                {{ form_end(coverForm) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
        $(document).ready(function() {

            $('.btn-file :file').on('fileselect', function(event, numFiles, label) {

                var input = $(this).parents('.input-group').find(':text'),
                        log = numFiles > 1 ? numFiles + ' files selected' : label;

                if( input.length ) {
                    input.val(log);
                } else {
                    if( log ) alert(log);
                }

            });

            $(document).on('change', '.btn-file :file', function() {
                var input = $(this),
                        numFiles = input.get(0).files ? input.get(0).files.length : 1,
                        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
                input.trigger('fileselect', [numFiles, label]);
            });
        });
    </script>
{% endblock %}