<section class="demo-section" aria-labelledby="tabs-heading">
  <h2 id="tabs-heading">Tabs</h2>

  <h3>Pill tabs</h3>
  <div class="tabs" data-tabs>
    <div class="tabs-list">
      <button class="tab tab-active" aria-controls="tab-panel-overview" type="button">Overview</button>
      <button class="tab" aria-controls="tab-panel-details" type="button">Details</button>
      <button class="tab" aria-controls="tab-panel-settings" type="button">Settings</button>
    </div>
    <div class="tab-panels">
      <div class="tab-panel tab-panel-active" id="tab-panel-overview">
        <p>Overview content for pill tabs.</p>
      </div>
      <div class="tab-panel" id="tab-panel-details" hidden>
        <p>Details content for pill tabs.</p>
      </div>
      <div class="tab-panel" id="tab-panel-settings" hidden>
        <p>Settings content for pill tabs.</p>
      </div>
    </div>
  </div>

  <h3>Compact tabs</h3>
  <div class="tabs tabs-compact" data-tabs>
    <div class="tabs-list">
      <button class="tab tab-active" aria-controls="tab-panel-c-one" type="button">One</button>
      <button class="tab" aria-controls="tab-panel-c-two" type="button">Two</button>
      <button class="tab" aria-controls="tab-panel-c-three" type="button">Three</button>
    </div>
    <div class="tab-panels">
      <div class="tab-panel tab-panel-active" id="tab-panel-c-one">
        <p>First compact panel.</p>
      </div>
      <div class="tab-panel" id="tab-panel-c-two" hidden>
        <p>Second compact panel.</p>
      </div>
      <div class="tab-panel" id="tab-panel-c-three" hidden>
        <p>Third compact panel.</p>
      </div>
    </div>
  </div>

  <h3>Vertical tabs</h3>
  <div class="tabs tabs-vertical" data-tabs>
    <div class="tabs-list">
      <button class="tab tab-active" aria-controls="tab-panel-v-a" type="button">Account</button>
      <button class="tab" aria-controls="tab-panel-v-b" type="button">Security</button>
      <button class="tab" aria-controls="tab-panel-v-c" type="button">Billing</button>
    </div>
    <div class="tab-panels">
      <div class="tab-panel tab-panel-active" id="tab-panel-v-a">
        <p>Account settings.</p>
      </div>
      <div class="tab-panel" id="tab-panel-v-b" hidden>
        <p>Security settings.</p>
      </div>
      <div class="tab-panel" id="tab-panel-v-c" hidden>
        <p>Billing settings.</p>
      </div>
    </div>
  </div>

  <h3>Vue tabs</h3>
  <div id="vue-tabs-app" class="vue-mount"></div>
  <script type="module">
    import { createApp } from "vue";
    import { GnTabs, GnTab, GnTabPanel } from "/vue/index.js";

    createApp({
      components: { GnTabs, GnTab, GnTabPanel },
      data() {
        return { active: "overview" };
      },
      template: `
        <gn-tabs v-model="active" style="max-width: 480px;">
          <gn-tab name="overview" label="Overview" />
          <gn-tab name="details" label="Details" />
          <gn-tab name="settings" label="Settings" />
          <template #panels>
            <gn-tab-panel name="overview">
              <p>Vue overview content.</p>
            </gn-tab-panel>
            <gn-tab-panel name="details">
              <p>Vue details content.</p>
            </gn-tab-panel>
            <gn-tab-panel name="settings">
              <p>Vue settings content.</p>
            </gn-tab-panel>
          </template>
        </gn-tabs>
      `
    }).mount("#vue-tabs-app");
  </script>

  <h3>Vue router tabs (fallback without router)</h3>
  <div id="vue-router-tabs-app" class="vue-mount"></div>
  <script type="module">
    import { createApp } from "vue";
    import { GnRouterTabs } from "/vue/index.js";

    createApp({
      components: { GnRouterTabs },
      setup() {
        const items = [
          { id: "overview", label: "Overview", to: "/overview" },
          { id: "details", label: "Details", to: "/details" },
          { id: "settings", label: "Settings", to: "/settings", disabled: false }
        ];
        return { items };
      },
      template: `
        <gn-router-tabs :items="items" style="max-width: 480px;">
          <template #overview="{ item, active }">
            <p v-if="active">Router overview panel.</p>
          </template>
          <template #details="{ item, active }">
            <p v-if="active">Router details panel.</p>
          </template>
          <template #settings="{ item, active }">
            <p v-if="active">Router settings panel.</p>
          </template>
        </gn-router-tabs>
      `
    }).mount("#vue-router-tabs-app");
  </script>
</section>