<?php 
/**
 * The template for displaying archive pages
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package asds
 */
    
get_header();

$post_type = get_post_type();


$myposts  = get_posts( [
	'posts_per_page' => -1,
	'post_type' => $post_type,
	
] );
?>
<?php get_template_part( 'template-parts/content_header', 'none' ); ?> 

 
<section class="section content_section">
	<main id="primary" class="site-main container">
    <?php  if($post_type == 'photo-gallery'):  ?>
    <script>
        let data = [
        <?php foreach($myposts as $mypost): ?>
            <?php 
            $post_id = $mypost->ID;            
            $post_title = get_the_title( $mypost->ID );                       
            ?>
            <?php
            if(have_rows('blocks', $post_id)):
            while(have_rows('blocks', $post_id)): the_row(); ?> 
            <?php $list = get_sub_field('list'); $list_count = count($list)?>
            <?php $image_url = $list[0]["photo"]["url"]; ?>
            {
            id: <?php echo $post_id ?>,
            title: "<?php echo esc_html($post_title); ?>",
            img: "<?php echo $image_url; ?>",
            photosLength: <?php echo $list_count ?>,
            photosUrl: '<?php the_permalink($post_id) ?>',
            },           
            
            <?php endwhile; 
            endif;
            ?> 
        <?php endforeach;?>
        ];
    </script>
    <?php else: ?>

    <?php endif; ?> 
    <div class="photogallery__container" id="photogallery__container"></div>
    <?php wp_reset_postdata();  ?>
	</main><!-- #main -->
	</section>
<?php  if($post_type == 'photo-gallery'):  ?>
<script>
       

      const photogalleryContainer = document.getElementById(
        "photogallery__container"
      );

      photogalleryContainer.innerHTML = "";

      data.forEach((item, index) => {
        let albumDiv = document.createElement("div");
        albumDiv.classList.add("album");
        albumDiv.classList.add("pointer");
        albumDiv.innerHTML += `
		  <div class="album-content"><a href="${item.photosUrl}">
				<div class="album-text">
				<p>${item.photosLength} фото</p>
				<div class="album-title">
					<h4>${item.title}</h4>
					<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M15.832 9.5L16.1856 9.14645L16.5391 9.5L16.1856 9.85355L15.832 9.5ZM3.95703 10C3.68089 10 3.45703 9.77614 3.45703 9.5C3.45703 9.22386 3.68089 9 3.95703 9V10ZM11.4356 4.39645L16.1856 9.14645L15.4785 9.85355L10.7285 5.10355L11.4356 4.39645ZM16.1856 9.85355L11.4356 14.6036L10.7285 13.8964L15.4785 9.14645L16.1856 9.85355ZM15.832 10H3.95703V9H15.832V10Z" fill="white"/>
</svg>
</div>
					</div></a>
					</div>
			`;

			albumDiv.style.backgroundImage = `url('${item.img}')`;

        photogalleryContainer.appendChild(albumDiv);
      });
</script>
<?php endif; ?> 
<?php get_footer(); ?>