<?php
$graphics = mb_get_block_field("component-side-graphics");
$g = reset($graphics);
// graphics offset
$x_offset = mb_get_block_field("component-side-graphics-x");
$x = empty($x_offset) ? "-100" : $x_offset;
$y_offset = mb_get_block_field("component-side-graphics-y");
$y = empty($y_offset) ? "-50" : $y_offset;
// graphics width
$width = mb_get_block_field("component-side-graphics-width");
$w = empty($width) ? "fit-content" : $width . "px";
// graphics settings
$side = mb_get_block_field("component-side-graphics-side");
$s = empty($side) ? "left: 0px;" : $side;

if ($graphics) { ?>
<div <?= inoby_block_attrs($attributes, ["class" => "component-side-graphics"]) ?>>
  <div class="container">
    <img style="<?= $s ?> width: <?= $w ?>; transform: translate(<?= $x ?>%,<?= $y ?>%)" class="side-graphics-element"
      src="<?= $g["url"] ?>" alt="Postranná grafika">
  </div>
</div>
<?php }
