{% load allauth %}
{% comment %}
  Tags guide (space-separated string in attrs.tags):
    prominent          → primary filled button (indigo)
    outline + primary  → indigo outline button
    danger / delete    → red button
    secondary          → gray/muted button
    tool               → small inline action
    default            → white outlined button
{% endcomment %}
{% if attrs.tags and "danger" in attrs.tags %}
  {% if attrs.href %}
    <a href="{{ attrs.href }}"
       {% if attrs.id %}id="{{ attrs.id }}"{% endif %}
       class="inline-flex items-center justify-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium text-white bg-red-600 hover:bg-red-500 transition-colors">
      {% slot %}{% endslot %}
    </a>
  {% else %}
    <button type="{{ attrs.type|default:'button' }}"
            {% 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 %}
            class="inline-flex items-center justify-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium text-white bg-red-600 hover:bg-red-500 transition-colors">
      {% slot %}{% endslot %}
    </button>
  {% endif %}
{% elif attrs.tags and "prominent" in attrs.tags and "outline" in attrs.tags %}
  {% if attrs.href %}
    <a href="{{ attrs.href }}"
       {% if attrs.id %}id="{{ attrs.id }}"{% endif %}
       class="flex items-center justify-center gap-2 w-full px-4 py-2.5 rounded-xl text-sm font-semibold text-indigo-600 border-2 border-indigo-500 hover:bg-indigo-50 transition-colors">
      {% slot %}{% endslot %}
    </a>
  {% else %}
    <button type="{{ attrs.type|default:'button' }}"
            {% 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 %}
            class="flex items-center justify-center gap-2 w-full px-4 py-2.5 rounded-xl text-sm font-semibold text-indigo-600 border-2 border-indigo-500 hover:bg-indigo-50 transition-colors">
      {% slot %}{% endslot %}
    </button>
  {% endif %}
{% elif attrs.tags and "prominent" in attrs.tags %}
  {% if attrs.href %}
    <a href="{{ attrs.href }}"
       {% if attrs.id %}id="{{ attrs.id }}"{% endif %}
       class="flex items-center justify-center gap-2 w-full px-4 py-2.5 rounded-xl text-sm font-semibold text-white bg-indigo-600 hover:bg-indigo-500 transition-colors shadow-md shadow-indigo-100">
      {% slot %}{% endslot %}
    </a>
  {% else %}
    <button type="{{ attrs.type|default:'submit' }}"
            {% 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 %}
            class="flex items-center justify-center gap-2 w-full px-4 py-2.5 rounded-xl text-sm font-semibold text-white bg-indigo-600 hover:bg-indigo-500 transition-colors shadow-md shadow-indigo-100">
      {% slot %}{% endslot %}
    </button>
  {% endif %}
{% elif attrs.tags and "tool" in attrs.tags %}
  {% if attrs.href %}
    <a href="{{ attrs.href }}"
       {% if attrs.id %}id="{{ attrs.id }}"{% endif %}
       class="inline-flex items-center gap-1 px-3 py-1 rounded text-xs font-medium text-slate-600 bg-slate-100 hover:bg-slate-200 transition-colors">
      {% slot %}{% endslot %}
    </a>
  {% else %}
    <button type="{{ attrs.type|default:'button' }}"
            {% 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 %}
            class="inline-flex items-center gap-1 px-3 py-1 rounded text-xs font-medium text-slate-600 bg-slate-100 hover:bg-slate-200 transition-colors">
      {% slot %}{% endslot %}
    </button>
  {% endif %}
{% else %}
  {% if attrs.href %}
    <a href="{{ attrs.href }}"
       {% if attrs.id %}id="{{ attrs.id }}"{% endif %}
       class="inline-flex items-center justify-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium text-slate-700 bg-white border border-slate-300 hover:bg-slate-50 transition-colors">
      {% slot %}{% endslot %}
    </a>
  {% else %}
    <button type="{{ attrs.type|default:'submit' }}"
            {% 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 %}
            class="inline-flex items-center justify-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium text-slate-700 bg-white border border-slate-300 hover:bg-slate-50 transition-colors">
      {% slot %}{% endslot %}
    </button>
  {% endif %}
{% endif %}