clanker-saddle/src/pages/stack_detail.html

<!DOCTYPE html>
<html lang="en">
<head>
    <pstm-uri>/stacks/{stack_id}</pstm-uri>
    <pstm-template>main</pstm-template>
</head>
<body>
    <section>
        <h2 stm-if="stack != null && stack.exists" stm-text="stack.name">Stack</h2>
        <p stm-if="stack != null && !stack.exists" class="muted">Stack not found.</p>

        <div stm-if="stack != null && stack.exists">
            <p><a href="/stacks">All stacks</a></p>
            <div class="cards">
                <section class="card">
                    <h3>Details</h3>
                    <p class="muted" stm-if="stack.summary.length > 0" stm-text="stack.summary">summary</p>
                    <p class="muted">Created <span stm-text="stack.created_display">when</span></p>
                </section>

                <section class="card">
                    <h3>Edit</h3>
                    <form stm-action="stack.update">
                        <input type="hidden" name="stack_id" stm-attribute.value="stack.id">
                        <div class="form-row"><label>Name</label>
                            <input type="text" name="name" stm-attribute.value="stack.name"></div>
                        <div class="form-row"><label>Summary</label>
                            <input type="text" name="summary" stm-attribute.value="stack.summary"></div>
                        <button type="submit">Save</button>
                    </form>
                </section>
            </div>

            <h3>Projects in this stack</h3>
            <p class="muted">Applying the stack adds each of these to a project's or a goal's
                linked projects with the relationship shown here.</p>
            <table>
                <thead><tr><th>Project</th><th>Git URL</th><th>Relationship</th><th></th></tr></thead>
                <tbody>
                    <tr stm-for-member-in="stack.members">
                        <td><a stm-attribute.href="'/projects/' + member.project_id" stm-text="member.name">name</a></td>
                        <td stm-text="member.git_url">git_url</td>
                        <td><span stm-attribute.class="'badge badge-' + member.relationship" stm-text="member.relationship">relationship</span></td>
                        <td><button type="button" stm-action="member.remove" stm-confirm="Remove this project from the stack?">Remove</button></td>
                    </tr>
                    <tr stm-if="stack.members.length == 0"><td colspan="4" class="muted">No projects in this stack yet.</td></tr>
                </tbody>
            </table>
            <form class="inline" stm-action="stack.add_member" stm-if="stack.options.length > 0">
                <label for="member-target">Add project</label>
                <select id="member-target" name="project_id" required>
                    <option stm-for-option-in="stack.options" stm-attribute.value="option.id" stm-text="option.name">project</option>
                </select>
                <select name="relationship">
                    <option value="reference" selected>reference</option>
                    <option value="co-developed">co-developed</option>
                </select>
                <button type="submit">Add</button>
            </form>

            <form class="inline">
                <button type="button" stm-action="stack.delete" stm-confirm="Delete this stack? Its projects keep any links already applied.">Delete stack</button>
            </form>
        </div>
    </section>
</body>
</html>