{% block page %}
<section class="section portfolio" id="portfolio{{ page.sub_group ? '_sub_' ~ page.sub_group }}">
	<h1>{{ page.name }}</h1>
	{% block title %}
		<h2 class="header-text">{{ page.name }}</h2>
		<h3 class="text-center">{{ page.desc }}</h3>
	{% endblock %}
	
	{% block content %}
		<div class="content">
			{# include 'pages/portfolio_articles.twig' #}
			
			{% 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 class="col-md-{{ cols }} col-sm-6 col-xs-12">
						<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
														: '/' ~ (
															portfolio.n_images > 1
																? ('get_port/' ~ portfolio.id ~ '.html?lightbox%5Bwidth%5D=640&amp;lightbox%5Bheight%5D=75p')
																: portfolio.src
														)
												}}" target="_blank" rel="nofollow" title="{{ portfolio.title }}">
										#}
										<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" title="{{ portfolio.title }}">
											<img src="/{{ portfolio.src_thumb }}" alt="{{ portfolio.title }}"/>
										</a>
									</div>
								{% endblock %}
							{% endif %}
						{% endblock %}
						
						{% block article_title %}
							<h2>{{
								(portfolio.url
									? '<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 %}
									{{ ('<p>' ~ portfolio.html ~ '</p>') | preg_replace(cleaner.p.regex, cleaner.p.replace) | raw }}
								{% 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 %}
				
				{% if not loop.last %}
					{{ fn_clearfix(index=loop.index, columns=page.columns) | raw }}
				{% endif %}
			{% endfor %}
			
			<div class="clearfix"></div>
		</div>
	{% endblock content %}
</section>
{% endblock page %}