<div id="popup" class="<?= 'anim-type-' . $animation_type; ?> <?= 'anim-duration-' . $animation_duration; ?>">
    <div class="close">
        <?php require plugin_dir_path(__FILE__) . 'close.svg'; ?>
    </div>

    <?php
    if (have_rows('input_group', 'acf_form')) :
        while (have_rows('input_group', 'acf_form')) : the_row();
            if (get_row_layout() == 'titre') : ?>
                <div class="pop-up-header">
                    <?php echo get_sub_field('type_de_titre') === 'Titre2' ? '<h2>' . get_sub_field('titre2') . '</h2>' : '<h3>' . get_sub_field('titre3') . '</h3>'; ?>
                </div>
            <?php endif;
            if (get_row_layout() == 'text_line') :  echo '<span>' . get_sub_field('text_line') . '</span> <br>';
            endif;
            if (get_row_layout() == 'textarea') :  echo '<p>' . get_sub_field('textarea') . '</p>';
            endif;
            if (get_row_layout() == 'wysiwyg') :  echo '<p>' . get_sub_field('wysiwyg') . '</p>';
            endif;
            ?>
            <div>
                <?php
                if (get_row_layout() == 'image') :
                    $image = get_sub_field('image');
                    echo $image ? '<img src="' . esc_url($image['url']) . '" alt="' . esc_attr($image['alt']) . '"/>' : '';
                endif;
                ?>
            </div>

    <?php
            if (get_row_layout() == 'button') :  echo '<a class="button" href="' . get_sub_field('link') . '">' . get_sub_field('link_text') . '</a>';
            endif;


        endwhile;
    endif; ?>
    <!-- <div class="pop-up-header">
        <h2><?= $title; ?></h2>

    </div>
    <div class="pop-up-body">

        <?= $text; ?>

        <div class="media">
            <?php
            if (isset($img_id) && $img_id != 0) {
                $image_url = wp_get_attachment_url($img_id);
                // Affichage de l'image
                echo '<img src="' . $image_url . '" alt="Description de l\'image">';
            }
            if (isset($vid_id) && $vid_id != 0) {
                $media_url = wp_get_attachment_url($vid_id);
                $poster_url = wp_get_attachment_url($poster_id);
            ?>
                <video controls="conrols" src="<?= $media_url; ?>"></video>
                <img class="poster" src="<?= $poster_url; ?>" alt="poster vidéo">
            <?php
            }
            ?>
        </div>
        <?php if (isset($link) && $link !== '') { ?>
            <a href="<?= $link; ?>" class="pop-up-link" target="_blank" rel="noreferrer noopener">cliquez ici</a>
        <?php } ?>
    </div> -->
</div>
<style>
    #popup {
        max-width: <?= $type === 'band' ? '100%' : $width . 'px'; ?>;
        <?= $type === 'band' ? 'width: 100%;' : ''; ?>max-height: <?= $height . 'px'; ?>;
        <?= $position_x_side; ?>: <?php if ($position_type === 'center') {
                                        echo '50%';
                                    } else if ($type === 'band') {
                                        echo '0';
                                    } else {
                                        echo $position_x_val . "px";
                                    } ?>;
        <?= $position_y_side; ?>: <?= $position_type === 'center' ? '50%' : $position_y_val . 'px'; ?>;

        transform: translate(<?= $position_type === 'center' ? '-50%, -50%' : '0, 0'; ?>);
    }

    <?php if ($type === 'band') { ?>.media {
        max-width: 30%;
    }

    <?php }; ?>
</style>