{% extends "base.html" %} {% block title %}Stack {{stack_name}}{% endblock %} {% block content %} <main> <h1>Stack details for <span class="stack-name">{{stack_name}}</span></h1> <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> <h2>Editor</h2> <textarea id="editor">{{file_contents}}</textarea> </main> <style scoped> main { display: flex; flex-direction: column; gap: 1rem; } h2 { text-transform: uppercase; margin: 0; padding: 0; } pre { margin: 0; padding: 0; } .containers { background-color: #171625; 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; &.exited { background-color: #E5484D; } &.running { background-color: #46A758; } } } .stack-name { color: #E796F3; } .ace_editor { min-height: 50vh; border: 3px solid #5958B1; border-radius: 3px; } </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 %}