{% extends 'base.html.twig' %}

{% block title %}
    <title>BCI Lider</title>
{% endblock %}

{% block stylesheets %}


    <link href="{{ direccion_url }}/bundles/admin/css/bci.css" rel="stylesheet">


    <!--
    <link href="https://tarjetaliderbci.cl/views/layout/bci/css/css.css?v.3.1388776" rel="stylesheet">
    <link rel="preload" href="https://tarjetaliderbci.cl/views/layout/bci/fonts/fonts.css">
    -->

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        #content .wp.white {
            background-color: #ffffff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
            border-radius: 2px;
            padding: 30px;
            text-align: center;
            margin: auto;
        }

        #content .wp.white.promocion {
            max-width: 700px !important;
        }

        .promocion > .image{
            background-color: #F5F5F5 !important;
        }

        .promocion h3, .promocion h4, .promocion h5 {
            font-family: 'Poppins', sans-serif;
        }

        .promocion .texto-2 {
            background-color: whitesmoke;
            overflow: hidden;
        }

        .promocion .texto-2 h3 {
            color: #0077d8 !important;
            padding: 0px 80px !important;
            font-size: 26px !important;
            font-weight: 700 !important;
        }

        .promocion .box-3 {
            position: relative;
        }

        .promocion .box-3 h4 {
            position: absolute;
            color: #f20130 !important;
            font-size: 140px !important;
            z-index: 999999 !important;
            top: 40px !important;
            left: 100px !important;
            margin: 0px !important;
        }

        .promocion .box-3 h5 {
            position: absolute;
            margin: 0px !important;
            bottom: 42px !important;
            font-size: 14px !important;
            color: #f20130 !important;
            left: 110px !important;
            width: 280px !important;
            line-height: 22px !important;
            font-weight: 800 !important;
            text-align: center;
        }

        .logo-marca {
            position: absolute;
            width: 208px !important;
            border-radius: 50%;
            right: 54px;
            top: 21px !important;
        }

        .textos-descuento {
            text-align: center;
        }

        .textos-descuento > h3 {
            color: #0077d8 !important;
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 0px;
        }

        .textos-descuento > p {
            color: #0077d8 !important;
            font-size: 14px !important;
            margin: 0px;
        }

        .compra-presencial {
            text-align: center;
            text-transform: uppercase;
            margin-top: 35px;
            margin-bottom: 35px;
        }

        .compra-presencial > .label{
            background-color: #0077d8 !important;
            color: #FFFFFF !important;
            border-radius: 25px !important;
            font-size: 16px;
            font-weight: bold;
            padding-top: 8px;
            padding-bottom: 8px;
            padding-left: 15px;
            padding-right: 15px;
        }
        .compra-presencial > h2{
            color: #0077d8 !important;
            font-size: 14px !important;
            margin: 0px;
            margin-top: 15px;
        }


    </style>
{% endblock stylesheets %}

{% block body %}
    <section id="content">
        <div class="wp white promocion">
            <div class="image">
                <img src="{{ asset('bundles/admin/img/01.jpg') }}"
                     alt="Aprovecha este gran descuento para estudiar tu nuevo idioma.">
                <div class="texto-2">
                    <h3>{{ textos_web.frase_inicial }}</h3>
                </div>

                <!-- descuentos -->
                {% for item in descuentos %}
                    <div class="box-3">
                        <img src="{{ asset('bundles/admin/img/03.jpg') }}" alt="{{ item.titulo }}">
                        <h4>{{ item.descuento }}</h4>
                        <h5>{{ item.titulo }}</h5>

                        {# imagen #}
                        {% if textos_web.logo_comercio != '' %}
                            <img src="{{ textos_web.logo_comercio }}" class="logo-marca" alt="{{ marca }}">
                        {% else %}
                            <img src="{{ marcaLogo }}" class="logo-marca" alt="{{ marca }}">
                        {% endif %}


                    </div>
                    {% if item.subtitulo != '' or item.indicacion != '' %}
                        <div class="textos-descuento">
                            {% if item.subtitulo != '' %}
                                <h3>{{ item.subtitulo }}</h3>
                            {% endif %}
                            {% if item.indicacion != '' %}
                                <p>({{ item.indicacion }})</p>
                            {% endif %}
                        </div>
                    {% endif %}
                {% endfor %}

                <!-- compra presencial -->
                {% if textos_web.compra_presencial != '' %}
                <div class="compra-presencial">
                    <span class="label">Compra presencial:</span>
                    <h2>{{ textos_web.compra_presencial }}</h2>
                </div>
                {% endif %}

                <!-- codigo descuento online -->
                {% if textos_web.codigo_descuento_online != '' %}
                    <div class="compra-presencial">
                        <span class="label">Código Descuento Online:</span>
                        <h2>{{ textos_web.codigo_descuento_online }}</h2>
                    </div>
                {% endif %}

                <!-- codigo descuento -->
                {% if textos_web.codigo_descuento != '' %}
                    <div class="compra-presencial">
                        <span class="label">Código Descuento:</span>
                        <h2>{{ textos_web.codigo_descuento }}</h2>
                    </div>
                {% endif %}

                <img src="{{ asset('bundles/admin/img/04.jpg') }}"
                     alt="Aprovecha este gran descuento para estudiar tu nuevo idioma.">
                <img src="{{ asset('bundles/admin/img/05.jpg') }}"
                     alt="Aprovecha este gran descuento para estudiar tu nuevo idioma.">

            </div>
        </div>
    </section>
{% endblock body %}