{% 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"> <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> <textarea id="editor">{{file_contents}}</textarea> </section> </main> <style scoped> main { display: flex; flex-direction: column; gap: 1rem; } h2 { text-transform: uppercase; } pre { margin: 0; padding: 0; } .containers { background-color: var(--bg-raised); border: 3px solid #5958B1; border-radius: 3px; & th, & td { padding: 3px 5px; } & th { font-weight: bold; } & thead { background-color: #202248; } & .status { text-align: center; font-weight: bold; color: white; padding: 0 10px; &.exited { background-color: #E5484D; } &.running { background-color: #46A758; } } } .stack-name { color: #E796F3; } .ace_editor { min-height: 50vh; border: 3px solid #5958B1; border-radius: 3px; } .actions { display: flex; gap: 0.5rem; & form { display: flex; min-width: 80px; } & button { flex: 1; } } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.31.2/ace.min.js" integrity="sha512-4qIbBlcJOvbOmEB50FfnviJ9jOCen2yhi4skodkbTLU/uJJdULPxlX2R9Enf1oOBleUK9KD3fGmMcnItFQdNeA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> var editor = ace.edit("editor"); editor.setTheme("ace/theme/dracula"); editor.setOptions({ fontFamily: "Iosevka Web", fontSize: "12pt" }); editor.setKeyboardHandler("ace/keyboard/vim"); editor.session.setMode("ace/mode/nix"); </script> {% endblock %}