{% extends "base.html" %}
{% from "_ui.html" import icon, op_badge, empty %}
{% set page_title = 'Задачи' %}

{% block page_header %}
<div class="page-header">
  <div>
    <h1>Задачи</h1>
    <p class="lead">Долгие операции выполняются в фоне: создание машин, распаковка и конвертация образов. Можно закрыть страницу — работа продолжится.</p>
  </div>
</div>
{% endblock %}

{% block content %}
<article class="card">
  {% if operations %}
    <div class="table-wrap">
      <table class="table">
        <thead><tr><th>Задача</th><th>Статус</th><th class="hide-sm">Прогресс</th><th class="hide-sm">Начата</th><th></th></tr></thead>
        <tbody>
          {% for op in operations %}
            {% set os = op.status|operation_state %}
            <tr>
              <td><a class="strong" href="/operations/{{ op.id }}" style="color:inherit">{{ op.title }}</a><div class="subtle small truncate" style="max-width:420px">{{ op.message }}</div></td>
              <td>{{ op_badge(op.status) }}</td>
              <td class="hide-sm" style="width:180px"><div class="progress {{ 'success' if op.status == 'success' else 'danger' if op.status == 'error' else '' }}"><span style="width:{{ op.progress|default(0) }}%"></span></div></td>
              <td class="hide-sm nowrap subtle">{{ op.created_at }}</td>
              <td><div class="actions"><a class="btn btn-sm btn-ghost" href="/operations/{{ op.id }}">Подробнее{{ icon('chevron-right', 'icon-sm') }}</a></div></td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% else %}
    {{ empty('list-checks', 'Задач пока нет', 'Когда вы создадите машину или загрузите образ, здесь появится ход выполнения.', '/vm/create', 'Создать машину') }}
  {% endif %}
</article>
{% endblock %}