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

  <ol class="steps">
    <li class="step step-complete">
      <span class="step-marker"><i class="ph ph-check" aria-hidden="true"></i></span>
      <h3 class="step-title">Cart</h3>
      <p class="step-text">Items added and validated.</p>
    </li>
    <li class="step step-current">
      <span class="step-marker">2</span>
      <h3 class="step-title">Shipping</h3>
      <p class="step-text">Choose a delivery address.</p>
    </li>
    <li class="step step-disabled">
      <span class="step-marker">3</span>
      <h3 class="step-title">Payment</h3>
      <p class="step-text">Enter your payment details.</p>
    </li>
    <li class="step">
      <span class="step-marker">4</span>
      <h3 class="step-title">Review</h3>
      <p class="step-text">Confirm and place the order.</p>
    </li>
  </ol>

  <h3>Vertical</h3>
  <ol class="steps steps-vertical">
    <li class="step step-complete">
      <span class="step-marker"><i class="ph ph-check" aria-hidden="true"></i></span>
      <h3 class="step-title">Upload</h3>
      <p class="step-text">File added.</p>
    </li>
    <li class="step step-current">
      <span class="step-marker">2</span>
      <h3 class="step-title">Process</h3>
      <p class="step-text">Running conversion.</p>
    </li>
    <li class="step step-disabled">
      <span class="step-marker">3</span>
      <h3 class="step-title">Done</h3>
    </li>
  </ol>
  <h3>Vue steps</h3>
  <div id="vue-stepper-app" class="vue-mount"></div>
  <script type="module">
    import { createApp, ref } from "vue";
    import { GnSteps, GnStep } from "/vue/index.js";

    createApp({
      components: { GnSteps, GnStep },
      setup() {
        const items = ref([
          { title: "Cart", text: "Items added.", status: "complete" },
          { title: "Shipping", text: "Choose address.", status: "current" },
          { title: "Payment", text: "Enter details.", status: "disabled" },
          { title: "Review", status: "" }
        ]);
        return { items };
      },
      template: `
        <gn-steps :items="items"></gn-steps>
      `
    }).mount("#vue-stepper-app");
  </script>
</section>