{% extends "base.html" %} {% block title %}Stack {{stack_name}}{% endblock %} {% block content %} <main> <header> <h1>Stack details for <span class="stack-name">{{stack_name}}</span></h1> <div class="actions"> <form action="./start" method="POST"><button type="submit">Start</button></form> <form action="./restart" method="POST"><button type="submit">Restart</button></form> <form action="./stop" method="POST"><button type="submit">Stop</button></form> <form action="./down" method="POST"><button type="submit">Down</button></form> </div> </header> <section class="container-list"> <h2>Containers</h2> <table class="containers table"> <thead> <tr> <th>Name</th> <th>State</th> <th>Image</th> </tr> </thead> <tbody> {% for container in containers %} <tr> <td><a href="/container/{{container.name}}/">{{container.name}}</a></td> <td class="status {{container.state}}">{{container.state}}</td> <td>{{container.image}}</td> </tr> {% endfor %} </tbody> </table> </section> <section class="editor"> <h2>Editor</h2> <form method="POST" action="./edit" id="editor-form"> <div class="error"></div> <textarea name="source" id="editor">{{file_contents}}</textarea> <div class="row"> <input style="flex:1" name="commit_message" type="text" placeholder="What did you change?" /> <div id="editor-extra"></div> <button class="wide" type="submit">Deploy</button> </div> </form> </section> </main> <link rel="stylesheet" href="/static/css/editor.css" /> <style scoped> main { display: flex; flex-direction: column; gap: 1rem; } h2 { text-transform: uppercase; } .containers { & .status { text-align: center; font-weight: bold; color: white; padding: 0 10px; &.exited { background-color: #E5484D; } &.running { background-color: #46A758; } } } .stack-name { color: #E796F3; } .actions { display: flex; gap: 0.5rem; & form { display: flex; min-width: 80px; } & button { flex: 1; } } </style> <script type="module"> import Editor from "/static/js/ace.mjs"; import { add_check } from "/static/js/enhancements/check.mjs"; const editor = new Editor("editor"); /* Enforce check pre-submit */ const form = document.getElementById("editor-form"); add_check(form, editor); </script> {% endblock %}