<html>
<head>
    <title>System status</title>
    <style>
        html, body
        {
            margin: 0px;
            padding: 0px;
        }
        body
        {
            background-color: #ddd;
            font-family: 'Arial', sans-serif;
        }
        .container
        {
            background-color: #fff;
            border: 1px solid #ccc;
            margin: auto;
            width: 600px;
            margin-top: 50px;
            padding: 15px;
        }
        table
        {
            width: 100%;
        }
        h1
        {
            font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
            font-size: 22px;
        }
        td.status_1, td.status_True
        {
            background-color: #0f0;
            width: 2px;
            padding: 0px;
            margin: 0px;
        }
        td.status_0
        {
            background-color: #f00;
            width: 2px;
            padding: 0px;
            margin: 0px;
        }
    </style>
</head>
<body>
    <div class="container">
    <h1>System status</h1>
        <table>
        {% for plugin in plugins %}
            <tr>
                <td class="status_{{ plugin.status }}"></td>
                <td>{{ plugin.identifier }}</td>
                <td>{{ plugin.pretty_status }}</td>
            </tr>
        {% endfor %}
        </table>
    </div>
</body>
</html>