clanker-saddle/src/pages/stacks.html

<!DOCTYPE html>
<html lang="en">
<head>
    <pstm-uri>/stacks</pstm-uri>
    <pstm-template>main</pstm-template>
</head>
<body>
    <div class="stack">
        <div class="cluster cluster-between">
            <h2>Stacks</h2>
            <button type="button" class="btn-primary"
                    onclick="window.openAppDialog('stack-create-dialog')">+ New stack</button>
        </div>
        <p class="text-muted">Named bundles of reference projects — apply one to a project or a
            goal to attach its whole collection of links in a single click.</p>
        <p stm-if="stacks == null">Loading…</p>

        <div stm-if="stacks != null">
            <div class="table-wrap">
                <table stm-if="stacks.stacks.length >
 0" class="table-hover">
                <thead><tr><th>#</th><th>Name</th><th>Projects</th><th>Summary</th><th>Created</th></tr></thead>
                <tbody>
                    <tr stm-for-stack-in="stacks.stacks">
                        <td stm-text="stack.id">id</td>
                        <td><a stm-attribute.href="'/stacks/' + stack.id" stm-text="stack.name">name</a></td>
                        <td stm-text="stack.member_count">0</td>
                        <td class="text-muted" stm-text="stack.summary">summary</td>
                        <td class="text-muted" stm-text="stack.created_display">when</td>
                    </tr>
                </tbody>
            
                </table>
            </div>
            <p stm-if="stacks.stacks.length == 0" class="text-muted">No stacks yet.</p>
        </div>
    </div>

    <!-- Goal 41 T4: the create form moved from a collapsed expander
         into a Spry <dialog> behind the "+ New stack" button - same
         fields, same stm-action. -->
    <dialog id="stack-create-dialog" class="dialog-sm">
        <div class="dialog-titlebar">
            <p class="dialog-title">New stack</p>
            <button type="button" class="dialog-close" aria-label="Close"
                    onclick="window.closeAppDialog('stack-create-dialog')">×</button>
        </div>
        <form stm-action="stacks.create">
            <div class="dialog-body form-rows">
                <div class="field"><label for="stack-name">Name</label>
                    <input type="text" id="stack-name" name="name" required placeholder="Web stack references"></div>
                <div class="field"><label for="stack-summary">Summary <span class="text-muted">(optional)</span></label>
                    <input type="text" id="stack-summary" name="summary" placeholder="What this collection is for"></div>
            </div>
            <div class="dialog-footer">
                <button type="button" class="btn-ghost"
                        onclick="window.closeAppDialog('stack-create-dialog')">Cancel</button>
                <button type="submit" class="btn-primary">Create stack</button>
            </div>
        </form>
    </dialog>
</body>
</html>