<section class="demo-section">
  <h2>Data patterns</h2>

  <h3>Editable string</h3>
  <p>
    <span id="demo-editable-string">Click the pencil to edit this text.</span>
  </p>
  <p>
    <span id="demo-editable-textarea">Multi-line editable string.</span>
  </p>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      if (window.VMKUIKit?.editableString) {
        window.VMKUIKit.editableString(document.getElementById("demo-editable-string"));
        window.VMKUIKit.editableString(document.getElementById("demo-editable-textarea"), true);
      }
    });
  </script>

  <h3>Input clear</h3>
  <div class="input-group" style="max-width: 320px">
    <input type="text" class="input-group-input" placeholder="Search...">
    <button type="button" class="input-group-action" data-input-clear aria-label="Clear search">
      <i class="ph ph-x"></i>
    </button>
  </div>

  <h3>Date picker trigger</h3>
  <div class="form-group" style="max-width: 320px;">
    <input type="date" class="input input-date" value="2026-04-23" data-date-picker>
  </div>

  <h3>Activity log</h3>
  <div class="activity-log">
    <div class="activity-log-row">
      <time class="activity-log-time" datetime="2026-04-11T22:24:00">22:24</time>
      <span class="activity-log-title">Build completed</span>
    </div>
    <div class="activity-log-row">
      <time class="activity-log-time" datetime="2026-04-11T22:18:00">22:18</time>
      <span class="activity-log-title">Review requested</span>
    </div>
    <div class="activity-log-row">
      <time class="activity-log-time" datetime="2026-04-11T22:10:00">22:10</time>
      <span class="activity-log-title">Commit pushed</span>
    </div>
  </div>

  <h3>Toolbar</h3>
  <div class="toolbar">
    <div class="toolbar-group">
      <div>
        <h3 class="toolbar-title">Resources</h3>
        <span class="toolbar-meta">12 items selected</span>
      </div>
    </div>
    <div class="toolbar-group">
      <button class="btn btn-secondary btn-sm" type="button">Edit</button>
      <button class="btn btn-danger btn-sm" type="button">Delete</button>
    </div>
  </div>

  <h3>Vue toolbar and activity log</h3>
  <div id="vue-toolbar-app" class="vue-mount"></div>
  <script type="module">
    import { createApp } from "vue";
    import { GnToolbar, GnButton, GnActivityLog } from "/vue/index.js";

    createApp({
      components: { GnToolbar, GnButton, GnActivityLog },
      setup() {
        return {
          items: [
            { key: "build", time: "22:24", title: "Build completed" },
            { key: "review", time: "22:18", title: "Review requested" },
            { key: "commit", time: "22:10", title: "Commit pushed" }
          ]
        };
      },
      template: `
        <div style="display: grid; gap: 24px;">
          <gn-toolbar title="Resources" meta="12 items selected">
            <gn-button variant="secondary" size="sm">Edit</gn-button>
            <gn-button variant="danger" size="sm">Delete</gn-button>
          </gn-toolbar>
          <gn-activity-log :items="items" />
        </div>
      `
    }).mount("#vue-toolbar-app");
  </script>

  <h3>Vue repeater</h3>
  <div id="vue-repeater-app" class="vue-mount"></div>
  <script type="module">
    import { createApp, ref } from "vue";
    import { GnRepeater, GnInput, GnButton } from "/vue/index.js";

    createApp({
      components: { GnRepeater, GnInput, GnButton },
      setup() {
        const fields = ref([
          { id: 1, name: "Hostname", value: "vmk-01" },
          { id: 2, name: "Region", value: "eu-west" }
        ]);
        return { fields };
      },
      template: `
        <gn-repeater v-model="fields" label="Fields" add-label="Add field" :min-items="1" :max-items="5" style="max-width: 520px;">
          <template #item="{ item, remove }">
            <div style="display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end;">
              <gn-input v-model="item.name" label="Name" />
              <gn-input v-model="item.value" label="Value" />
              <gn-button variant="secondary" size="sm" @click="remove">Remove</gn-button>
            </div>
          </template>
        </gn-repeater>
      `
    }).mount("#vue-repeater-app");
  </script>
</section>