<?php

$inner_blocks = isset($block) && is_object($block) && ! empty($block->inner_blocks) ? $block->inner_blocks : [];
$hasCover = $attributes['hasCover'];
$coverPosition = $attributes['coverPosition'];
$blackWhiteCoverFilter = $attributes['blackWhiteCoverFilter'];
$aspectRatio = $attributes['aspectRatio'];
$coverUrl = $attributes['coverUrl'];
$coverAlt = $attributes['coverAlt'];
?>


<div <?php echo get_block_wrapper_attributes(array('class' => 'narrative-card ' . ($hasCover ? 'narrative-card--has-cover narrative-card--has-cover--' . $coverPosition . ' ' . ($blackWhiteCoverFilter ? 'narrative-card--black-white-cover-filter' : '') : ''))); ?>>

  <svg
    viewBox="0 0 1216 407"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    preserveAspectRatio="none"
    class="narrative-card__background">
    <path
      d="M1 11V406H1205L1215 1L1 11Z"
      fill="white"
      stroke="#136F63"
      stroke-width="2"
      vector-effect="non-scaling-stroke" />
  </svg>

  <?php if ($hasCover && $coverPosition === "left") : ?>
    <div class="narrative-card__cover<?php echo $aspectRatio && $aspectRatio !== "auto" ? ' narrative-card__cover--ratio-' . str_replace(['/', ':'], '-', $aspectRatio) : ''; ?>">
      <?php if ($hasCover && $coverUrl) : ?>
        <img src="<?php echo $coverUrl; ?>" alt="<?php echo $coverAlt; ?>">
      <?php endif; ?>
    </div>
  <?php endif; ?>

  <div class="narrative-card__content">
    <?php foreach ($inner_blocks as $inner_block) {
      echo $inner_block->render();
    } ?>
  </div>
  <?php if ($hasCover && $coverPosition === "right") : ?>
    <div class="narrative-card__cover<?php echo $aspectRatio && $aspectRatio !== "auto" ? ' narrative-card__cover--ratio-' . str_replace(['/', ':'], '-', $aspectRatio) : ''; ?>">
      <?php if ($hasCover && $coverUrl) : ?>
        <img src="<?php echo $coverUrl; ?>" alt="<?php echo $coverAlt; ?>">
      <?php endif; ?>
    </div>
  <?php endif; ?>

</div>