<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  {% if status_code == 200 %}
  <!-- display task logs -->
  <div>
    <pre class="bg-light p-1 border rounded" style="font-size: x-small">{{logs}}</pre>
  </div>
  {% else %}
  <!-- display errors to user -->
  <div class="alert alert-danger" role="alert">
    <h4 class="alert-heading">{{ message }}</h4>
    <p>
      {% for error in errors %}
        {% if error is string %}{{ error }}
        {% elif error is mapping %}
          {% for key, value in error.items() %}
            <strong>{{ key }}:</strong> {{ value }}<br>
          {% endfor %}
        {% endif %}
      {% endfor %}
    </p>
  </div>
  {% endif %}
</body>
</html>