<!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>
        .container, body, div {
            width: 100%;
        }
    </style>
</head>
<body>
<p id="hours"></p>
{% if repo_list %}
<div class="container p-3">
{% for repo in repo_list %}
    <div class="float-lg-start rounded overflow-hidden bg-primary
                {% if not repo.archive_after_latest_error %}bg-danger{% endif %}">
        <h2 class="repo_label">{{ repo.label }}
            <small class="text-muted"> {{ repo.location }}</small>
        </h2>
        <dl class="row">
            <dt class="col-4">Latest backup:</dt>
            <dd class="col-8">{{ repo.last_backup }}</dd>
        </dl>
        <dl class="row">
            <dt class="col-4">Hourly backups:</dt>
            <dd class="col-8">{{ repo.hourly_archive_string }}</dd>
        </dl>
        <dl class="row">
            <dt class="col-4">Size:</dt>
            <dd class="col-8">{{ 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">
            {% for error in repo.recent_errors %}
            <dt class="col-4">{{ error.time_ago }}</dt>
            <dd class="col-8 text-truncate">{{ error.error }}</dd>
            {% endfor %}
        </dl>
    </div>
{% endfor %}
<div class="float-lg-start rounded overflow-hidden bg-primary p-3">
    <canvas id="backup_csize_hourly" width="400" height="200"></canvas>
</div>
{% else %}
<p>No repos found.</p>
{% endif %}
</div>
</div>
</body>
</html>