{%- doc -%}
  This snippet is used to render a collection card.
  To be used inside a block to inherit the block object settings.

  @param {string} card_image - The image to display in the collection card
  @param {string} children - The content to render inside the collection card
  @param {object} collection - The collection to render the card for
  @param {object} block - The block object
  @param {object} section - The section object

  @example
  {% render 'collection-card',
    card_image: card_image,
    children: children,
    block: block,
    collection: collection,
    section: section
  %}
{%- enddoc -%}

{% style %}
  {% if request.visual_preview_mode %}
    .collection-card {
      min-width: 250px;
    }
  {% endif %}
{% endstyle %}

{% liquid
  assign onboarding = false
  assign block_settings = block.settings

  if collection == blank
    assign onboarding = true
  endif
%}

<div
  class="
    collection-card
    border-style
    {% if block_settings.placement == 'on_image' %}collection-card--image-bg{% endif %}
    {% if section.settings.layout_type == 'bento' %}collection-card--image-height-fixed{% endif %}
    {% if section.settings.layout_type == 'editorial' %}collection-card--flexible-aspect-ratio{% endif %}
    {% if block_settings.inherit_color_scheme == false %} color-{{ block_settings.color_scheme }}{% endif %}
  "
  data-block-id="{{ block.id }}"
  {% if onboarding %}
    data-placeholder="true"
  {% endif %}
  style="
    {% render 'border-override', settings: block_settings %}
    --horizontal-alignment: {{ block_settings.horizontal_alignment }};
    --vertical-alignment: {{ block_settings.vertical_alignment }};
    --background-overlay-color: {{ block_settings.overlay_color }};
    --gap: {{ block_settings.collection_card_gap }}px;
  "
  {{- block.shopify_attributes -}}
>
  <a
    class="collection-card__link"
    {% unless onboarding %}
      href="{{ collection.url }}"
    {% endunless %}
  >
    <span class="visually-hidden">{{ collection.title }}</span>
  </a>
  <div class="collection-card__inner">
    {{ card_image }}
    <div class="collection-card__content layout-panel-flex--column">
      {{ children }}
    </div>
  </div>
</div>

{% stylesheet %}
  .collection-card {
    --fixed-card-height: var(--height-small);

    flex: 1 1 var(--card-width-small);
  }

  .collection-card > svg {
    height: 100%;
    width: 100%;
    aspect-ratio: var(--ratio);
  }

  .collection-card--image-bg .collection-card__inner {
    height: 100%;
  }

  .collection-card__inner {
    gap: var(--gap);

    a,
    button {
      pointer-events: auto;
    }
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .collection-card__content * {
    pointer-events: auto;
  }

  .collection-card__content {
    max-width: 100%;
    --flex-wrap: wrap;
  }

  /* Nested image block rules */

  .collection-card.collection-card--image-bg {
    aspect-ratio: var(--ratio);
  }

  .collection-card.collection-card--image-bg .collection-card__content {
    padding: var(--padding-lg);
  }

  .collection-card--image-height-fixed {
    height: 100%;
  }

  /* Bento layout rules */
  .collection-card--image-height-fixed .collection-card__image {
    height: var(--fixed-card-height);
    width: 100%;
  }

  .collection-card--image-height-fixed.collection-card--image-bg {
    height: var(--fixed-card-height);
    aspect-ratio: unset;
  }

  .collection-card__image .resource-image__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-width: 100%;
  }

  .collection-card--image-bg .collection-card__image {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .collection-card__image svg {
    height: 100%;
    width: 100%;
  }

  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio {
    &.collection-card.collection-card--image-bg,
    &.collection-card .placeholder-svg {
      aspect-ratio: 99;
    }
  }
{% endstylesheet %}
