Skeleton: List

{% apply spaceless %}
  {% set defaultClasses = ['animate-pulse'] %}
  {% if classes and classes is iterable %}
    {% set defaultClasses = defaultClasses|merge(classes) %}
  {% endif %}
  {% set mediaClasses = [] %}
  {% set bodyClasses = ['w-full'] %}
  {# Prop: component #}
  {% if component|lower == 'list' %}
    {# "List" layout #}
    {% set defaultClasses = defaultClasses|merge(['flex', 'grow', 'space-x-1', 'max-w-2xl']) %}
  {% elseif component|lower == 'teaser' %}
    {# "Teaser" layout #}
    {% set defaultClasses = defaultClasses|merge([
      'grid',
      'grid-cols-1',
      'md:grid-cols-10',
      'gap-4',
      'w-full',
      'md:max-h-96',
      'lg:max-h-max',
    ]) %}
    {# Prop: padding #}
    {% if padding is not defined or padding != 'none' %}
      {% set defaultClasses = defaultClasses|merge(['px-2', 'lg:px-6', 'py-4']) %}
    {% endif %}
    {% set mediaClasses = mediaClasses|merge(['col-span-1', 'md:col-span-3', 'lg:col-span-2', 'h-40', 'md:h-56']) %}
    {% set bodyClasses = bodyClasses|merge(['col-span-1', 'md:col-span-7', 'lg:col-span-8']) %}
  {% else %}
    {# Default: "Card" layout #}
    {% set defaultClasses = defaultClasses|merge(['flex', 'flex-col', 'grow', 'space-y-3', 'max-w-sm']) %}
    {% set mediaClasses = mediaClasses|merge(['h-56', 'mb-2']) %}
  {% endif %}
  <div
    x-data="skeleton()"
    @update-skeleton.window="randomize()"
    aria-busy="true"
    aria-live="polite"
    role="alert"
    class="{{ defaultClasses|join(' ') }}"
  >
    {% if component|lower != 'list'%}
      <div class="{{ mediaClasses|join(' ') }}">
        <div class="w-full h-full bg-tertiary-300 rounded-sm"></div>
      </div>
    {% endif %}
    <div class="{{ bodyClasses|join(' ') }}">
      <template x-for="item in lines">
        <div>
          <div class="h-4 bg-tertiary-300 rounded-sm" :class="randomWidthClass()"></div>
          <div class="w-full h-2"></div>
        </div>
      </template>
    </div>
  </div>
{% endapply %}