{% extends "base.html" %}
{% block title %}{{ lang_data[solution].pagetitle }}{% endblock %}
{% block content %}

{% if lang_data[solution].banners %}
    <div id="slider" class="owl-carousel owl-carousel-light owl-carousel-light-init-fadeIn owl-theme manual dots-inside dots-horizontal-center show-dots-hover show-dots-xs nav-style-diamond custom-nav-with-transparency nav-inside nav-inside-plus nav-dark nav-md nav-font-size-md show-nav-hover mb-0" data-plugin-options="{'autoplayTimeout': 9000}" data-dynamic-height="['650px','650px','650px','550px','500px']" style="height: 650px;">
        <div class="owl-stage-outer">
            <div class="owl-stage">
                {% for slide in lang_data[solution].banners %}
                    <div class="owl-item position-relative"
                        style="background: url('{{ url_for('static', filename='assets/' ~ solution ~ '/' ~ slide) }}') center/cover;
                        height: 600px;">
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endif %}

<div class="container my-5 pt-4 pb-5 position-relative">

    <div class="row">
        <div class="col-lg-10 order-lg-3 mb-5 mb-lg-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">

            <h2 class="text-12 font-weight-semibold text-center line-height-2">{{ lang_data[solution].title }}</h2>

            {% for content in lang_data[solution].contents %}
                {% if content.bigtitle %}
                    <h2 class="text-12 font-weight-semibold text-center line-height-2">{{ content.bigtitle }}</h2>
                {% else %}
                    {% if content.title %}
                        <h2 class="text-8 font-weight-semibold">{{ content.title }}</h2>
                    {% endif %}

                    {% if content.desc %} <p class="text-3-5">{{ content.desc }}</p> {% endif %}
                    {% if content.desc_with_list %}
                        {% if content.desc_with_list.text %} <p class="text-3-5">{{ content.desc_with_list.text }}:</p> {% endif %}
                        <ul class="list list-icons list-icons-style-1 list-icons-lg mb-4 mb-xl-5">
                            {% for item in content.desc_with_list.info %}
                                <li>
                                    <i class="fas fa-angle-right text-color-dark border-color-dark top-6 text-3"></i>
                                    {% if item.name %} <strong>{{ item.name }}:</strong> {% endif %} {{ item.text }}

                                    {% if item.images %}
                                        <div class="col appear-animation mb-2" data-appear-animation="fadeInShorter" data-appear-animation-delay="250">
                                            <div class="owl-carousel owl-theme carousel-center-active-item carousel-center-active-item custom-carousel-vertical-center-items custom-dots-style-1 carousel-logo nav-style-1 nav-outside nav-font-size-lg custom-nav-grey mb-0"
                                                data-plugin-options="{
                                                    'loop': true,
                                                    'nav': true,
                                                    'responsive': {'576': {'items': 2}, '768': {'items': 3}, '992': {'items': 2}, '1200': {'items': 3}},
                                                    'dots': true,
                                                    'margin': 20
                                                }">
                                                {% for image in item.images %}
                                                <div class="text-center">
                                                    <img class="d-inline-block img-fluid" src="{{ url_for('static', filename='assets/' ~ solution ~ '/' ~ image) }}" alt="" style="max-width: 200px;" />
                                                </div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                    {% endif %}
                                </li>
                            {% endfor %}
                        </ul>
                    {% endif %}

                    {% if content.images %}
                        <div class="col appear-animation mb-2" data-appear-animation="fadeInShorter" data-appear-animation-delay="250">
                            <div class="owl-carousel owl-theme carousel-center-active-item carousel-center-active-item custom-carousel-vertical-center-items custom-dots-style-1 carousel-logo nav-style-1 nav-outside nav-font-size-lg custom-nav-grey mb-5"
                                data-plugin-options="{
                                    'loop': true,
                                    'nav': true,
                                    'checkVisible': false,
                                    'responsive': {'576': {'items': 2}, '768': {'items': 3}, '992': {'items': 2}, '1200': {'items': 3}},
                                    'dots': true,
                                    'margin': 20,
                                    'autoplay': true,
                                    'autoplayHoverPause': true
                                }">
                                {% for image in content.images %}
                                <div class="text-center">
                                    <img class="d-inline-block img-fluid" src="{{ url_for('static', filename='assets/' ~ solution ~ '/' ~ image) }}" alt="" style="max-width: 200px;" />
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}

                    {% if content.footer %}  <p class="text-4 font-weight-bold text-color">{{ content.footer }}</p> {% endif %}
                    {% if content.footer2 %} <p class="text-4-5 font-weight-medium text-center text-color-secondary">{{ content.footer2 }}</p> {% endif %}
                {% endif %}
            {% endfor %}
        </div>
    </div>

</div>
{% endblock %}