<?php

/**
 * Slider Block Render Template
 *
 * @param array    $attributes Block attributes.
 * @param string   $content    Block content.
 * @param WP_Block $block      Block instance.
 */

// Get block attributes
$loop = isset($attributes['loop']) ? $attributes['loop'] : false;
$images = isset($attributes['images']) ? $attributes['images'] : [];

// Get block wrapper attributes
$wrapper_attributes = get_block_wrapper_attributes([
  'class' => 'orphic-ui-block-animated-image-layers'
]);

// Get anchor if any
$anchor = '';
if (!empty($block->anchor)) {
  $anchor = 'id="' . esc_attr($block->anchor) . '" ';
}

// Create data attribute for the loop option
$loop_attribute = $loop ? 'data-loop=1' : 'data-loop=0';
?>

<div <?php echo $anchor; ?><?php echo $wrapper_attributes; ?> <?php echo $loop_attribute; ?>>
  <?php if (!empty($images)): ?>
    <div class="animated-background">
      <img src="<?php echo esc_url($images[0]['url']); ?>" alt="<?php echo esc_attr($images[0]['alt']); ?>" />
    </div>

    <div class="animated-layers">
      <?php $count = 0; ?>
      <?php foreach ($images as $index => $image): ?>

        <?php if ($count != 0): ?>
          <div class="animated-layer" style="animation-delay: <?php echo $index * 0.5; ?>s">
            <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>">
          </div>
        <?php endif; ?>

        <?php $count++; ?>
      <?php endforeach; ?>
    </div>
  <?php endif; ?>
</div>