{% extends 'base.html.twig' %}
{% block body_id 'welcomeadmin' %}
{% block title %}{{ "C4rgo Roi Calculator"|trans }}{% endblock %}
{% block body_class %}bg-1 no-zoom{% endblock %}
{% block stylesheets %}
    {{ parent() }}
    
    <link rel='stylesheet' href='{{ asset('static/nouislider/css/nouislider.min.css?v=' ~ cacheupdate) }}'>
    <link rel="stylesheet" href="{{ asset('static/c4rgoroicalc/css/style.css?v=' ~ cacheupdate) }}">
    <link rel="stylesheet" href="{{ asset('static/c4rgoroicalc/css/page.css?v=' ~ cacheupdate) }}">

{% endblock %}

{% block modal %}
    {{ parent() }}

    <div class="md-overlay"></div>

{% endblock %}
{% block body %}

    <div id="wrap" class="inv-zoom">
            
        <div class="row">
            <div id="content" class="col-md-12">   
                <div class="col-md-4 d-xl-flex calculator shadow rounded overflow-hidden area-left">
                    <div class="bg-light-alpha col-xl-3 p-5 text-center d-flex">
                        <div class="align-self-center">
                            <img class="main-img w-100 mb-3" src="https://www.veridiancu.org/Content/img/branch.png"/>
                            <strong class="text-primary d-block mb-0">Home Improvement Loan</strong>
                            <a href="" class="mt-4 btn btn-primary bg-secondary-green text-uppercase">Apply For Home Improvement</a>
                        </div>
                    </div>                    
                </div>
                <div class="col-md-8">   
                    {% for _val in slide %}
                        <div class="row">
                            <div class="col-md-12">
                                <section class="tile transparent">
                                    <!-- tile widget -->
                                    <div class="tile-widget color transparent-black rounded-top-corners slide-container">
                                        {{ _val.gruppo }}
                                    </div>
                                    {% for _s in _val.items %}
                                        <div class="row">
                                            <div class="col-md-12">
                                                <!-- tile widget -->
                                                    <div class="tile-widget color transparent-black rounded-top-corners slide-container">
                                                        <div class="col-xl-9 p-5">
                                                            <div class="col-md-1 bg-white valore-slide" id="valore-slide-{{ _s.tipo }}">
                                                                &nbsp;
                                                            </div>    
                                                            <div class="col-md-11">
                                                            <p class="lead fw-normal text-primary mt-0 mb-2">{{ _s.titolo }}</p>
                                                            <p class="mb-0">{{ _s.sottotitolo }}</p>     
                                                            </div>
                                                            <div style="clear: both;"></div>
                                                            <div class="my-5 pb-2">
                                                                <div class="form-group">
                                                                    <div class="slider-styled slider-c4rgo-roi-calc" id="slider-c4rgo-roi-calc-{{ _s.tipo }}" 
                                                                        data-tipo="{{ _s.tipo }}" 
                                                                        data-step="{{ _s.step }}"
                                                                        data-values="{{ _s.values }}"
                                                                        data-density="{{ _s.density }}"
                                                                        data-min="{{ _s.min }}"
                                                                        data-max="{{ _s.max }}"
                                                                    ></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </section>
                            </div>
                        </div>
                    {% endfor %}
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                </div>
            </div>
            <div id="content" class="col-md-4">   
            </div>
        </div>
    </div>



{% endblock %}

{% block footer %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}    
    <script src='{{ asset('static/nouislider/js/nouislider.min.js?v=' ~ cacheupdate) }}'></script>
    <script src="{{ asset('static/c4rgoroicalc/js/script.js?v=' ~ cacheupdate) }}"></script>
{% endblock %}