{# Color Swatches #}
{% macro swatch(color, friendly_name) %}
  <div class="swatch">
    <div class="row align-items-center gap-3">
      <div class="col-12 col-md-auto">
        <div data-color-swatch="{{ color|lower }}" style="height: 100px;"
             class="rounded-1 bg-{{ color is empty ? 'white' : color }} border">
          <span class="visually-hidden">{{ color|upper }}</span>
        </div>
      </div>
      <div class="col-12 col-md">
        <p>
          <strong data-swatch-hex>
            <span class="placeholder-glow">
              <span class="placeholder col-2"></span>
            </span>
          </strong>
        </p>
        <em>{{ friendly_name ? friendly_name : color|default('Placeholder')|capitalize|replace({'-': ' '}) }}</em>
      </div>
    </div>
  </div>
{% endmacro %}

{# Small Text / Large Text #}
{% macro accessibility_info(background, foreground) %}
  <div class="row mb-5" data-color-check="{{ background ~ ',' ~ foreground }}">
    <div class="col-12 col-lg-5">
      <div class="bg-{{ background }} text-{{ foreground }} rounded p-4 mb-4 d-block w-100">
        {% trans %}
          <p data-ui-kit-font-size="lg">Large text is <span class="placeholder-glow rounded"><span
                class="rounded placeholder col-1"></span></span></p>
          <p data-ui-kit-font-size>Normal text is <span class="placeholder-glow rounded"><span
                class="rounded placeholder col-1"></span></span></p>
          <p data-ui-kit-font-size="sm" class="small mb-0 pb-0">Small text is <span
              class="placeholder-glow rounded"><span class="rounded placeholder col-1"></span></span></p>
        {% endtrans %}
      </div>
      <div data-color-contrast
           class="bg-light mx-auto w-75 p-3 border rounded text-center mb-4 d-flex gap-1 align-items-center justify-content-center text-center">
        <span>{{ 'Contrast:'|t }}</span>
        <span class="placeholder-glow">
          <span class="placeholder col-2 rounded"></span>
        </span>
      </div>
      <div class="row g-5">
        {{ _self.contrast_data({
          text: 'Small Text'|t,
          criteria: {
            aa: '4.5:1',
            aaa: '7:1'
          }
        }) }}
        {{ _self.contrast_data({
          text: 'Large Text'|t,
          criteria: {
            aa: '3:1',
            aaa: '4.5:1'
          }
        }) }}
      </div>
    </div>
    <div class="col-12 col-lg offset-lg-1">
      <p><em>{{ 'Examples:'|t }}</em></p>
      <div class="mb-5">
        <button type="button" class="btn btn-lg btn-{{ background|lower }}">{{ 'Large Text'|t }}</button>
      </div>
      <div class="mb-5">
        <button type="button" class="btn btn-{{ background|lower }}">{{ 'Normal Text'|t }}</button>
      </div>
      <div class="mb-5">
        <button type="button" class="btn btn-sm btn-{{ background|lower }}">{{ 'Small Text'|t }}</button>
      </div>
    </div>
  </div>
{% endmacro %}

{# Small Text / Large Text #}
{% macro contrast_data(value) %}
  <div class="col-12 col-lg">

    <div class="d-flex flex-column">
      <div class="col-12 p-2 border-bottom mb-3 fw-bold text-muted text-center">{{ value.text|upper }}</div>
      <div class="d-flex align-items-center justify-content-between mb-3"
           data-color-contrast-{{ value.text|clean_class }}-aa>
        <div class="placeholder-glow col-4 d-flex justify-content-end">
          <span class="placeholder rounded"></span>
        </div>
        <div class="col-6"><strong>{{ 'AA' }}</strong> - {{ value.criteria.aa }}</div>
      </div>
    </div>

    <div class="d-flex gap-2 align-items-center justify-content-between mb-3"
         data-color-contrast-{{ value.text|clean_class }}-aaa>
      <div class="placeholder-glow col-4 d-flex justify-content-end">
        <span class="placeholder rounded"></span>
      </div>
      <div class="col-6"><strong>{{ 'AAA' }}</strong> - {{ value.criteria.aaa }}</div>
    </div>

  </div>
{% endmacro %}
