Benedikt Missmann

<div id="grid-film" class="brxe-block film__grid">
    <!-- Wrapper for films and image loop -->
    <div class="brxe-block film-card__wrapper">
        <?php
        // Query for films
        $args = array(
            'post_type' => 'films',
            'posts_per_page' => -1,  // Show all posts
            'orderby' => 'date',     // Order by date
            'order' => 'DESC'        // Descending order, to show the latest films first
        );
        $film_query = new WP_Query($args);
        if ($film_query->have_posts()) :
            while ($film_query->have_posts()) : $film_query->the_post();
                $film_id = get_the_ID();
                $feature_image = get_the_post_thumbnail_url($film_id, 'full');  // Get the featured image
                $film_url = get_permalink($film_id); // Get the film permalink
                $film_date = get_field('film_date'); // Custom ACF field "film_date"
                $categories = get_the_terms($film_id, 'category');
                if ($categories && !is_wp_error($categories)) {
                    $category_names = wp_list_pluck($categories, 'name');
                    $categories_list = implode(' / ', $category_names); // Join categories with "/"
                }
        ?>
        <!-- Structure for the individual film card -->
        <div class="brxe-block film-card" data-film-id="<?php echo $film_id; ?>" data-feature-image="<?php echo esc_url($feature_image); ?>">
            <div class="brxe-block film-card__date-wrapper">
                <p class="brxe-text-basic film-card__date">
                    <?php echo esc_html($film_date); ?> <!-- Show the custom date field -->
                </p>
            </div>

            <div class="brxe-block film-card__title-wrapper">
                <h3 class="brxe-heading film-card__heading">
                    <a href="<?php echo esc_url($film_url); ?>" title="<?php the_title_attribute(); ?>" class="film-card__link">
                        <?php the_title(); ?>
                    </a>
                </h3>
            </div>

            <div class="brxe-block film-card__category-wrapper">
                <p class="brxe-text-basic film-card__text-basic">
                    <?php echo $categories_list; ?> <!-- Show the categories separated by "/" -->
                </p>
            </div>

            <div class="brxe-block film-card__cta">
                <?php
                $film_link = get_field('film_link'); // Get the custom field "film_link"
                if ($film_link): // Only show the icon if there is a value in the "film_link" field
                ?>
                    <svg class="brxe-icon film-card__icon" id="brxe-lhlnlj" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
                        <path d="m560-240-56-58 142-142H160v-80h486L504-662l56-58 240 240-240 240Z"></path>
                    </svg>
                <?php endif; ?>
            </div>
        </div>
        <?php endwhile; endif; ?>
    </div> <!-- End of the wrapper for the film loop -->

    <!-- Logic for the image loop -->
    <div class="brxe-juendv brxe-block image-loop">
        <?php
        // Rewind the loop for the images
        $film_query->rewind_posts();  
        if ($film_query->have_posts()) :
            $is_first_image = true;  // Flag for the first image
        ?>
            <div class="sticky-div"> <!-- Add the div with the "sticky-div" class -->
            <?php
            while ($film_query->have_posts()) : $film_query->the_post();
                $feature_image = get_the_post_thumbnail_url(get_the_ID(), 'full'); // Get the featured image
                if ($feature_image): 
                    // Set the first image visible by default
                    $style = $is_first_image ? 'display: block;' : 'display: none;';
                    $is_first_image = false;
            ?>
                <figure class="brxe-hkdyjt brxe-image image-loop__image tag" data-film-id="<?php echo get_the_ID(); ?>" style="<?php echo $style; ?>">
                    <img src="<?php echo esc_url($feature_image); ?>" alt="<?php the_title(); ?>">
                </figure>
            <?php endif; endwhile; ?>
            </div> <!-- Close the div with the "sticky-div" class -->
        <?php endif; ?>
    </div> <!-- End of the image loop -->
</div>

.film__grid{
      width: var(--content-width);
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-gap: 0;
    
}



.film-card__wrapper{
  display: flex;
  flex-direction: column;
  gap:0;
}

.film-card{
  display:grid;
  grid-template-columns: minmax(2.5rem, 1fr) minmax(5rem, 3fr) minmax(5rem, 2fr) minmax(auto, 0.5fr);
  padding-block: var(--content-gap);
  border-block-end: 1px solid var(--neutral-light-trans-30);
  align-items: center;
  ;
}

.film-card__heading{
  font-size: var(--h4);
  font-weight: 400;
  color: red;
}

.image-loop{
  background: transparent;
  display: flex;
  align-self: stretch;
}

.sticky-div{
  position: sticky;
  top: var(--container-gap);
}

document.addEventListener('DOMContentLoaded', function() {
    const filmCards = document.querySelectorAll('.film-card');
    const filmLinks = document.querySelectorAll('.film-card__heading a'); // Seleziona i link
    const images = document.querySelectorAll('.image-loop__image');
    
    // Funzione per mostrare l'immagine corrispondente
    function showImage(filmId) {
        images.forEach(image => {
            if (image.getAttribute('data-film-id') === filmId) {
                image.style.display = 'block'; // Mostra l'immagine corrispondente
            } else {
                image.style.display = 'none'; // Nascondi le altre immagini
            }
        });
    }

    // Aggiungi l'evento hover su ciascuna card del film
    filmCards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            const filmId = card.getAttribute('data-film-id');
            showImage(filmId);
        });

        card.addEventListener('mouseleave', function() {
            // Quando il mouse lascia il film, ripristina la visualizzazione dell'immagine iniziale
            const firstImageId = document.querySelector('.image-loop__image').getAttribute('data-film-id');
            showImage(firstImageId); // Mostra l'immagine del primo film (la default)
        });
    });

    // Aggiungi l'evento focus sul link del film (per tastiera)
    filmLinks.forEach(link => {
        link.addEventListener('focus', function() {
            const filmId = link.closest('.film-card').getAttribute('data-film-id');
            showImage(filmId); // Mostra l'immagine corrispondente quando il link riceve il focus
        });
    });

    // Quando il mouse esce da tutte le immagini (nessun hover), mostra l'immagine di default
    document.querySelector('#grid-film').addEventListener('mouseleave', function() {
        const firstImageId = document.querySelector('.image-loop__image').getAttribute('data-film-id');
        showImage(firstImageId); // Mostra l'immagine iniziale quando il mouse esce dal loop
    });
});