<section class="demo-section" aria-labelledby="progress-heading">
  <h2 id="progress-heading">Progress</h2>

  <h3>Linear progress</h3>
  <div class="demo-row demo-row-vertical">
    <div class="progress" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
      <div class="progress-bar" style="width: 45%"></div>
    </div>

    <div class="progress progress-secondary" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
      <div class="progress-bar" style="width: 70%"></div>
    </div>

    <div class="progress progress-accent" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
      <div class="progress-bar" style="width: 25%"></div>
    </div>
  </div>

  <h3>Sizes</h3>
  <div class="demo-row demo-row-vertical">
    <div class="progress progress-sm" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
      <div class="progress-bar" style="width: 60%"></div>
    </div>
    <div class="progress progress-lg" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
      <div class="progress-bar" style="width: 80%"></div>
    </div>
  </div>

  <h3>Step indicators</h3>
  <div class="demo-row">
    <span class="progress-step progress-step-md is-complete"><i class="ph ph-check"></i></span>
    <span class="progress-step progress-step-md is-active">2</span>
    <span class="progress-step progress-step-md">3</span>
    <span class="progress-step progress-step-md is-accent">4</span>
  </div>

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

    createApp({
      components: { GnProgress },
      template: `
        <div class="demo-row demo-row-vertical" style="max-width: 360px;">
          <gn-progress :value="45" />
          <gn-progress :value="70" variant="secondary" />
          <gn-progress :value="25" variant="accent" size="sm" />
          <div class="demo-row">
            <gn-progress step state="complete" step-number="1" />
            <gn-progress step state="active" step-number="2" />
            <gn-progress step step-number="3" />
            <gn-progress step state="accent" step-number="4" />
          </div>
        </div>
      `
    }).mount("#vue-progress-app");
  </script>

  <h3>Staged progress</h3>
  <div class="demo-row">
    <div class="progress-stages" aria-label="Deploy stages">
      <span class="progress-stage progress-stage-complete">Queued</span>
      <span class="progress-stage progress-stage-complete">Build</span>
      <span class="progress-stage progress-stage-current">Deploy</span>
      <span class="progress-stage">Verify</span>
    </div>
  </div>

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

    createApp({
      components: { GnProgressStages },
      data() {
        return {
          stages: [
            { label: "Queued", status: "complete" },
            { label: "Build", status: "complete" },
            { label: "Deploy", status: "current" },
            { label: "Verify", status: "" }
          ]
        };
      },
      template: `<gn-progress-stages :items="stages" />`
    }).mount("#vue-progress-stages-app");
  </script>

  <h3>Usage meter</h3>
  <section class="usage-meter" style="max-width: 400px;">
    <h3 class="usage-meter-title">
      Storage
      <span class="usage-meter-value">78%</span>
    </h3>
    <div class="progress" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100">
      <div class="progress-bar" style="width: 78%"></div>
    </div>
    <p class="usage-meter-meta">312 GB used from 400 GB limit.</p>
  </section>

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

    createApp({
      components: { GnUsageMeter },
      template: `
        <gn-usage-meter title="Storage" :value="312" :max="400" meta="312 GB used from 400 GB limit." style="max-width: 400px;" />
      `
    }).mount("#vue-usage-meter-app");
  </script>
</section>