{% extends 'base.html.twig' %}
{% block wrapperClass %}brandhub{% endblock %}

{% block body %}

	<div class="hero" style="background-image: url({{ regGet('imgpath') }}{{ data.brand.hero_background_img }});">
		<div class="container">
			<a href="/{{ regGet('locale') ~ '/brandhub/' ~ regGet('countrycodeid') ~ "/" ~ data.brand.fk_item_id ~ "/" }}"
			   class="brand-logo"
			   style="background-image:url('{{ regGet('imgpath') }}{{ data.brand.logo }}')"></a>
			<div class="brand-info pl15 pr15" style="text-align: left; bottom: 30px">
				<h1>{{ data.title }}</h1>
				<p class="col-md-12 p0">
                    {{ data.brand.introduction|raw }}
				</p>
				{% if data.brand.joined is defined and data.brand.joined == false %}
				<a class="btn grey btn-primary"
				   {{ data.joinlink }}
				   style="background-color:{{ data.brand.invitation_btn_bg }};
						  color:{{ data.brand.invitation_txt_color }};
			    ">
					<i class="fa fa-angle-right"></i>
                    {{ data.brand.optin_btn_text }}
				</a>
				{% endif %}
			</div>
		</div>
	</div>
	
	<div id="info" class="pt30 pb15" style="background-color:{{ data.brand.invitation_btn_bg }};">
		<div class="container">
			<div class="col-md-6 col-sm-6 col-xs-12">
				<div class="content col-md-12 col-sm-12 col-xs-12 mb20 pt10">	
					<div class="infobox clearfix">						
						<h2 class="col-md-12 col-sm-12 p0" style="color:{{ data.brand.invitation_btn_bg }};">{{ data.brand.join_title }}</h2>
						{{ data.brand.join_txt|raw }}
                        {% if data.brand.joined is defined and data.brand.joined == false %}
							<a class="btn grey btn-primary mb30"
							   {{ data.joinlink }}
							   style="background-color:{{ data.brand.invitation_btn_bg }};
									   color:{{ data.brand.invitation_txt_color }};
									   ">
								<i class="fa fa-angle-right"></i>
                                {{ data.brand.optin_btn_text }}
							</a>
                        {% endif %}
					</div>	
					<div class="infobox clearfix">						
						<h2 class="col-md-12 col-sm-12 p0" style="color:{{ data.brand.invitation_btn_bg }};">
							{{ data.brand.description_title }}
						</h2>
                        {{ data.brand.description_txt|raw }}
						<a href="/info/contact/" class="btn grey btn-primary col-md-6 col-sm-6 mb15"
						   style="background-color:{{ data.brand.invitation_btn_bg }};
							      color:{{ data.brand.invitation_txt_color }};
					    ">
							<i class="fa fa-angle-right"></i>
                            {{ data.brand.description_title }}
						</a>
					</div>	
				</div>
			</div>						
			<div class="col-md-6 col-sm-6 col-xs-12">
				<div class="content col-md-12 col-sm-12 col-xs-12 pt10">
					<h2 class="col-md-12 col-sm-12 col-xs-12 p0">{{ data.brand.insiders_title }}</h2>
					<div class="insidersInfo mb15"></div>
                    {{ data.brand.insiders_txt|raw }}
					</div>
				</div>						
			</div>			
		</div>		
	</div>

	<div class="col-md-12 col-sm-12 col-xs-12 pb30 clearfix">
		<div id="campaign-overview" class="container">
        	<h1 class="col-md-12 text-center" style="color:{{ data.brand.invitation_btn_bg }}">{{ readFunnel(data.titles.0, 1) }}</h1>
            {% include 'includes/modules/new.campaigns.html.twig' with {
            	campaigns : data.newCampaigns,
				widthcol : 'col-md-6 col-sm-12 col-xs-12'
            } %}
            {% include 'includes/modules/live.campaigns.html.twig' with {
            	campaigns : data.liveCampaigns,
            	widthcol : 'col-md-3 col-sm-6 col-xs-12'
            } %}
            {% include 'includes/modules/previous.campaigns.html.twig' with {
            	campaigns : data.previousCampaigns,
				widthcol : 'col-md-3 col-sm-6 col-xs-12'
            } %}
        </div>
	</div>      

	{% if data.testimonials|length > 0 %}
		<div class="clearfix">
			<div id="brandhubInsiders" class="pb30" style="background-color:{{ data.brand.invitation_btn_bg }}">
				<div class="container">
					<h1 class="col-md-12 text-center">{{ readFunnel(data.titles.1, 1) }}</h1>
					{% include 'includes/modules/testimonials/testimonial.brandhub.slider.html.twig' with {
						testimonials   : data.testimonials
					} %}
				</div>
			 </div>
		</div>
	{% endif %}

	<div class="connect clearfix">
		<div class="container col-md-12 p0">
			<div class="col-md-6 col-sm-6 col-xs-12 p0">
				<h1 class="col-md-12 col-sm-12 col-xs-12 text-center" style="color:{{ data.brand.invitation_btn_bg }}">
					{{ readFunnel(data.titles.2, 1) }}
				</h1>
				{% if data.brand.facebook_link is defined %}
				<div class="col-md-12 col-sm-12 col-xs-12 text-center">
					{% include 'includes/snippets/facebook.page.plugin.html.twig' with {
						url: data.brand.facebook_link
					} %}
				</div>
				{% endif %}
			</div>
			<div class="col-md-6 col-sm-6 col-xs-12 p0">
				<h1 class="col-md-12 col-sm-12 col-xs-12 text-center" style="color:{{ data.brand.invitation_btn_bg }}">
					{{ readFunnel(data.titles.3, 1) }}
				</h1>
				<div class="col-md-12 col-sm-12 col-xs-12 text-center">
	          	  {{ data.allProductsBlock|raw }}
	          	</div>
	      	</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 %}