<?php
get_header();
$post_id = get_the_ID();	
$cat = get_the_category($post_id);
?>
<main class="page-single-post">
	<section class="banner-post">
		<ul class="breadcrumbs container desktop">
			<li>
				<a href="/" class="home fa-home" title="Главная страница">
					<svg width="21" height="16" viewBox="0 0 21 16" fill="none">
						<path d="M11.6473 10.6896H12.1473V11.1896V15.4691H16.4353C16.5143 15.4691 16.5756 15.4462 16.6432 15.3788C16.7108 15.3113 16.7333 15.2505 16.7333 15.1725V9.36976L10.0513 3.8712L3.36922 9.36976V15.1725C3.36922 15.2505 3.39178 15.3113 3.45937 15.3788C3.52698 15.4462 3.5883 15.4691 3.66723 15.4691H7.95527V11.1896V10.6896H8.45527H11.6473ZM10.3711 1.74407L18.9226 8.86174L19.5643 8.09722L16.9141 5.8987L16.7333 5.74874V5.51388V0.537319H14.5413V2.86272V3.93127L13.7209 3.2466L10.6815 0.709949C10.5114 0.572829 10.3095 0.499981 10.0513 0.499981C9.79293 0.499981 9.59094 0.572914 9.42075 0.710194L0.538196 8.09712L1.17996 8.86174L9.73142 1.74407L10.0513 1.47783L10.3711 1.74407Z" fill="white" stroke="white"/>
					</svg>
				</a>
			</li>
			<li><a href="/novosti/" title="novosti">новости</a></li>
			<li><span><?php echo get_the_title(); ?></span></li>
		</ul>
		<div class="container">
			<div class="banner-wrapper">
				<div class="banner-left-part">
					<time datetime="<?php echo get_the_date( 'd.m.Y' ); ?>"><?php echo get_the_date( 'd.m.Y' ); ?></time>
					<h1 class="single-post_title"><?php the_title(); ?></h1>
					<a class="link_cat" href="/novosti/">Новости</a>
				</div>
				<div class="banner-right-part">
					<?php the_post_thumbnail(); ?>
				</div>
			</div>
		</div>
	</section>
	
	<div class="single-post-content">
		<div class="container">
			<div class="post-content-wrapper">
				<div class="content-left-part">
					<?php the_content(); ?>
				</div>		
					<?php get_template_part( 'template-parts/block-read-also' ); ?>
			</div>
		</div>
	</div>
	
	<?php get_template_part( 'template-parts/map' ); ?>
		
</main>

<script>
  document.addEventListener('click', (event) => {
	 if (event.target.classList.contains("tab-clicked")) {
		const tabsBlock = event.target.parentNode.parentNode.parentNode;
		const tabNum = event.target.parentNode.getAttribute('data-tab-btn');

		tabsBlock.querySelector('.tabs-content').style = 'opacity:0; filter: blur(5px); left: -50%';

		tabsBlock.querySelectorAll('.tab').forEach((item) => {
		   item.classList.remove('active');
		});

		tabsBlock.querySelector(`[data-tab-btn='${tabNum}']`).classList.add('active');

		setTimeout(() => {
		   tabsBlock.querySelector('.tabs-content').style = '';

		   tabsBlock.querySelectorAll('.page-tab').forEach((item, index) => {
			  if (index != Number(tabNum - 1)) item.classList.remove('active'); else item.classList.add('active');
		   });
		}, 300)

		return;
	 }
  });
</script>

<?php
get_footer();
