{#
{% block page %}
	<section id="portfolio{{ page.sub_group ? '_sub_' ~ page.sub_group }}" class="blog no-padding-top portfolio">
		<h1>{{ page.name }}</h1>
		{% block title %}
			<h2 class="title">{{ page.name }}</h2>
			<h3 class="description">{{ page.desc }}</h3>
		{% endblock %}
		<div class="container">
			
			{% block content %}
				<div class="row group show">
					{% for portfolio in data.ports %}

						{% set has_content = portfolio.title_text1 or portfolio.title_text2 or portfolio.title_text3 or (portfolio.text1 and portfolio.text1 != '<br>') or (portfolio.text2 and portfolio.text2 != '<br>') or (portfolio.text3 and portfolio.text3 != '<br>') %}
						
						{% block article %}
							<article id="portfolio_{{ portfolio.id }}" class="col-md-{{ cols }} col-sm-{{ {12:12,6:6,4:6,3:6}[cols] }} os-animation animated fadeInUp" data-os-animation="fadeInUp">
								<h1>{{ portfolio.title }}</h1>
								
								{% block article_header %}
									{% if portfolio.id_youtube %}
										{% block article_header_youtube %}
											<div class="article-image">
												<div class="embeddedvideo" style="background:url('{{ constant('ROOT_URL_SCHEME') }}://img.youtube.com/vi/{{ portfolio.id_youtube }}/mqdefault.jpg');background-size:cover;background-position:center center;">
													<img src="{{ youtube_src }}" data-id="{{ portfolio.id_youtube }}" class="youtube_video" style="background:url('/images/youtube-play.png') no-repeat center;"/>
												</div>
											</div>
										{% endblock %}
									{% else %}
										{% block article_header_image %}
											<div class="article-image">
												<a href="{{
														portfolio.url
															? portfolio.url
															: '/get_port/' ~ portfolio.id ~ '.html?lightbox%5Bwidth%5D=640&amp;lightbox%5Bheight%5D=75p'
												}}"{{ (portfolio.url ? ' target="_blank"')|raw }} rel="nofollow">
													<img src="/{{ portfolio.src_thumb }}" alt="{{ portfolio.title }}"/>
												</a>
											</div>
										{% endblock %}
									{% endif %}
								{% endblock %}
								
								{% block article_title %}
									<h2 class="title">{{
										((portfolio.url and not(portfolio.id_youtube))
											? '<a href="' ~ portfolio.url ~ '" target="_blank" rel="nofollow">' ~ portfolio.title ~ '</a>'
											: portfolio.title
										) | raw
									}}</h2>
								{% endblock %}
								
								{% block article_contents %}
									{% if portfolio.html and portfolio.html != '<br>' and portfolio.html != '<p>&nbsp;</p>' %}
										{% block article_content %}
											<div class="padding-30 no-padding-top no-padding-bottom description">
												{{ ('<p>' ~ portfolio.html ~ '</p>') | preg_replace(cleaner.p.regex, cleaner.p.replace) | raw }}
											</div>
										{% endblock %}
									{% endif %}
									
									{% if not(portfolio.url) and not(portfolio.id_youtube) and (has_content or portfolio.n_images > 1) %}
										{% block article_hidden_section %}
											<section>
												<h1>{{ portfolio.title | raw }}</h1>
												<article class="col-md-4 col-sm-6 col-xs-12">
													<h1>{{ portfolio.title_text1 }}</h1>
													<h2>{{ portfolio.title_text1 }}</h2>
													<p>{{ portfolio.text1 | raw }}</p>
												</article>
												<article class="col-md-4 col-sm-6 col-xs-12">
													<h1>{{ portfolio.title_text2 }}</h1>
													<h2>{{ portfolio.title_text2 }}</h2>
													<p>{{ portfolio.text2 | raw }}</p>
												</article>
												<article class="col-md-4 col-sm-6 col-xs-12">
													<h1>{{ portfolio.title_text3 }}</h1>
													<h2>{{ portfolio.title_text3 }}</h2>
													<p>{{ portfolio.text3 | raw }}</p>
												</article>
												<div class="clearfix"></div>
											</section>
										{% endblock article_hidden_section %}
									{% endif %}
								{% endblock article_contents %}
							</article>
						{% endblock article %}
					{% endfor %}
				</div>
			{% endblock content %}
		</div>
	</section>
{% endblock page %}
#}

{% block page %}
<section id="portfolio{{ page.sub_group ? '_sub_' ~ page.sub_group }}" class="portfolio container-fluid section">
	{% set carousel_id = page.group ~ (page.sub_group ? '-sub-' ~ page.sub_group) %}
	
	<header class="title mobile-center">
		<h1>{{ page.name }}</h1>
		{% block title %}
			<h2 class="text-center">{{ page.name }}</h2>
			<h3 class="text-center">{{ page.desc }}</h3>
		{% endblock %}
	</header>
	
	<div id="carousel-{{ carousel_id }}" class="carousel slide carousel-fade bs-carousel" data-ride="carousel">
		{% block content %}
		<div class="carousel-inner" role="listbox">
			{% for portfolio in data.ports %}
			
				{% set has_content = portfolio.title_text1
					or portfolio.title_text2
					or portfolio.title_text3
					or (portfolio.text1 and portfolio.text1 != '<br>')
					or (portfolio.text2 and portfolio.text2 != '<br>')
					or (portfolio.text3 and portfolio.text3 != '<br>')
				%}
			
				{% block article %}
				<article id="portfolio_{{ portfolio.id }}" class="item {{ loop.first ? 'active' }}">
					{% block article_contents %}
					<div class="container">
						<h1>{{ portfolio.title }}</h1>
						<div class="row">
							{% block article_image %}
								<div class="col-sm-6 padding-10-0">
									<div class="article-image">
										{% if portfolio.id_youtube %}
											{% block article_image_youtube %}
													<div class="embeddedvideo" style="background:url('{{ constant('ROOT_URL_SCHEME') }}://img.youtube.com/vi/{{ portfolio.id_youtube }}/mqdefault.jpg');background-size:cover;background-position:center center;">
														<img src="{{ youtube_src }}" data-id="{{ portfolio.id_youtube }}" class="youtube_video" style="background:url('/images/youtube-play.png') no-repeat center;"/>
													</div>
											{% endblock %}
										{% else %}
											{% block article_image_image %}
													<a href="{{
															portfolio.url
																? portfolio.url
																: '/get_port/' ~ portfolio.id ~ '.html?lightbox%5Bwidth%5D=640&amp;lightbox%5Bheight%5D=75p'
													}}"{{ (portfolio.url ? ' target="_blank"')|raw }} rel="nofollow">
														<img src="/{{ portfolio.src_thumb }}" alt="{{ portfolio.title }}" />
													</a>
											{% endblock %}
										{% endif %}
									</div>
								</div>
							{% endblock article_image %}
							<div class="col-sm-5 col-sm-push-1">
								<section class="mobile-center">
									{% block article_title %}
										<header class="title mobile-center">
											<h2>{{
												((portfolio.url and not(portfolio.id_youtube))
													? '<a href="' ~ portfolio.url ~ '" target="_blank" rel="nofollow">' ~ portfolio.title ~ '</a>'
													: portfolio.title
												) | raw
											}}</h2>
										</header>
									{% endblock article_title %}
								
							
									{% if portfolio.html and portfolio.html != '<br>' and portfolio.html != '<p>&nbsp;</p>' %}
										{% block article_content %}
											{{ ('<p>' ~ portfolio.html ~ '</p>') | preg_replace(cleaner.p.regex, cleaner.p.replace) | raw }}
										{% endblock %}
									{% endif %}
									
									{# <a href="#" class="btn btn-default"><span>Learn more</span></a> #}
								</section>
							</div>
								
						</div>
					</div>
					{% endblock article_contents %}
					
					{% if not(portfolio.url) and not(portfolio.id_youtube) and (has_content or portfolio.n_images > 1) %}
						{% block article_hidden_section %}
							<section>
								<h1>{{ portfolio.title | raw }}</h1>
								<article class="col-md-4 col-sm-6 col-xs-12">
									<h1>{{ portfolio.title_text1 }}</h1>
									<h2>{{ portfolio.title_text1 }}</h2>
									<p>{{ portfolio.text1 | raw }}</p>
								</article>
								<article class="col-md-4 col-sm-6 col-xs-12">
									<h1>{{ portfolio.title_text2 }}</h1>
									<h2>{{ portfolio.title_text2 }}</h2>
									<p>{{ portfolio.text2 | raw }}</p>
								</article>
								<article class="col-md-4 col-sm-6 col-xs-12">
									<h1>{{ portfolio.title_text3 }}</h1>
									<h2>{{ portfolio.title_text3 }}</h2>
									<p>{{ portfolio.text3 | raw }}</p>
								</article>
								<div class="clearfix"></div>
							</section>
						{% endblock article_hidden_section %}
					{% endif %}
				</article>
				{% endblock article %}
			{% endfor %}
		</div>
		{% endblock content %}

		{% block content_controls %}
			<a class="left carousel-control" href="#carousel-{{ carousel_id }}" data-slide="prev">
				<span class="fa fa-chevron-left" aria-hidden="true"></span>
			</a>
			<a class="right carousel-control" href="#carousel-{{ carousel_id }}" data-slide="next">
				<span class="fa fa-chevron-right" aria-hidden="true"></span>
			</a>
		{% endblock content_controls %}
	</div>
</section>
{% endblock page %}