{% comment %}NexUI Tabs v1.0.0

Usage in view:
  tabs = [
      {"id": "account", "label": "Account", "content": "<p>Account content</p>"},
      {"id": "password", "label": "Password", "content": "<p>Password content</p>"},
  ]

Usage in template:
  {% include "components/tabs.html" with tabs=tabs active_tab="account" %}

For dynamic content, pass rendered HTML strings from the view (use render_to_string).
{% endcomment %}
<div
  x-data="{ active: '{{ active_tab|default:'' }}' || '{% if tabs %}{{ tabs.0.id }}{% endif %}' }"
  class="{{ class }}"
>
  <div class="inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground {{ tabs_class }}">
    {% for tab in tabs %}
    <button
      type="button"
      x-on:click="active = '{{ tab.id }}'"
      x-bind:class="active === '{{ tab.id }}' ? 'bg-background text-foreground shadow-sm' : 'hover:text-foreground'"
      class="inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
    >{{ tab.label }}</button>
    {% endfor %}
  </div>

  {% for tab in tabs %}
  <div
    x-show="active === '{{ tab.id }}'"
    x-transition:enter="transition ease-out duration-150"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    class="mt-2 {{ panel_class }}"
    style="{% if not forloop.first %}display:none{% endif %}"
  >{{ tab.content|safe }}</div>
  {% endfor %}
</div>