<?php

/**
 * Video lightbox Block Template.
 *
 * @param   array $block The block settings and attributes.
 * @param   string $content The block inner HTML (empty).
 * @param   bool $is_preview True during backend preview render.
 * @param   int $post_id The post ID the block is rendering content against.
 *          This is either the post ID currently being displayed inside a query loop,
 *          or the post ID of the post hosting this block.
 * @param   array $context The context provided to the block by the post or it's parent block.
 */

// Support custom "anchor" values.
$anchor = '';
if (! empty($block['anchor'])) {
  $anchor = 'id="' . esc_attr($block['anchor']) . '" ';
}

// Load values and assign defaults.
$class_name = 'olympus-video-lightbox';

$theme = get_field('theme');
if ($theme) {
  $class_name .= ' ' . $theme;
}

$wrapper_attributes = get_block_wrapper_attributes(
  [
    'class' => $class_name
  ]
);
$poster_image = get_field('poster_image');
$video_embed = get_field('video_embed');

// TODO: validate this block
?>
<div <?php echo $anchor ?><?php echo $wrapper_attributes; ?>>
  <?php if ($poster_image): ?>
    <img src="<?php echo $poster_image['url'] ?>" class="olympus-video-lightbox-img" />
    <div class="olympus-video-lightbox-overlay"></div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="olympus-video-lightbox-play-btn">
      <path d="M56.3 66.3c-4.9-3-11.1-3.1-16.2-.3s-8.2 8.2-8.2 14V432c0 5.8 3.1 11.1 8.2 14s11.2 2.7 16.2-.3l288-176c4.8-2.9 7.7-8.1 7.7-13.7s-2.9-10.7-7.7-13.7l-288-176zM24.5 38.1C39.7 29.6 58.2 30 73 39L361 215c14.3 8.7 23 24.2 23 41s-8.7 32.2-23 41L73 473c-14.8 9.1-33.4 9.4-48.5 .9S0 449.4 0 432V80C0 62.6 9.4 46.6 24.5 38.1z" />
    </svg>
  <?php endif; ?>
</div>
<div class="olympus-video-lightbox-wrap" style="display:none;">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="olympus-video-lightbox-close">
    <path d="M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z" />
  </svg>
  <div class="olympus-video-lightbox-content" data-embed="<?php echo base64_encode($video_embed) ?>"></div>
</div>