{# @description A button or link styled as one, depending on whether href is passed. #}
{# @prop size:select['sm','md','lg'] | description:"Button size." #}
{# @prop text:text | description:"Button label text." #}
{# @prop variant:text | description:"DaisyUI colour name for the button." #}
{# @prop outline:boolean | description:"Draw the button outlined instead of filled." #}
{# @prop align:text | default:"center" | description:"Tailwind justify-content suffix for content alignment." #}
{# @prop icon:text | description:"Leading icon name." #}
{# @prop class:text | description:"Extra classes on the root element." #}
{# @prop ghost:boolean | description:"Draw the button with no background until hovered." #}
{# @prop full:boolean | description:"Stretch the button to full width." #}
{# @prop condition:boolean | default:True | description:"Render the button at all; false renders nothing." #}
{# @prop reverse:boolean | description:"Reverse icon and text order." #}
{# @slot Extra markup after the text — Content rendered after the icon and text. #}
{% load mvp %}
<c-vars size
        text
        variant
        outline
        align="center"
        icon
        class
        ghost
        full
        condition=True
        reverse />
{% if condition %}
  {% spaceless %}
    {% with element=href|yesno:"a,button" %}
      {# djlint:off #}
      <{{ element }} class="btn{% if variant %} btn-{{ variant }}{% endif %}{% if outline %} btn-outline{% endif %} {% variation size "btn" "sm,md,lg" %}{% if ghost %} btn-ghost{% endif %}{% if full %} btn-block{% endif %} inline-flex items-center justify-{{ align }}{% if reverse %} flex-row-reverse{% endif %} gap-2 {{ class }}" {{ attrs }}>
        {% if icon %}<c-icon name="{{ icon }}" />{% endif %}
        {% if text %}<span>{{ text }}</span>{% endif %}
        {{ slot }}
      </{{ element }}>
      {# djlint:on #}
    {% endwith %}
  {% endspaceless %}
{% endif %}