@omega.js/web 0.1.0

package/core/_layouts/blueprint/admin/posts/editor.html

@@ -0,0 +1,157 @@
+---
+layout: admin/core/minimal
+
+meta:
+  title: "Post editor - Admin"
+  description: "Write and edit blog posts"
+  breadcrumb: "Editor"
+config:
+  theme:
+    header:
+      title:
+        content: "Post editor"
+        icon: "pen-nib"
+      breadcrumbs:
+        items:
+          - label: "Admin"
+            href: "/admin"
+          - label: "Posts"
+            href: "/admin/posts"
+          - label: "Editor"
+---
+
+<!-- Page Header -->
+<div class="row mb-4">
+  <div class="col">
+    <div class="d-flex justify-content-between align-items-center">
+      <p class="text-muted mb-0" id="editor-mode-note">Write a new post. It commits straight to the website repo</p>
+      <a class="btn btn-outline-adaptive" href="/admin/posts">
+        <i class="fa-solid fa-arrow-left fa-md me-2"></i>
+        All posts
+      </a>
+    </div>
+  </div>
+</div>
+
+<!-- Edit-mode load state -->
+<div id="editor-loading" class="text-center text-muted py-5 d-none">
+  <span class="spinner-border spinner-border-sm me-2"></span>
+  Fetching the post from GitHub...
+</div>
+
+<!-- Edit-mode load error -->
+<div id="editor-load-error" class="alert alert-danger d-none" role="alert">
+  <strong>Couldn't load the post.</strong>
+  <span id="editor-load-error-message"></span>
+</div>
+
+<!-- Success panel -->
+<div id="editor-success" class="card d-none">
+  <div class="card-body text-center py-5">
+    <div class="rounded-circle d-inline-flex align-items-center justify-content-center p-3 bg-success bg-opacity-10 mx-auto mb-3">
+      <i class="fa-solid fa-circle-check fa-2xl text-success"></i>
+    </div>
+    <h5 class="mb-2" id="editor-success-title">Post committed</h5>
+    <p class="text-muted mb-4" id="editor-success-detail"></p>
+    <div class="d-flex justify-content-center gap-2">
+      <a class="btn btn-sm btn-outline-adaptive" href="/admin/posts">
+        Back to posts
+      </a>
+      <a class="btn btn-sm btn-adaptive" id="btn-view-post" href="#" target="_blank" rel="noopener">
+        <i class="fa-solid fa-arrow-up-right-from-square fa-sm me-2"></i>
+        View on site
+      </a>
+    </div>
+  </div>
+</div>
+
+<!-- Editor Form -->
+<div class="card" id="editor-form-card">
+  <div class="card-body">
+    <form id="post-editor-form" data-form-state="initializing" onsubmit="return false">
+      <div class="row">
+        <!-- Title -->
+        <div class="col-md-8 mb-3">
+          <label for="editor-title" class="form-label small">Title</label>
+          <input type="text" class="form-control" id="editor-title" name="post.title" placeholder="A headline readers can't skip" required>
+        </div>
+
+        <!-- Author (create only) -->
+        <div class="col-md-4 mb-3 create-only">
+          <label for="editor-author" class="form-label small">Author</label>
+          <input type="text" class="form-control" id="editor-author" name="post.author" placeholder="Defaults to the brand">
+        </div>
+      </div>
+
+      <!-- Slug (create only) -->
+      <div class="mb-3 create-only">
+        <label for="editor-slug" class="form-label small">URL slug</label>
+        <div class="input-group">
+          <span class="input-group-text">/blog/</span>
+          <input type="text" class="form-control font-monospace" id="editor-slug" name="post.url" placeholder="my-post" required>
+        </div>
+        <small class="text-muted">Follows the title. Edit to override</small>
+      </div>
+
+      <!-- Description (create only) -->
+      <div class="mb-3 create-only">
+        <label for="editor-description" class="form-label small">Description</label>
+        <textarea class="form-control" id="editor-description" name="post.description" rows="2" placeholder="One or two sentences for search results and social cards" required></textarea>
+      </div>
+
+      <!-- Header image (create only) -->
+      <div class="mb-3 create-only">
+        <label for="editor-header-image" class="form-label small">Header image URL</label>
+        <input type="url" class="form-control" id="editor-header-image" name="post.headerImageURL" placeholder="https://images.unsplash.com/..." required>
+        <small class="text-muted">Must resolve to a JPEG. It's downloaded, resized, and committed as the post's hero</small>
+      </div>
+
+      <div class="row create-only">
+        <!-- Categories -->
+        <div class="col-md-6 mb-3">
+          <label for="editor-categories" class="form-label small">Categories</label>
+          <input type="text" class="form-control" id="editor-categories" name="post.categories" placeholder="news, product">
+          <small class="text-muted">Comma-separated</small>
+        </div>
+
+        <!-- Tags -->
+        <div class="col-md-6 mb-3">
+          <label for="editor-tags" class="form-label small">Tags</label>
+          <input type="text" class="form-control" id="editor-tags" name="post.tags" placeholder="launch, update">
+          <small class="text-muted">Comma-separated</small>
+        </div>
+      </div>
+
+      <!-- Body -->
+      <div class="mb-3">
+        <label for="editor-body" class="form-label small">Body</label>
+        <textarea class="form-control font-monospace" id="editor-body" name="post.body" rows="16" placeholder="Markdown. No need to repeat the title as a heading. The layout renders it." required></textarea>
+        <small class="text-muted">Markdown. Images referenced by URL (<code>![alt](https://...)</code>) are downloaded, resized, and committed with the post.</small>
+      </div>
+
+      <!-- Frontmatter (edit mode, read-only) -->
+      <details class="mb-3 d-none" id="editor-frontmatter-details">
+        <summary class="small text-muted">Frontmatter (preserved on save)</summary>
+        <pre class="mt-2 p-3 mb-0 small" style="background: var(--bs-tertiary-bg); max-height: 240px; overflow-y: auto;"><code id="editor-frontmatter"></code></pre>
+      </details>
+
+      <hr>
+
+      <!-- Deploy toggle -->
+      <div class="form-check form-switch mb-4">
+        <input class="form-check-input" type="checkbox" id="editor-deploy" name="post.deploy" checked>
+        <label class="form-check-label" for="editor-deploy">Dispatch a site build after saving</label>
+        <small class="text-muted d-block">The post is committed either way. Uncheck to batch several changes into one build</small>
+      </div>
+
+      <!-- Submit -->
+      <div class="d-flex justify-content-end gap-2">
+        <a class="btn btn-outline-adaptive" href="/admin/posts">Cancel</a>
+        <button type="submit" class="btn btn-adaptive">
+          <i class="fa-solid fa-check fa-sm me-2"></i>
+          <span class="button-text" id="editor-submit-text">Publish post</span>
+        </button>
+      </div>
+    </form>
+  </div>
+</div>

package/core/_layouts/blueprint/admin/posts/index.html

@@ -0,0 +1,126 @@
+---
+layout: admin/core/minimal
+
+meta:
+  title: "Posts - Admin"
+  description: "Manage blog posts"
+  breadcrumb: "All posts"
+
+config:
+  theme:
+    header:
+      title:
+        content: "Posts"
+        icon: "newspaper"
+      breadcrumbs:
+        items:
+          - label: "Admin"
+            href: "/admin"
+          - label: "Posts"
+---
+
+<!-- Page Header Actions -->
+<div class="row mb-4">
+  <div class="col">
+    <div class="d-flex justify-content-between align-items-center">
+      <div>
+        <p class="text-muted mb-0">What's live on the blog, sourced from the site's own feed, newest first</p>
+      </div>
+      <div class="d-flex gap-2">
+        <button class="btn btn-outline-adaptive" id="btn-refresh-posts">
+          <i class="fa-solid fa-rotate fa-md me-2"></i>
+          Refresh
+        </button>
+        <a class="btn btn-adaptive" href="/admin/posts/editor">
+          <i class="fa-solid fa-plus fa-md me-2"></i>
+          New post
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Merged stat card (App DNA) -->
+<div class="omega-statgrid mb-4" style="--omega-statgrid-cols: 3;">
+  <div class="omega-statgrid__cell">
+    <div class="omega-statgrid__label">
+      <span class="omega-micro">Published posts</span>
+      <i class="fa-solid fa-newspaper fa-sm"></i>
+    </div>
+    <h3 class="omega-statgrid__value" id="stat-total-posts">
+      <span class="spinner-border spinner-border-sm fs-6"></span>
+    </h3>
+  </div>
+
+  <div class="omega-statgrid__cell">
+    <div class="omega-statgrid__label">
+      <span class="omega-micro">Latest post</span>
+      <i class="fa-solid fa-clock fa-sm"></i>
+    </div>
+    <h3 class="omega-statgrid__value" id="stat-latest-post">
+      <span class="spinner-border spinner-border-sm fs-6"></span>
+    </h3>
+    <small class="text-muted text-truncate d-block" id="stat-latest-title"></small>
+  </div>
+
+  <div class="omega-statgrid__cell">
+    <div class="omega-statgrid__label">
+      <span class="omega-micro">Categories in use</span>
+      <i class="fa-solid fa-tags fa-sm"></i>
+    </div>
+    <h3 class="omega-statgrid__value" id="stat-categories">
+      <span class="spinner-border spinner-border-sm fs-6"></span>
+    </h3>
+  </div>
+</div>
+
+<!-- Filter -->
+<div class="row mb-3">
+  <div class="col">
+    <div class="input-group">
+      <span class="input-group-text">
+        <i class="fa-solid fa-magnifying-glass fa-sm"></i>
+      </span>
+      <input type="text" class="form-control" id="posts-filter" placeholder="Filter by title, category, or URL..." aria-label="Filter posts">
+    </div>
+  </div>
+</div>
+
+<!-- Posts Table -->
+<div class="card">
+  <div class="card-body p-0">
+    <!-- Loading -->
+    <div id="posts-loading" class="text-center text-muted py-5">
+      <span class="spinner-border spinner-border-sm"></span>
+    </div>
+
+    <!-- Empty State -->
+    <div id="posts-empty" class="text-center text-muted py-5 d-none">
+      No posts yet
+    </div>
+
+    <!-- Table -->
+    <div class="table-responsive">
+      <table class="table omega-table d-none" id="posts-table">
+        <thead>
+          <tr>
+            <th>Post</th>
+            <th>Author</th>
+            <th>Categories</th>
+            <th>Published</th>
+            <th style="width: 40px;"></th>
+          </tr>
+        </thead>
+        <tbody id="posts-tbody"></tbody>
+      </table>
+    </div>
+  </div>
+
+  <!-- Footer -->
+  <div class="card-footer d-none" id="posts-footer">
+    <div class="d-flex justify-content-between align-items-center">
+      <div class="small text-muted" id="posts-count"></div>
+      <div class="small text-muted">New and edited posts appear here after the next site build</div>
+    </div>
+  </div>
+</div>

package/core/_layouts/blueprint/admin/stackblitz/index.html

@@ -0,0 +1,30 @@
+---
+layout: admin/core/minimal
+
+meta:
+  title: "Stackblitz - Admin"
+  description: "Stackblitz cloud IDE"
+  breadcrumb: "Stackblitz"
+config:
+  theme:
+    header:
+      title:
+        content: "Stackblitz"
+        icon: "bolt"
+      breadcrumbs:
+        items:
+          - label: "Admin"
+            href: "/admin"
+          - label: "Stackblitz"
+---
+
+<div class="row flex-grow-1">
+  <div class="col d-flex">
+    <iframe
+      src="https://stackblitz.com/edit/itw-creative-works-nodejs?embed=1&view=editor&hidedevtools=0&terminalHeight=30&showSidebar=1"
+      class="border-0 rounded w-100 flex-grow-1"
+      allowfullscreen
+      loading="lazy">
+    </iframe>
+  </div>
+</div>

package/core/_layouts/blueprint/admin/studio/index.html

@@ -0,0 +1,85 @@
+---
+layout: frontend/core/base
+
+meta:
+  title: "Animation Studio"
+  index: false
+config:
+  theme:
+    nav:
+      enabled: false
+    footer:
+      enabled: false
+  client:
+    auth:
+      config:
+        policy: "authenticated"
+    consent:
+      enabled: false
+    chatsy:
+      enabled: false
+    exitPopup:
+      enabled: false
+---
+
+<div id="studio" hidden>
+  <!-- Clip selector sidebar -->
+  <nav id="studio-nav">
+    <div class="studio-brand">{{ resolved.config.brand.name }} Studio</div>
+    <div class="studio-clips" id="studio-clips">
+      <!-- Populated by JS from registered clips -->
+    </div>
+    <form id="studio-controls-form" class="studio-controls" data-form-state="initializing" onsubmit="return false">
+      <fieldset id="studio-fieldset">
+        <!-- Aspect ratio toggle -->
+        <label class="studio-label">
+          Aspect Ratio
+          <div class="d-flex gap-1">
+            <button type="button" class="studio-aspect-btn active" data-aspect="16:9">16:9</button>
+            <button type="button" class="studio-aspect-btn" data-aspect="9:16">9:16</button>
+          </div>
+        </label>
+        <label class="studio-label">
+          Resolution
+          <select name="resolution" id="studio-resolution">
+            <option value="960x540">540p (960×540)</option>
+            <option value="1280x720">720p (1280×720)</option>
+            <option value="1920x1080" selected>1080p (1920×1080)</option>
+            <option value="3840x2160">4K (3840×2160)</option>
+          </select>
+        </label>
+        <label class="studio-label">
+          Pause (ms)
+          <input type="range" name="pause" id="studio-pause" min="500" max="4000" value="1500" step="100">
+          <span id="studio-pause-val">1500</span>
+        </label>
+        <label class="studio-label">
+          Speed
+          <select name="speed" id="studio-speed">
+            <option value="0.5">0.5×</option>
+            <option value="1" selected>1×</option>
+            <option value="1.5">1.5×</option>
+            <option value="2">2×</option>
+          </select>
+        </label>
+        <label class="studio-label">
+          Appearance
+          <div class="d-flex gap-1">
+            <button type="button" class="studio-toggle-btn" data-appearance-set="light">Light</button>
+            <button type="button" class="studio-toggle-btn" data-appearance-set="dark">Dark</button>
+            <button type="button" class="studio-toggle-btn" data-appearance-set="system">System</button>
+          </div>
+        </label>
+        <button type="button" id="studio-toggle" class="studio-play-btn">⏸ Pause</button>
+        <button type="button" id="studio-record" class="studio-record-btn">⏺ Record</button>
+      </fieldset>
+    </form>
+  </nav>
+
+  <!-- Animation stage -->
+  <main id="studio-stage">
+    <div id="studio-canvas" data-aspect="16:9">
+      <!-- Animation content injected by JS -->
+    </div>
+  </main>
+</div>

package/core/_layouts/blueprint/admin/users/index.html

@@ -0,0 +1,272 @@
+---
+layout: admin/core/minimal
+
+meta:
+  title: "Users - Admin"
+  description: "Manage system users"
+  breadcrumb: "All users"
+
+config:
+  theme:
+    header:
+      title:
+        content: "Users"
+        icon: "users"
+      breadcrumbs:
+        items:
+          - label: "Admin"
+            href: "/admin"
+          - label: "Users"
+---
+
+<!-- Page Header Actions -->
+<div class="row mb-4">
+  <div class="col">
+    <div class="d-flex justify-content-between align-items-center">
+      <div>
+        <p class="text-muted mb-0">Newest accounts first. Filter by email prefix or paste a UID</p>
+      </div>
+      <div>
+        <button class="btn btn-outline-adaptive" id="btn-refresh-users">
+          <i class="fa-solid fa-rotate fa-md me-2"></i>
+          Refresh
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Merged stat card (App DNA) -->
+<div class="omega-statgrid mb-4" style="--omega-statgrid-cols: 3;">
+  <div class="omega-statgrid__cell">
+    <div class="omega-statgrid__label">
+      <span class="omega-micro">Total users</span>
+      <i class="fa-solid fa-users fa-sm"></i>
+    </div>
+    <h3 class="omega-statgrid__value" id="stat-total-users">
+      <span class="spinner-border spinner-border-sm fs-6"></span>
+    </h3>
+    <small class="text-muted" id="stat-new-users"></small>
+  </div>
+
+  <div class="omega-statgrid__cell">
+    <div class="omega-statgrid__label">
+      <span class="omega-micro">Active subscriptions</span>
+      <i class="fa-solid fa-credit-card fa-sm"></i>
+    </div>
+    <h3 class="omega-statgrid__value" id="stat-active-subs">
+      <span class="spinner-border spinner-border-sm fs-6"></span>
+    </h3>
+  </div>
+
+  <div class="omega-statgrid__cell">
+    <div class="omega-statgrid__label">
+      <span class="omega-micro">Active users (30d)</span>
+      <i class="fa-solid fa-user-plus fa-sm"></i>
+    </div>
+    <h3 class="omega-statgrid__value" id="stat-active-users">
+      <span class="spinner-border spinner-border-sm fs-6"></span>
+    </h3>
+  </div>
+</div>
+
+<!-- Search Form -->
+<form id="user-search-form" data-form-state="initializing" onsubmit="return false">
+  <div class="row mb-3">
+    <div class="col">
+      <div class="input-group">
+        <span class="input-group-text">
+          <i class="fa-solid fa-magnifying-glass fa-sm"></i>
+        </span>
+        <input type="text" class="form-control" name="search.query" placeholder="Filter by email prefix, or paste a UID..." aria-label="Filter users" autofocus>
+        <button type="submit" class="btn btn-adaptive">
+          <span class="button-text">Search</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</form>
+
+<!-- Users Table -->
+<div class="card">
+  <div class="card-body p-0">
+    <!-- Loading -->
+    <div id="users-loading" class="text-center text-muted py-5">
+      <span class="spinner-border spinner-border-sm"></span>
+    </div>
+
+    <!-- Empty State -->
+    <div id="users-empty" class="text-center text-muted py-5 d-none">
+      No users found
+    </div>
+
+    <!-- Table -->
+    <div class="table-responsive">
+      <table class="table omega-table d-none" id="users-table">
+        <thead>
+          <tr>
+            <th>User</th>
+            <th>Plan</th>
+            <th>Sign-in</th>
+            <th>Status</th>
+            <th>Created</th>
+            <th style="width: 40px;"></th>
+          </tr>
+        </thead>
+        <tbody id="users-tbody"></tbody>
+      </table>
+    </div>
+  </div>
+
+  <!-- Footer -->
+  <div class="card-footer d-none" id="users-footer">
+    <div class="d-flex justify-content-between align-items-center">
+      <div class="small text-muted" id="users-count"></div>
+      <button class="btn btn-sm btn-outline-adaptive d-none" id="btn-load-more">
+        <span class="button-text">Load more</span>
+      </button>
+    </div>
+  </div>
+</div>
+
+<!-- User Detail Modal -->
+<div class="modal fade" id="user-detail-modal" tabindex="-1" aria-labelledby="user-detail-modal-label" aria-hidden="true">
+  <div class="modal-dialog modal-lg modal-dialog-scrollable">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h6 class="modal-title" id="user-detail-modal-label">User details</h6>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body p-0">
+        <pre class="mb-0 p-3" style="max-height: 500px; overflow-y: auto; font-size: 0.85em; background: var(--bs-tertiary-bg);"><code id="user-detail-json"></code></pre>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-sm btn-outline-adaptive" id="btn-copy-uid">
+          <i class="fa-solid fa-copy fa-sm me-1"></i>
+          Copy UID
+        </button>
+        <button type="button" class="btn btn-sm btn-outline-adaptive" id="btn-view-in-firebase">
+          <i class="fa-solid fa-fire fa-sm me-1"></i>
+          View in Explorer
+        </button>
+        <button type="button" class="btn btn-sm btn-outline-adaptive" data-bs-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Sign in as user modal -->
+<div class="modal fade" id="signin-as-modal" tabindex="-1" aria-labelledby="signin-as-modal-label" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h6 class="modal-title" id="signin-as-modal-label">Sign in as user</h6>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+
+      <!-- Loading State -->
+      <div class="modal-body text-center py-5" id="signin-as-loading">
+        <div class="spinner-border text-primary mb-3" role="status">
+          <span class="visually-hidden">Loading...</span>
+        </div>
+        <h5 class="mb-2">Generating sign-in link</h5>
+        <p class="text-muted mb-0">
+          Creating a one-time token for <strong id="signin-as-loading-email" class="text-body"></strong>...
+        </p>
+      </div>
+
+      <!-- Ready State -->
+      <div class="modal-body text-center d-none" id="signin-as-ready">
+        <div class="rounded-circle d-inline-flex align-items-center justify-content-center p-3 bg-success bg-opacity-10 mx-auto mb-3">
+          <i class="fa-solid fa-circle-check fa-2xl text-success"></i>
+        </div>
+        <h5 class="mb-2">Sign-in link ready</h5>
+        <p class="text-muted mb-3">
+          A one-time sign-in link for <strong id="signin-as-email" class="text-body"></strong> has been generated. Open it in an incognito window to avoid signing out of your admin session.
+        </p>
+        <div class="input-group mb-2">
+          <input type="text" class="form-control form-control-sm font-monospace" id="signin-as-url" readonly>
+          <button type="button" class="btn btn-sm btn-outline-adaptive" id="btn-signin-as-copy" aria-label="Copy sign-in link">
+            <i class="fa-solid fa-copy fa-sm"></i>
+          </button>
+        </div>
+        <small class="text-muted d-block">The link contains a short-lived custom token</small>
+      </div>
+
+      <!-- Error State -->
+      <div class="modal-body text-center py-5 d-none" id="signin-as-error">
+        <div class="rounded-circle d-inline-flex align-items-center justify-content-center p-3 bg-danger bg-opacity-10 mx-auto mb-3">
+          <i class="fa-solid fa-circle-xmark fa-2xl text-danger"></i>
+        </div>
+        <h5 class="mb-2">Failed to generate link</h5>
+        <p class="text-muted mb-0" id="signin-as-error-message"></p>
+      </div>
+
+      <div class="modal-footer">
+        <button type="button" class="btn btn-sm btn-outline-adaptive" data-bs-dismiss="modal">Cancel</button>
+        <button type="button" class="btn btn-sm btn-adaptive d-none" id="btn-signin-as-navigate">
+          <i class="fa-solid fa-arrow-up-right-from-square fa-sm me-1"></i>
+          Open in new tab
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- User Edit Modal -->
+<div class="modal fade" id="user-edit-modal" tabindex="-1" aria-labelledby="user-edit-modal-label" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h6 class="modal-title" id="user-edit-modal-label">Edit user</h6>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <form id="user-edit-form" data-form-state="initializing" onsubmit="return false">
+          <!-- UID (read-only) -->
+          <div class="mb-3">
+            <label class="form-label small text-muted">UID</label>
+            <input type="text" class="form-control form-control-sm font-monospace" id="edit-uid" readonly disabled>
+          </div>
+
+          <!-- Email (read-only) -->
+          <div class="mb-3">
+            <label class="form-label small text-muted">Email</label>
+            <input type="text" class="form-control form-control-sm" id="edit-email" readonly disabled>
+          </div>
+
+          <hr>
+
+          <!-- Roles -->
+          <h6 class="mb-3">Roles</h6>
+          <div class="form-check form-switch mb-3">
+            <input class="form-check-input" type="checkbox" id="edit-role-admin" name="roles.admin">
+            <label class="form-check-label" for="edit-role-admin">Administrator</label>
+          </div>
+
+          <hr>
+
+          <!-- Subscription -->
+          <h6 class="mb-3">Subscription</h6>
+          <div class="mb-3">
+            <label for="edit-plan" class="form-label small">Plan</label>
+            <input type="text" class="form-control form-control-sm" id="edit-plan" name="subscription.product.id" placeholder="e.g. basic, premium, max">
+          </div>
+          <div class="mb-3">
+            <label for="edit-expires" class="form-label small">Expires (date)</label>
+            <input type="date" class="form-control form-control-sm" id="edit-expires" name="subscription.expires.date">
+          </div>
+
+          <!-- Submit -->
+          <div class="d-flex justify-content-end gap-2 mt-4">
+            <button type="button" class="btn btn-sm btn-outline-adaptive" data-bs-dismiss="modal">Cancel</button>
+            <button type="submit" class="btn btn-sm btn-adaptive">
+              <i class="fa-solid fa-check fa-sm me-1"></i>
+              <span class="button-text">Save changes</span>
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>