{% load allauth lucide %}

{% comment %}
    allauth tags every button it renders, and mapping those tags is what styles the MFA
    and account pages without overriding each one. The ranking matters: those pages put
    three buttons in a row (Deactivate / View / Download) and rely on the tags to say
    which is destructive and which is secondary. Flattening them all to btn-primary makes
    "Deactivate" look exactly as safe as "View".
{% endcomment %}
{% comment %} djlint:off {% endcomment %}
<{% if attrs.href %}a href="{{ attrs.href }}"{% else %}button{% endif %}
class="btn gap-2 {% if attrs.tags and 'danger' in attrs.tags %}btn-error{% elif attrs.tags and 'link' in attrs.tags %}btn-link{% elif attrs.tags and 'secondary' in attrs.tags %}btn-outline btn-neutral{% elif attrs.tags and 'outline' in attrs.tags %}btn-outline btn-primary{% else %}btn-primary{% endif %}"
{% if attrs.form %}form="{{ attrs.form }}"{% endif %}
{% if attrs.id %}id="{{ attrs.id }}"{% endif %}
{% if attrs.name %}name="{{ attrs.name }}"{% endif %}
{% if attrs.value %}value="{{ attrs.value }}"{% endif %}
{% if attrs.type %}type="{{ attrs.type }}"{% endif %}
>
{% if attrs.icon %}{% lucide attrs.icon size=16 %}{% endif %}
{% slot %}
{% endslot %}
</{% if attrs.href %}a{% else %}button{% endif %}>