<?php

/**
 * Promo card 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-promo-card';

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

if (is_admin()) {
  $class_name .= ' is-admin';
}

$style = '';

$width = get_field('width') ? get_field('width') : '400';
if ($width) {
  $style .= 'width:' . $width . 'px;';
}

$wrapper_attributes = get_block_wrapper_attributes(
  [
    'class' => $class_name,
    'style' => $style
  ]
);
$closed_label = get_field('closed_label');
$closed_background_color = get_field('closed_background_color') ? get_field('closed_background_color') : '#1F509A';
$closed_color = get_field('closed_color') ? get_field('closed_color') : '#FFFFFF';
$close_icon_color = get_field('close_icon_color') ? get_field('close_icon_color') : '#FFFFFF';
$promo_id = get_field('promo_id') ? get_field('promo_id') : 'default-promo';

// TODO: validate this block
?>
<div <?php echo $anchor ?><?php echo $wrapper_attributes; ?> data-promoid="<?php echo $promo_id ?>">
  <div class="olympus-promo-card-closed" style="display:none;background:<?php echo $closed_background_color ?>;color:<?php echo $closed_color ?>;">
    <?php echo $closed_label ?>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
      <path d="M336 96c8.8 0 16 7.2 16 16l0 224c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-185.4L59.3 411.3c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6L297.4 128 112 128c-8.8 0-16-7.2-16-16s7.2-16 16-16l224 0z" />
    </svg>
  </div>
  <div class="olympus-promo-card-open" style="display:none;">
    <svg class="olympus-promo-card-close-btn" style="fill:<?php echo $close_icon_color ?>;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
      <path class="fa-secondary" opacity=".4" d="" />
      <path class="fa-primary" d="M324.5 411.1c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L214.6 256 347.1 123.5c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L192 233.4 59.6 100.9c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L169.4 256 36.9 388.5c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L192 278.6 324.5 411.1z" />
    </svg>
    <InnerBlocks />
  </div>
</div>