{% extends "base/base-front-general.html.twig" %}
{% block title %}{% trans into locale %}Panels{% endtrans %} | Cershop{% endblock %}
{% block metadescription %}{% endblock %}
{% block robots %}noindex,follow{% endblock %}
{% block stylesheet %}
    {{ parent() }}
{% endblock %}

{% block bodyclass %}{{ parent() }}{% endblock %}
{% block contenido %}
<div class="page-content mt-10 mb-10 pb-6">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12 col-md-4 col-lg-3 col-xl-2">
                {% include '/partials/front-menu-cuenta.html.twig' %}
            </div>
            <div class="col-xs-12 col-md-8 col-lg-9 col-xl-10">
                {% if not app.user %}
                <div class="alert alert-message alert-light alert-primary alert-link mb-4">
                    <h4 class="alert-title">{% trans into locale %}Warning{% endtrans %}</h4>
                    <p>{% trans into locale %}You must create an account if you don't want to lose your bookmarks when you close the browser.{% endtrans %} <a class="link-red" href="{{ path('login') }}">{% trans into locale %}Create an account now{% endtrans %}</a>.</p>
                    <button type="button" class="btn btn-link btn-close">
                        <i class="d-icon-times"></i>
                    </button>
                </div>
                {% endif %}

                <div id="favoritos-paneles">
                    {% if app.user %}
                    {% if form_errors(form) %}
                        <div class="alert alert-danger alert-dark alert-inline mt-2 mb-3" role="alert">{{ form_errors(form) }}</div>
                    {% endif %}
                    {% for flash_message in app.session.flashbag.get('danger') %}
                        <div class="alert alert-danger alert-dark alert-inline mt-2 mb-3" role="alert">{{ flash_message }}</div>
                    {% endfor %}
                    {% for flash_message in app.session.flashbag.get('success') %}
                        <div class="alert alert-success alert-dark alert-inline mt-2 mb-3" role="alert">{{ flash_message }}</div>
                    {% endfor %}
                    <div class="row mb-3">
                        {{ form_start(form, {'action':path('cuentaPaneles'), 'method':'POST'}) }}
                            <div class="col-lg-12 form-nuevo-panel">
                                <div class="form-group">
                                    {{form_widget(form.nombre)}}
                                </div>
                                <button type="submit" class="btn btn-xs btn-primary"><i class="fas fa-plus pr-1"></i> {% trans into locale %}New panel{% endtrans %}</button>
                            </div>
                        {{ form_end(form) }}
                    </div>
                    {% endif %}

                    <div class="row cols-xs-1 cols-sm-2 cols-lg-3 cols-xl-4">
                        {% for tablero in tableros %}
                        <div>
                            <figure class="image-box appear-animate" data-animation-options="{'name': 'fadeInLeftShorter', 'delay': '.4s'}">
                                <div class="contenedor-multimedia">
                                    <div class="miniatura-multimedia">
                                        <div class="thumbnail-multimedia">
                                            <div class="centrar-multimedia">
                                                <img src="{{ asset('assets/global/images/logo.png') }}" alt="Cershop"> 
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="overlay social-links">
                                    <a href="{{ path('cuentaFavoritos', {slug: tablero.slug}) }}" class="social-link fas fa-eye"></a>
                                    {% if app.user %}<a href="#" class="social-link fas fa-edit editar_panel" onclick="editarTablero('{{ path('cuentaEditarPanel', {id: tablero.id}) }}', '{{ tablero.nombre }}');"></a>{% endif %}
                                    {% if tablero.borrable %}<a href="#" class="social-link fas fa-trash eliminar_panel" onclick="eliminarTablero('{{ path('cuentaEliminarPanel', {id: tablero.id}) }}');"></a>{% endif %}
                                </div>
                            </figure>
                            <h5>{{ tablero.nombre }}</h5>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% if app.user %}
<!-- Pop up confirmar eliminar panel -->
<div id="popup_panel_eliminar" class="popup" style="display: none;">
    <div class="content-popup">
        <div class="close"><a href="#" id="close_panel_eliminar"><i class="fas fa-window-close"></i></a></div>
        <div>
            <h2>{% trans into locale %}Delete panel{% endtrans %}</h2>
            <p>{% trans into locale %}Do you want to delete this panel?{% endtrans %}</p>
            <div class="text-right">
                <a class="btn btn-xs btn-primary" onclick="$('#close_panel_eliminar').click();">{% trans into locale %}Cancel{% endtrans %}</a>
                <a id="boton-eliminar-tablero" class="btn btn-xs btn-secondary">{% trans into locale %}Delete{% endtrans %}</a>
            </div>
        </div>
    </div>
</div>
<!-- Pop up editar panel -->
<div id="popup_panel_editar" class="popup" style="display: none;">
    <div class="content-popup">
        <div class="close"><a href="#" id="close_panel_editar"><i class="fas fa-window-close"></i></a></div>
        <div>
            <h2>{% trans into locale %}Edit panel{% endtrans %}</h2>
            <form id="formulario" method="post" action="">
                <div class="form-group mb-3">
                    <input type="text" class="form-control" id="nombrePanel" name="nombre" placeholder="{% trans into locale %}Panel name{% endtrans %}">
                </div>
                <div class="text-right">
                    <a class="btn btn-xs btn-primary" onclick="$('#close_panel_editar').click();">{% trans into locale %}Cancel{% endtrans %}</a>
                    <button type="submit" class="btn btn-xs btn-secondary">{% trans into locale %}Confirm{% endtrans %}</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="popup-overlay"></div>
{% endif %}
{% endblock %}

{% block javascript %}
{{ parent() }}
{% if app.user %}
<script>
    $('#menu-paneles').addClass('active');
    function editarTablero(ruta, nombre) {
        $('#nombrePanel').val(nombre);
        $('#formulario').attr('action', ruta);
    }
    function eliminarTablero(ruta) {
        $('#boton-eliminar-tablero').attr('onclick', 'document.location.href = "'+ruta+'";');
    }
    $(document).ready(function(){
        $('.eliminar_panel').on('click', function(){
            $('#popup_panel_eliminar').fadeIn('slow');
            $('.popup-overlay').fadeIn('slow');
            $('.popup-overlay').height($(window).height());
            return false;
        });    
        $('#close_panel_eliminar').on('click', function(){
            $('#popup_panel_eliminar').fadeOut('slow');
            $('.popup-overlay').fadeOut('slow');
            return false;
        });
        $('.editar_panel').on('click', function(){
            $('#popup_panel_editar').fadeIn('slow');
            $('.popup-overlay').fadeIn('slow');
            $('.popup-overlay').height($(window).height());
            return false;
        });    
        $('#close_panel_editar').on('click', function(){
            $('#popup_panel_editar').fadeOut('slow');
            $('.popup-overlay').fadeOut('slow');
            return false;
        });
    });
</script>
{% endif %}
{% endblock %}