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

{% block title %}{{ 'HOW_IT_WORKS'|translate }}{% endblock %}
{% block wrapperClass %}howitworks{% endblock %}
{% block body %}

<div class="intro clearfix navpadding">
    <div class="container col-md-12 text-center">
        <h1>{{ readFunnel(data.how_it_works_texts.0, 1) }}</h1>
        {{ readFunnel(data.how_it_works_texts.0, 3)|raw }}
        {% if not data.loggedIn %}
            {% set currentPath = path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) %}
            <a href="{{ path('site_user_registration', { '_target_path': currentPath }) }}">
                <i class="fa fa-angle-right"></i> {{ "HOW_IT_WORKS_BUTTON"|translate }}</a>
        {% endif %}
        <div class="pictures hidden-xs">
            {% for photo in data.photocorner_photos %}
                <div class="hidden-xs" style="background-image:url('{{ regGet('imgpath') }}{{ readFunnel(photo, 4) }}')" alt="{{ readFunnel(photo, 1) }}"></div>
            {% endfor %}
        </div>      
    </div>
</div>

<div class="howdoesitwork clearfix">
    <div class="container col-md-12 text-center">
        <h1 class="mt0 mb30">{{ readFunnel(data.how_it_works_texts.1, 1) }}</h1>
        {% for step in data.how_it_works_steps %}
            <div class="col-md-4 col-sm-12 step1">
                <div class="content">
                    <div class="explanation" aria-valuemax="">
                        <h2 class="mt15">{{ readFunnel(step, 1) }}</h2>
                        <p class="col-md-12">{{ readFunnel(step, 248) }}</p>
                    </div>
                    <div class="picture" style="background-image:url('{{ regGet('imgpath') }}{{ readFunnel(step, 4) }}')"></div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>

<div class="community clearfix">
    <div class="container col-md-12 text-center">
        <h1 class="mb30 mt0">{{ readFunnel(data.how_it_works_texts.2, 1) }}</h1>
        <div class="col-xs-12">
            {% include 'includes/modules/testimonials/testimonial.slider.html.twig' with {
                experiences: data.how_it_works_experiences
            } %}
        </div>
        <div class="brands col-md-12 mt30">
            {% for logo in data.client_logos %}
                <img src="{{ regGet('imgpath') }}{{ readFunnel(logo, 4) }}" alt="{{ readFunnel(logo, 1) }}">
            {% endfor %}
        </div>
    </div>
</div>

<div class="conduct clearfix">
    <div class="container col-md-12 p0 text-center">
        <h1 class="white mb20 mt0">{{ readFunnel(data.how_it_works_texts.3, 1) }}</h1>
        <p class="text">{{ readFunnel(data.how_it_works_texts.3, 3)|raw }}</p>
        <div class="col-md-12 p0 clearfix">
            <div class="subject">
                <div class="content info col-md-12">
                    <span class="topic clearfix">
                        <i class="fa fa-bullhorn"></i>
                        <h3 class="bold">{{ readFunnel(data.code_of_conduct_items.0, 1) }}</h3>
                    </span>
                </div>
            </div>
            <div class="subject">
                <div class="content info col-md-12">
                    <span class="topic clearfix">
                        <i class="fa fa-quote-right"></i>
                        <h3 class="bold">{{ readFunnel(data.code_of_conduct_items.1, 1) }}</h3>
                    </span>
                </div>
            </div>
            <div class="subject">
                <div class="content info col-md-12">
                    <span class="topic clearfix">
                        <i class="fa fa-comments-o"></i>
                        <h3 class="bold">{{ readFunnel(data.code_of_conduct_items.2, 1) }}</h3>
                    </span>
                </div>
            </div>
            <div class="subject">
                <div class="content info col-md-12">
                    <span class="topic clearfix">
                        <i class="fa fa-hand-peace-o"></i>
                        <h3 class="bold">{{ readFunnel(data.code_of_conduct_items.3, 1) }}</h3>
                    </span>
                </div>
            </div>
            <div class="subject">
                <div class="content info col-md-12">
                    <span class="topic clearfix">
                        <i class="fa fa-smile-o"></i>
                        <h3 class="bold">{{ readFunnel(data.code_of_conduct_items.4, 1) }}</h3>
                    </span>
                </div>
            </div>
            
	        <a class="btn blue btn-primary mt20" href="/{{ regGet('locale') }}/info/codeofconduct/">
	            <i class="fa fa-angle-right"></i>
	            {{ "MORE_CODEOFCONDUCT"|translate }}
	        </a>
		</div>
    </div>
</div>

<div class="connect clearfix ">
	<div class="container col-md-12">
    	<h1 class="col-md-12 text-center">{{ readFunnel(data.how_it_works_texts.4, 1) }}</h1>
    	{{ readFunnel(data.how_it_works_texts.4, 3) }}
    	{% include 'includes/snippets/social.html.twig' %}
   	</div>
</div>

<div class="learn clearfix">
    <div class="container col-md-12 text-center">
        <h1 class="white">{{ readFunnel(data.how_it_works_texts.5, 1) }}</h1>
        <p class="text">{{ readFunnel(data.how_it_works_texts.5, 3)|raw }}</p>
        <!--<img src="{{ regGet('imgpath') }}howitworks/learn.jpg" class="">-->
        <div class="col-md-12">
            <a href="/{{ regGet('locale') }}/info/contact/" class="btn blue btn-primary mt20">
                <i class="fa fa-angle-right"></i>
                {{ "WANT_TO_LEARN_MORE_BUTTON"|translate }}
            </a>
        </div>
    </div>
</div>

{% endblock %}

{% block readyStateFunction %}
    var tablinks = document.getElementsByClassName("lazy-background");
    for (i = 0; i < tablinks.length; i++) {
        var lazy = tablinks[i];
        var src = lazy.dataset.src;
        lazy.style.backgroundImage =  'url("'+src+'")';
    }
    /* http://sachinchoolur.github.io/lightslider/ for documentation on configuration*/
    $("#lightSlider").lightSlider(
        {
            item: 2,
            speed: 1000,
            pause: 5000,
            loop:true,
            auto: true,
            controls: false,
            responsive:
                [{
                    breakpoint : 959,
                    settings: {
                        item: 2,
                        slideMove: 1,
                        sliderWidth: 300
                    }},
                    {
                        breakpoint: 480,
                        settings: {
                            item: 1,
                            slideMove: 1,
                            sliderWidth: 375
                        }}]
        });
{% endblock readyStateFunction %}