{%- doc -%}
  Renders media block contents (used in _media and _media-without-appearance blocks)

  @param {object} [block] - The block object
  @param {boolean} [unset_image_tag] - if true, ignores the image focal point in the image
{%- enddoc -%}

{% liquid
  assign block_settings = block.settings
  assign show_image = false
  assign show_video = false

  if block_settings.media_type == 'image'
    assign show_image = true
  endif

  if block_settings.media_type == 'video'
    assign show_video = true
  endif
%}

<div
  class="
    media-block
    spacing-style
    {% if block_settings.inherit_color_scheme == false %} color-{{ block_settings.color_scheme }}{% endif %}
    {% if show_image and block_settings.image_position == 'contain' or show_video and block_settings.video_position == 'contain' %}
      media-block--contain
    {% endif %}
  "
  style="
    {% render 'border-override', settings: block_settings %}
    {% render 'spacing-style', settings: block_settings %}
    --image-position: {{ block_settings.image_position }};
    --video-position: {{ block_settings.video_position }};
  "
  {{ block.shopify_attributes }}
>
  {%- if show_image -%}
    {% capture image_tag %}
      {% if block_settings.image != blank %}
        {% render 'image',
          image: block_settings.image,
          class: 'media-block__media border-style',
          unset_image_tag: unset_image_tag
        %}
      {% else %}
        <div class="media-block__media border-style">
          {{ 'detailed-apparel-1' | placeholder_svg_tag: 'media-block__placeholder' }}
        </div>
      {% endif %}
    {% endcapture %}

    {% if block_settings.link != blank %}
      <a
        href="{{ block_settings.link }}"
        class="media-block__media-link"
      >
        {{ image_tag }}
      </a>
    {% else %}
      {{ image_tag }}
    {% endif %}
  {%- elsif show_video -%}
    {% render 'video',
      video: block_settings.video,
      video_autoplay: block_settings.video_autoplay,
      video_loop: block_settings.video_loop,
      video_class: 'media-block__media media-block__media--video border-style'
    %}
  {%- else -%}
    <div class="media-block__media border-style">
      {{ 'hero-apparel-3' | placeholder_svg_tag }}
    </div>
  {%- endif -%}
</div>

{% stylesheet %}
  .media-block {
    overflow: hidden;
    position: relative;

    @media screen and (min-width: 750px) {
      min-height: var(--media-height);
    }
  }

  .media-block__media {
    height: var(--media-height-mobile, auto);
    object-fit: var(--image-position, 'cover');
    object-position: center center;
    width: 100%;

    @media screen and (min-width: 750px) {
      height: 100%;
      position: absolute;
    }
  }

  deferred-media[class].media-block__media
    :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    object-fit: var(--video-position, 'cover');
  }

  /* This is to support corner radius on video and align the video to the center of the block */
  .media-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .media-block__media--video {
    display: flex;
    align-items: center;
    justify-content: center;

    @media screen and (max-width: 749px) {
      --media-height-mobile: auto;
    }
  }
{% endstylesheet %}
