<?php
get_header();
$template_directory = get_template_directory_uri();
$srcset = $template_directory . '/assets/images/lazyload.png';
$post_id = get_the_ID();
$main_content = get_field('main_content');
?>
<main>
<div class="article">
<div class="container-content">
<a class="back-link" href="<?php echo get_home_url(); ?>">
<svg xmlns="http://www.w3.org/2000/svg" width="7" height="10" viewBox="0 0 7 10" fill="none">
<path d="M5.75 0.833984L1.58333 5.00065L5.75 9.16732" stroke="#A4A4A4" stroke-width="1.5"/>
</svg>
<span>Back</span>
</a>
<h1 class="title title-1"> <?php the_title(); ?> </h1>
<div class="article-date">
<span class="date"><?php echo get_the_date("m.d.Y", $post_id); ?></span>
</div>
<?php
$main_img = $main_content['main_img'];
if ($main_img) :
?>
<div class="article-main-img">
<img srcset="<?php echo $srcset; ?>" class="-lazyload" src="<?php echo $main_img['url']; ?>"
alt="<?php echo $main_img['alt']; ?>">
</div>
<?php
endif;
?>
<div class="content">
<?php echo $main_content['post_content']; ?>
</div>
</div>
</div>
<?php if (!wp_is_mobile()) : ?>
<div class="related-articles">
<div class="container">
<?php
$related_articles = get_field('related_articles');
$has_related_articles = isset($related_articles['related_article']) && $related_articles['related_article'];
$title = $related_articles['title'] ?? '';
if ($has_related_articles || ($related_article_query = new WP_Query([
'posts_per_page' => -1,
'post_type' => 'post',
'orderby' => 'date',
'order' => 'DESC',
'post__not_in' => [$post_id]
])) && $related_article_query->have_posts()) :
?>
<h2 class="title title-1"><?php echo $title; ?></h2>
<div class="blog-result">
<div class="swiper-container " data-animate="swim-top">
<div class="swiper-wrapper">
<?php
if ($has_related_articles) {
foreach ($related_articles['related_article'] as $item) {
$post_id = $item->ID;
$main_content = get_field('main_content', $post_id);
$main_img = $main_content['main_img'];
$content = $main_content['post_content'];
$post_date = get_the_date('d.m.Y', $post_id);
$trimmed_content = mb_strimwidth(wp_strip_all_tags($content), 0, 120, '...');
?>
<div class="swiper-slide">
<a href="<?php echo get_permalink($post_id); ?>"
class="news-item -white">
<?php if ($main_img) : ?>
<div class="news-item-thumbnail">
<img src="<?php echo esc_url($main_img['url']); ?>"
alt="<?php echo esc_attr($main_img['alt']); ?>">
</div>
<?php endif; ?>
<div class="news-item-content">
<h3 class="news-title title-4"><?php echo get_the_title($post_id); ?></h3>
<p class="news-text"><?php echo $trimmed_content; ?></p>
<p class="news-date body-3"><?php echo $post_date; ?></p>
</div>
</a>
</div>
<?php
}
} else {
while ($related_article_query->have_posts()) : $related_article_query->the_post();
$main_content = get_field('main_content');
$main_img = $main_content['main_img'];
$content = $main_content['post_content'];
$post_date = get_the_date('d.m.Y');
$trimmed_content = mb_strimwidth(wp_strip_all_tags($content), 0, 120, '...');
?>
<div class="swiper-slide">
<a href="<?php the_permalink(); ?>" class="news-item -white">
<?php if ($main_img) : ?>
<div class="news-item-thumbnail">
<img src="<?php echo esc_url($main_img['url']); ?>"
alt="<?php echo esc_attr($main_img['alt']); ?>">
</div>
<?php endif; ?>
<div class="news-item-content">
<h3 class="news-title title-4"><?php the_title(); ?></h3>
<p class="news-text"><?php echo $trimmed_content; ?></p>
<p class="news-date body-3"><?php echo $post_date; ?></p>
</div>
</a>
</div>
<?php
endwhile;
wp_reset_postdata();
}
?>
</div>
<div class="swiper-navigation">
<div class="swiper-button-prev slider-btn -white">
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/icons/arrow-left-black.svg"
alt="button-prev">
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next slider-btn -white">
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/icons/arrow-right-black.svg"
alt="button-next">
</div>
</div>
</div>
</div>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
</main>
<?php
get_footer();
?>