{% extends '@Core/base.html.twig' %}
{% block javascript %}
    {{ parent() }}
{% endblock %}
{% block sectionTitle %}Edición de banner web [ {{ websiteConfig.websiteTitle }} ]{% endblock %}

{% block sectionActions %}
{% endblock %}

{% block breadcrumbLinks %}
    <li><a class="" href="{{ path('website_list') }}">Listado de websites</a></li>
    <li><a class="" href="{{ path('website_menu', {"id": websiteConfig.id}) }}">Menu gestión web</a></li>
    <li class="active">Edición de banner web</li>
{% endblock %}

{% block content %}

<div class="panel-body">
    <div class="panel panel-flat">
        <div class="panel-body">

            {% for flash_message in app.session.flashBag.get('warning') %}
                <div class="alert alert-warning alert-styled-left">
                    <span class="text-semibold">{{ flash_message }}</span>
                </div>
            {% endfor %}

            {% for flash_message in app.session.flashBag.get('error') %}
                <div class="alert alert-danger alert-styled-left">
                    <span class="text-semibold">{{ flash_message }}</span>
                </div>
            {% endfor %}

                {% form_theme form 'bootstrap_3_layout.html.twig' %}
                {{ form_start(form) }}
                {{ form_errors(form) }}

                    <div class="row" style="margin-bottom: 20px">
                        <div class="col-md-6">
                            {% if elemento  %}
                                {% if elemento.webPath %}
                                    <h1>Imagen</h1>
                                    <img src="{{ elemento.webPath | imagine_filter('big_prop') }}" class="img-responsive" style="display: block;margin-left: auto;margin-right: auto">
                                {% endif %}
                            {% endif %}
                        </div>

                        <div class="col-md-6">
                            {% if elemento  %}
                                {% if elemento.webPathResponsive %}
                                    <h1>Imagen responsive</h1>
                                    <img src="{{ elemento.webPathResponsive | imagine_filter('big_prop') }}" class="img-responsive" style="display: block;margin-left: auto;margin-right: auto">
                                {% endif %}
                            {% endif %}
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-xs-6">
                            <div class="col-xs-6">
                                {{ form_row(form.enabled) }}
                            </div>
                            <div class="col-xs-6">
                                {{ form_row(form.sort) }}
                            </div>
                            <div class="col-xs-12">
                                {{ form_row(form.typeBanner) }}
                            </div>
                        </div>
                        <div class="col-xs-6">
                            {{ form_row(form.url) }}
                            {{ form_row(form.file) }}
                            <div id="responsive">
                                {{ form_row(form.fileResponsive) }}
                            </div>
                            {{ form_row(form.group) }}
                        </div>
                    </div>

                    <div style="background-color: #eaeaea; margin-bottom: 10px;">
                        <div class="row" style="padding: 10px">
                            <div class="col-xs-7">
                                {{ form_row(form.title) }}
                            </div>
                            <div class="col-xs-5">
                                <div class="row">
                                    <div class="col-xs-6">
                                        {{ form_row(form.titleColor) }}
                                    </div>
                                    <div class="col-xs-6">
                                        {{ form_row(form.isNecessaryShowTitle) }}
                                    </div>
                                    <div class="col-xs-12">
                                        {{ form_row(form.titleJustification) }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div style="background-color: #eaeaea">
                        <div class="row" style="padding: 10px">
                            <div class="col-xs-7">
                                {{ form_row(form.subtitle) }}
                            </div>
                            <div class="col-xs-5">
                                <div class="row">
                                    <div class="col-xs-6">
                                        {{ form_row(form.subtitleColor) }}
                                    </div>
                                    <div class="col-xs-6">
                                        {{ form_row(form.isNecessaryShowSubtitle) }}
                                    </div>
                                    <div class="col-xs-12">
                                        {{ form_row(form.subtitleJustification) }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- save button -->
                    <div class="panel-footer">
                        <div class="col-md-8 text-left">
                            Descargar un ejemplo de banner Principal. (1900 x 500 ppp) <a href="{{ asset('assets/images/sample_banner.jpg') }}" target="_blank">IMAGEN EJEMPLO</a>
                            <br>
                            Descargar un ejemplo de banner Principal en responsive. (700 X 500 ppp) <a href="{{ asset('assets/images/banner_responsive.jpg') }}" target="_blank">IMAGEN EJEMPLO</a>
                            <br>
                            Descargar un ejemplo de banner 1/3. (700 x 600 ppp) <a href="{{ asset('assets/images/sample_banner_1_3.jpg') }}" target="_blank">IMAGEN EJEMPLO</a>
                            <br>
                            Descargar un ejemplo de banner Intermedio. (1666 x 500 ppp) <a href="{{ asset('assets/images/sample_banner_intermedio.jpg') }}" target="_blank">IMAGEN EJEMPLO</a>
                            <br>
                        </div>
                        <div class="col-md-4 text-right">
                            <button type="submit" class="btn-rounded btn bg-color3"><i class="icon-download position-left"></i>Guardar</button>
                        </div>
                    </div>
                    <!-- save button -->


                {{ form_end(form) }}

        </div>

    </div>
</div>

{% endblock%}

{% block script %}
    <script>
        $(document).ready(function(){
            $('#websiteBannerFormBasic_titleColor').spectrum({
                preferredFormat: "hex",
                showInput: true,

                chooseText: "Elegir",
                cancelText: "Cancelar",
            })

            $('#websiteBannerFormBasic_subtitleColor').spectrum({
                preferredFormat: "hex",
                showInput: true,

                chooseText: "Elegir",
                cancelText: "Cancelar",
            })

            $('#websiteBannerFormBasic_title').css('height', '100px');
            $('#websiteBannerFormBasic_subtitle').css('height', '100px');
            $('.dropdown').addClass('hidden');

            checkResponsiveBanner();
            $("#websiteBannerFormBasic_typeBanner").change(function(){
                checkResponsiveBanner();
            });

        })
        {% if elemento %}
            $('#websiteBannerFormBasic_file').removeAttr('required');
        {% endif %}

        function checkResponsiveBanner(){
            var type= $("#websiteBannerFormBasic_typeBanner").val();
            if (type == 1 || type == 3){
                $('#responsive').removeClass('hidden');
            }else{
                $('#responsive').addClass('hidden');
            }
        }
    </script>
{% endblock %}