Badge: Round

{% apply spaceless %}
  {# TODO: make "dismissible"? #}
  {% set classes = [
    'azalea-badge',
    'inline-flex items-center',
    'text-center',
    'font-medium text-black',
    'bg-transparent',
    'border border-black'
  ] %}
  {#
  Prop: status
  Show a status indicator
  #}
  {% set showStatus = 0 %}
  {% if status is defined %}
    {% set showStatus = 1 %}
    {% set status = status ? 1 : 0 %}
  {% endif %}
  {#
    Prop: size
    The component sizes.
    @values 'large', 'medium', small
  #}
  {% if size == 'large' %}
    {% set classes = classes|merge(['sm:azalea-text-md', 'md:azalea-text-lg', 'py-2']) %}
    {% if showStatus %}
      {% set classes = classes|merge(['pl-4', 'pr-7']) %}
    {% else %}
      {% set classes = classes|merge(['px-4']) %}
    {% endif %}
  {% elseif size == 'small' %}
    {% set classes = classes|merge(['sm:azalea-text-xs', 'md:azalea-text-sm', 'py-1']) %}
    {% if showStatus %}
      {% set classes = classes|merge(['pl-2', 'pr-3']) %}
    {% else %}
      {% set classes = classes|merge(['px-2']) %}
    {% endif %}
  {% elseif size == 'xsmall' %}
    {% set classes = classes|merge(['azalea-text-xs', 'py-0.5']) %}
    {% if showStatus %}
      {% set classes = classes|merge(['pl-1.5', 'pr-2.5']) %}
    {% else %}
      {% set classes = classes|merge(['px-1.5']) %}
    {% endif %}
  {% else %}
    {% set classes = classes|merge(['sm:azalea-text-sm', 'md:azalea-text-md', 'py-1.5']) %}
    {% if showStatus %}
      {% set classes = classes|merge(['pl-3', 'pr-5']) %}
    {% else %}
      {% set classes = classes|merge(['px-3']) %}
    {% endif %}
  {% endif %}
  {#
  Prop: round
  The component rounded cornders.
  @values true, false
  #}
  {% if round %}
    {% set classes = classes|merge(['rounded-full']) %}
  {% else %}
    {% set classes = classes|merge(['rounded-sm']) %}
  {% endif %}
  <div class="{{ classes|join(' ') }}">
    {% if showStatus or icon %}
      {% set colorClass = status ? 'text-success' : 'text-error' %}
      {% set iconClasses = [] %}
      {% if size == 'large' %}
        {% set iconClasses = iconClasses|merge(['mx-2.5', 'h-4', 'w-4']) %}
      {% elseif size == 'small' %}
        {% set iconClasses = iconClasses|merge(['mx-1.5', 'h-2', 'w-2']) %}
      {% elseif size == 'xsmall' %}
        {% set iconClasses = iconClasses|merge(['mx-1.5', 'h-1.5', 'w-1.5']) %}
      {% else %}
        {% set iconClasses = iconClasses|merge(['mx-2', 'h-3', 'w-3']) %}
      {% endif %}
      {% if showStatus %}
        <svg fill="currentColor" class="{{ iconClasses|join(' ') }} {{ colorClass }}" viewBox="0 0 8 8"><circle cx="4" cy="4" r="3" /></svg>
      {% endif %}
      {% if icon %}
        {% include "@components/icon/icon.twig" with { icon: icon, size: size, extraClasses: iconClasses } %}
      {% endif %}
    {% endif %}
    {# Prop: text #}
    {{ text }}
    {% block content %}{% endblock content %}
  </div>
{% endapply %}