{# @description Sponsors by level: a labelled line of logos for each, the top level drawn largest. The shape an open source project's sponsors page usually takes. #}
{# @prop eyebrow:text | description:"Short line above the heading" #}
{# @prop title:text | description:"The heading. Left empty with no eyebrow, the block has no header." #}
{# @prop lead:text | description:"The supporting sentence under the heading" #}
{# @prop level:select['1', '2', '3', '4', '5', '6'] | default:"2" | description:"Heading level" #}
{# @prop tone:select['original', 'muted', 'ink'] | default:"original" | description:"How the logos are drawn. original is each file as it is. muted is grey until the pointer reaches it. ink is each logo's shape in the text colour, which holds on every theme." #}
{# @prop size:select['sm', 'md', 'lg'] | default:"md" | description:"How much vertical room the block takes" #}
{# @prop controls:boolean | default:True | description:"Draw the pause control. Turn it off only when the page gives another way to stop the movement: without one, a keyboard or touch-screen visitor cannot." #}
{# @prop pause:text | description:"The name of the pause control, for a screen reader. Left empty, it is a translated Pause the moving logos." #}
{# @prop class:text | description:"Extra classes on the outer section. A plain surface colour goes here: bg-base-200." #}
{# @slot <c-logos.tier label="Gold" logo-size="lg"><c-logos.logo src="…" name="Northwind" /></c-logos.tier><c-logos.tier label="Silver"><c-logos.logo src="…" name="Papaya" /></c-logos.tier> — One logos.tier for each level, highest first #}
{# @slot:actions <a class="btn btn-primary" href="#">Become a sponsor</a> — Under the last level: the way to join them #}
<c-vars eyebrow title lead level="2" tone="original" size="md" controls="True" pause class />
{% load i18n %}
{% translate "Pause the moving logos" as pause_default %}
<c-section flush class="{% if size == 'sm' %}dce:py-8 dce:md:py-10{% elif size == 'lg' %}dce:py-16 dce:md:py-24{% else %}dce:py-12 dce:md:py-16{% endif %} {{ class }}" :attrs="attrs" only>
  {% if eyebrow or title or lead %}
    <c-heading :eyebrow="eyebrow" :title="title" :lead="lead" level="{{ level }}" class="dce:mb-10" only />
  {% endif %}
  <div data-marquee-group data-logo-tone="{{ tone }}">
    <div class="dce:divide-y dce:divide-base-300 dce:border-y dce:border-base-300 dce:*:even:[--marquee-direction:reverse]">{{ slot }}</div>
    <div class="dce:mt-8 dce:flex dce:flex-wrap dce:items-center dce:justify-center dce:gap-4">
      {{ actions }}
      {% if controls %}<c-marquee.pause label="{{ pause|default:pause_default }}" only />{% endif %}
    </div>
  </div>
</c-section>