{% block lightbox %}
{% if client.facebook %}
	{% block facebook_body_open %}
		<!DOCTYPE html>
		<html>
			<head>
				<title>{{ data.news.title }}</title>
				<meta property="og:url" content="{{ root_url_scheme() }}://{{ server_name() }}/get/{{ data.news.id }}.html?lang={{ siteLang }}"/>
				<meta property="og:type" content="website"/>
				<meta property="og:title" content="{{ data.news.title }}"/>
				<meta property="og:description" content="{{ data.news.fb_desc ?: data.news.title }}"/>
				{% if data.slides|length %}
					<meta property="og:image" content="{{ root_url_scheme() }}://{{ server_name() }}/{{ data.slides[0].src }}"/>
				{% endif %}
			</head>
			<body>
	{% endblock %}
{% endif %}

		{% block js %}
			<script>
				(function($){
					//$('#lightbox_slider').flexslider({animation:'slide',slideshow:true,touch:true,directionNav:true,prevText:'.',nextText:'.'});
					$('#lightbox_slider').carousel();
					/*substitui a pre visualizacao pela 1a imagem do slideshow*/
					var l=$('.news a[href*="/get/{{ data.news.id }}.html"] img'),i=$('#lightbox_slider li:first-child+li>img');
					/*corrige bug na lightbox no chrome, ie9 e ff*/window.setTimeout(function(){$(window).resize();},100);
					$('#lightbox_subscribe').lightbox();
					if(!l.length||!i.length)return;
					if(l[0].src.split('?')[0].replace(/_thumb\.(?:jpe?g|gif|png)$/,'')!=i[0].src.split('?')[0].replace(/_full\.(?:jpe?g|gif|png)$/,''))
						l[0].src=i[0].src.split('?')[0].replace(/_full\.(jpe?g|gif|png)$/,'_thumb.$1?t='+(new Date().getTime()));
				})(jQuery);
			</script>
		{% endblock %}
		
		{% block content %}
			{% block slideshow %}
				<div id="lightbox_slider" class="lightbox-news-{{ data.news.id }} carousel slide{{ data.slides|length < 2 ? ' hide-arrows' }}">
					<div class="overlay"></div>
					<div class="lightbox_slider_inside">	
						{% block slideshow_content %}
						<div class="carousel-inner">
							{% for slide in data.slides %}
								{% block slideshow_slide %}
									<div class="item{{ loop.first ? ' active' }}"><img src="/{{ slide.src }}" alt="/{{ slide.src }}"/></div>
								{% endblock %}
							{% endfor %}
						</div>
						{% endblock %}
						
						<!-- Botão de full screen -->
						<button class="lightbox_fullscreen">
							<i class="fa fa-expand"></i>
						</button>

						<!-- Botão de fechar -->
						<button class="lightbox_close">X</button>

						{% block slideshow_arrows %}
							<a class="left carousel-control" href="#lightbox_slider" data-slide="prev">
								<span class="icon-prev"></span>
							</a>
							<a class="right carousel-control" href="#lightbox_slider" data-slide="next">
								<span class="icon-next"></span>
							</a>
						{% endblock %}
					</div>
				</div>
			{% endblock %}
			
			{% if data.models and data.models|length and not(data.news.ext_store_sold_out) %}
				{% block _ext_store_models %}{% endblock %}
				
				{% block _ext_store_slideshow %}{% endblock %}
			{% endif %}
			
			{% if data.slides|length > 1 and site.lightbox_news_thumbs %}
				{% block slideshow_thumbs %}
					<div id="lightbox_slider_thumbs">
						{% block slideshow_thumbs_content %}
						<div id="lightbox_slider_thumbs_holder">
							{% for slide in data.slides %}
								{% block slideshow_thumb %}
								<a href="javascript:void(0);" data-carousel-index="{{ loop.index0 }}" {{ loop.first ? ' class="active"' }}>
									<img src="/{{ slide.src_thumb }}" class="img-responsive">
								</a>
								{% endblock %}
							{% endfor %}
						</div>
						{% endblock %}
					</div>
					{% block slideshow_thumbs_css %}
					<style>
						{% block slideshow_thumbs_css_content %}
						#lightbox_slider_thumbs {
							width: 100%;
							text-align: center;
							overflow-x: auto;
						}
						#lightbox_slider_thumbs_holder {
							display: inline-block;
							white-space: nowrap;
							font-size: 0; /* ^- affects space */
						}
						
						#lightbox_slider_thumbs_holder a {
							display: inline-block;
							padding: 5px;
						}
						#lightbox_slider_thumbs_holder a:first-child {
							padding-left: 0;
						}
						#lightbox_slider_thumbs_holder a:last-child {
							padding-right: 0;
						}
						
						#lightbox_slider_thumbs_holder img {
							width: 128px;
							display: inline-block;
							border: 3px solid #FFF;
							border-radius: 3px;
						}
						#lightbox_slider_thumbs_holder a.active img {
							border-color: #000;
						}
						{% endblock %}
					</style>
					{% endblock %}
					
					{% block slideshow_thumbs_js %}
					<script>
						(function(window, undefined){
							window.jQuery(function($){
								{% block slideshow_thumbs_js_content %}
								var $slideshow = $('#lightbox_slider');
								var $thumbs = $('#lightbox_slider_thumbs_holder');
								var last_index = 0;
								
								$thumbs.on('click', 'a', function(){
									$thumbs.find('.active').removeClass('active');
									$slideshow.carousel(last_index = +this.getAttribute('data-carousel-index'));
									this.className = (this.className + ' active').replace(/^\s+|\s+$/g, '');
								});
								
								$slideshow.bind('slid.bs.carousel', function(e){
									var index = $slideshow.find('.active', e.target).index();
									var $thumb = $thumbs.find('[data-carousel-index="' + index + '"]');
									var thumb = $thumb.get(0);
									
									if(last_index != index)
									{
										$thumbs.find('.active').removeClass('active');
										$thumb.addClass('active');
									}
									
									last_index = index;
									
									// the content width is lower than the element width
									if($thumbs[0].clientWidth >= $thumbs[0].scrollWidth)
									{
										return;
									}
									
									var left = thumb.offsetLeft - 15;
									var width = thumb.clientWidth + 6;
									var middle = (width >> 1);
									
									$thumbs.parent().animate({
										scrollLeft: left + width > ($thumbs[0].clientWidth >> 1)
											? (
												left + middle > ($thumbs[0].scrollWidth - ($thumbs[0].clientWidth >> 1))
													? $thumbs[0].scrollWidth
													: left + middle - ($thumbs[0].clientWidth >> 1) - 6
											)
											: 0
									}, 400);
								});
								{% endblock %}
							});
						})(Function('return this')());
					</script>
					{% endblock %}
				{% endblock %}
			{% endif %}
			
			{% block contents %}
				<section id="lightbox-{{ data.news.id }}">
					{% block content_title %}
						<h2 class="text-center hidden">{{ (site.show_news_categories and data.news.id_news_categories ? data.category.desc ~ ' - ') ~ data.news.title }}</h2>
					{% endblock %}
					
					{% if data.news.title_text1
						or (data.news.text1 and not (data.news.text1 == '<br>'))
						or data.news.title_text2
						or (data.news.text2 and not (data.news.text2 == '<br>'))
						or data.news.title_text3
						or (data.news.text3 and not (data.news.text3 == '<br>'))
					%}
						{% block content_col_1 %}
							<article class="col-md-4 col-sm-6 col-xs-12">
								<h1>{{ data.news.title_text1 | raw }}</h1>
								<h2>{{ data.news.title_text1 | raw }}</h2>
								<p>{{ data.news.text1 | raw }}</p>
							</article>
						{% endblock %}
						{% block content_col_2 %}
							<article class="col-md-4 col-sm-6 col-xs-12">
								<h1>{{ data.news.title_text2 | raw }}</h1>
								<h2>{{ data.news.title_text2 | raw }}</h2>
								<p>{{ data.news.text2 | raw }}</p>
							</article>
						{% endblock %}
						{% block content_col_3 %}
							<article class="col-md-4 col-sm-6 col-xs-12">
								<h1>{{ data.news.title_text3 | raw }}</h1>
								<h2>{{ data.news.title_text3 | raw }}</h2>
								<p>{{ data.news.text3 | raw }}</p>
							</article>
						{% endblock %}
						<div class="clearfix"></div>
					{% endif %}
					
					{% if data.docs|length %}
						{% block content_docs %}
							<div>
								{% for doc in data.docs %}
									{% block content_doc %}
										<a href="/{{ doc.src }}" target="_blank" class="button" rel="nofollow">
											<i class="fa fa-file-pdf-o"></i>&nbsp;{{ doc.title }}
										</a>&nbsp;
									{% endblock %}
								{% endfor %}
							</div>
						{% endblock %}
					{% endif %}
				</section>
			{% endblock %}
			
			{% block buttons %}
				<div id="lightbox_buttons">
					{% if site.form_subscribe %}
						{% block buttons_form_subscribe %}
							<a href="/subscribe/{{ data.news.id }}.html?lightbox[width]=315&amp;lightbox[height]=400" id="lightbox_subscribe" class="lightbox_button">
								{{ site.form_subscribe_text }}
							</a>
						{% endblock %}
					{% endif %}
				
					{% block buttons_facebook %}
						<a href="https://www.facebook.com/sharer/sharer.php?u={{ root_url_scheme() ?: 'http' ~ (SERVER.HTTPS ? 'https' : 'http') }}%3A%2F%2F{{ server_name() }}/get/{{ data.news.id }}.html%3Flang%3D{{ siteLang }}" target="_blank" id="lightbox_facebook" class="lightbox_button" rel="nofollow">
							<i class="fa fa-facebook fa-2x"></i>
						</a>
					{% endblock %}
				</div>
			{% endblock %}
		{% endblock content %}
		
{% if client.facebook %}
	{% block facebook_body_close %}
			</body>
		</html>
	{% endblock %}
{% endif %}
{% endblock %}