<section class="demo-section">
  <h2>Accordion</h2>

  <div class="accordion">
    <details class="accordion-item">
      <summary class="accordion-summary">
        <span class="accordion-summary-content">
          <i class="ph ph-user" aria-hidden="true"></i>
          Account details
        </span>
        <i class="ph ph-caret-down accordion-icon" aria-hidden="true"></i>
      </summary>
      <div class="accordion-panel">
        <p>Manage your profile, password and notification preferences.</p>
      </div>
    </details>

    <details class="accordion-item">
      <summary class="accordion-summary">
        <span class="accordion-summary-content">
          <i class="ph ph-credit-card" aria-hidden="true"></i>
          Billing
        </span>
        <i class="ph ph-caret-down accordion-icon" aria-hidden="true"></i>
      </summary>
      <div class="accordion-panel">
        <p>View invoices, update payment methods and manage subscriptions.</p>
      </div>
    </details>

    <details class="accordion-item">
      <summary class="accordion-summary">
        <span class="accordion-summary-content">
          <i class="ph ph-bell" aria-hidden="true"></i>
          Notifications
        </span>
        <i class="ph ph-caret-down accordion-icon" aria-hidden="true"></i>
      </summary>
      <div class="accordion-panel">
        <p>Choose how and when you want to be notified.</p>
      </div>
    </details>
  </div>

  <h3>Disclosure</h3>
  <div class="disclosure">
    <details class="accordion-item">
      <summary class="accordion-summary">
        <span class="accordion-summary-content">Shipping options</span>
        <i class="ph ph-caret-down accordion-icon" aria-hidden="true"></i>
      </summary>
      <div class="accordion-panel">
        <p>Standard, express and same-day delivery are available.</p>
      </div>
    </details>
  </div>

  <h3>Vue accordion</h3>
  <div id="vue-accordion-app" class="vue-mount"></div>
  <script type="module">
    import { createApp } from "vue";
    import { GnAccordion } from "/vue/index.js";

    createApp({
      components: { GnAccordion },
      data() {
        return {
          open: "account",
          items: [
            { id: "account", label: "Account details", icon: "ph-user", content: "Manage your profile, password and notification preferences." },
            { id: "billing", label: "Billing", icon: "ph-credit-card", content: "View invoices, update payment methods and manage subscriptions." },
            { id: "notifications", label: "Notifications", icon: "ph-bell", content: "Choose how and when you want to be notified." }
          ]
        };
      },
      template: `
        <gn-accordion v-model="open" :items="items" style="max-width: 560px;" />
      `
    }).mount("#vue-accordion-app");
  </script>
</section>