{% extends "base.twig" %}

{% block content %}

<div class="blog">
	<div class="container-fluid">
		<div class="row justify-center blog__banner">
			<div class="col-md-6 col-xl-5 col-xxl-4">
				<div class="blog__img">
					<img id="postThumbnail" src="{{ post.thumbnail.src }}" alt="{{ post.thumbnail.alt }}">
				</div>
			</div>
			<div class="col-md-6 col-xl-5 col-xxl-4">
				<div class="blog__info">
					<a href="{{ blog_page }}" data-blog-page="{{ blog_page }}" class="blog__btn-back js-blog-back">< {{ t('back to blog') }}</a>
					<div class="blog__info-tag">
						<p>{{ post.date|date("M d, Y") }}</p>
						<p>{{ minutes }} {{ t('min read') }}</p>
					</div>
					<h1 class="h3 blog__info-title">{{ post.title }}</h1>
				</div>
			</div>
		</div>
		<div class="row justify-center">
			<div class="col-md-10 col-xl-8 col-xxl-6">
				<div class="blog__content js-blog-content">
					{{ post.content }}
				</div>
				<div class="blog__social-list blog__content-social">
					{{ include('templates/page-elements/views/social_share.twig') }}
				</div>
			</div>
		</div>
	</div>
</div>

{% if has_cta %}
  {% include 'templates/partials/cta.twig' with {'title': cta_text, 'button_text': cta_button_text, 'link': cta_link["url"], 'target':  cta_link["target"]} %}
{% endif %}


<section class="small-projects-related light-border-top">
    <div class="container-fluid">
        <div class="row justify-center">
          <div class="col-12">
            <h3 class="t-700 text-center mb-3">{{ t('Read next') }}</h3>
          </div>
          <div class="col-12 col-xl-10 blog-list__wrap result-wrap">
            {% if prev_post %}
              {% include 'templates/partials/small-post-card.twig' with {'post': prev_post} %}
            {% endif %}

            {% if next_post %}
              {% include 'templates/partials/small-post-card.twig' with {'post': next_post} %}
            {% endif %}
          </div>
        </div>
    </div>
</section>

{% if fields.thumbnails %}
	<section class="d-none" data-thumbnails>
		{% for thumb in fields.thumbnails %}
			<span>{{ thumb.thumbnail }}</span>
		{% endfor %}
	</section>
{% endif %}

<div class="modal-wrap">
	<span class="close-btn">
			<img src="{{ function('get_frontend_static_asset', 'assets/icons/close-button.svg') }}" alt="{{ t('close') }}"/>
	</span>
	<div class="modal blog__modal">
		<img id="modalImage" src="{{ post.thumbnail.src }}"></img>
	</div>
</div>

<div class="video-modal blog-modal" id="video-modal">
	<span class="close-btn">
			<img src="{{ function('get_frontend_static_asset', 'assets/icons/close-button.svg') }}" alt="{{ t('close') }}"/>
	</span>
	<div class="modal"></div>
</div>


{% endblock %}