<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scorecard</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/marx/3.0.5/marx.min.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans', sans-serif;
            padding: 0.2em;
            color: #000000;
        }
        h1 {
            display: none;
        }
        main {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-flow: column wrap;
            align-content: stretch;
            max-height: 1000px;
            max-width: 100%;
        }
        .status-green {
            background-color: #2ECC40;
        }
        .status-amber {
            background-color: #FFBF00;
        }
        .status-red {
            background-color: #FF4136;
        }
        section {
            width: 50%;
        }
        table {
            width: 96%;
            font-size: 120%;
            border-color: #0DB2B6;
        }
        table td {
            padding: 0.5em;
        }
        small {
            float: right;
        }
        table td:last-child {
            text-align: center;
            font-weight: bold;
            font-size: 130%;
            width: 20%;
        }
    </style>
</head>
<body>

<h1>Scorecard</h1>

<main>
    {% for category, kpis in scorecard.items() %}
    <section>
    <h2>{{ category }}</h2>
    <table>
        <tbody>
            {% for kpi in kpis %}
                <tr>
                    <td>
                        {% if kpi.url %}
                        <a href="{{kpi.url}}">{{ kpi.name }}</a>
                        {% else %}
                        {{ kpi.name }}
                        {% endif %}
                        <small>({{kpi.amber}}, {{kpi.green}})</small>
                    </td>
                    <td class="status-{{ kpi.status }}">
                        {{ kpi.value }}
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    </section>
    {% endfor %}
</main>

</body>
</html>
