<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Borg Summary</title>

    {% load static %}
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}">
    {{ hour_list|json_script:"hour_list" }}
    <script src="{% static 'js/index.js' %}"></script>
    <style>
        /*body {*/
        /*    align-content: center;*/
        /*}*/
    </style>
</head>
<body>
{% if repo_list %}
<div class="container p-4 d-flex align-content-center flex-wrap">
{% for repo in repo_list %}
    <div class="col-5 p-3 rounded bg-primary
                {% if not repo.archive_after_latest_error %}bg-danger{% endif %}">
        <h2 class="py-1 e">{{ repo.label }}
            <small class="text-muted text-truncate"> {{ repo.location }}</small>
        </h2>
        <dl class="row px-5 overflow-hidden">
            <dt class="col-3">Latest backup:</dt>
            <dd class="col-9">{{ repo.last_backup }}</dd>
        </dl>
        <dl class="row px-5">
            <dt class="col-3">Hourly backups:</dt>
            <dd class="col-9">{{ repo.hourly_archive_string }}</dd>
        </dl>
        <dl class="row px-5">
            <dt class="col-3">Size:</dt>
            <dd class="col-9">{{ repo.size_string }}</dd>
        </dl>
        {% if repo.recent_errors|length > 0 %}
        <dl class="row">
            <dt class="col-12 h4">Recent errors:</dt>
        </dl>
        {% endif %}
        <dl class="row px-5">
            {% for error in repo.recent_errors %}
            <dt class="col-3">{{ error.time_ago }}</dt>
            <dd class="col-9 text-truncate">{{ error.error }}</dd>
            {% endfor %}
        </dl>
    </div>
{% endfor %}
<div class="col-5 p-3 rounded bg-primary overflow-visible">
    <canvas id="backup_csize_hourly" width="400" height="200"></canvas>
</div>
{% else %}
<p>No repos found.</p>
{% endif %}
</div>
</div>
</body>
</html>