{% extends "base.html" %}
{% from "_ui.html" import icon, uploader, empty %}
{% set page_title = 'Готовые системы' %}

{% block page_header %}{% include "_images_header.html" %}{% endblock %}

{% block content %}
<section class="grid grid-main">
  <article class="card">
    <div class="card-header"><div><h2>Готовые системы</h2><p>Образы уже установленных систем — машина запускается сразу, без установки</p></div></div>
    {% if images %}
      <div class="list">
        {% for image in images %}
          <div class="list-item">
            <span class="list-icon brand">{{ icon('hard-drive') }}</span>
            <div class="grow"><div class="title truncate">{{ image.name }}</div><div class="meta">{{ image.size|replace('GB', 'ГБ') }} · формат {{ image.format }} · {{ image.updated }}</div></div>
            <a class="btn btn-sm hide-sm" href="/vm/create?image={{ image.name|urlencode }}">Создать машину</a>
            <form method="post" action="/disk-images/{{ image.name }}/delete" class="inline-form" data-confirm="Файл {{ image.name }} будет удалён с сервера. Машины, созданные из него, продолжат работать." data-confirm-title="Удалить образ?" data-confirm-button="Удалить" data-toast="Образ удалён" data-toast-tone="warning">
              <button class="btn btn-sm btn-icon btn-ghost" aria-label="Удалить">{{ icon('trash-2', 'icon-sm') }}</button>
            </form>
          </div>
        {% endfor %}
      </div>
    {% else %}
      {{ empty('hard-drive', 'Готовых образов пока нет', 'Подойдут облачные образы Ubuntu и Debian, образы для Raspberry Pi, диски других систем виртуализации.') }}
    {% endif %}
  </article>

  <aside class="stack">
    <article class="card">
      <div class="card-header"><h2>Загрузить образ</h2></div>
      <div class="card-body">
        {{ uploader('/disk-images/upload', 'image_file', '.qcow2,.img,.raw,.img.xz,.zip,.tar.gz,.tgz', 'Перетащите файл образа сюда', '.qcow2, .img, .raw, а также архивы .img.xz, .zip, .tar.gz', '/disk-images', 'Загрузить') }}
      </div>
    </article>
    <article class="card">
      <div class="card-body stack-sm">
        <div class="row">{{ icon('sparkles') }}<h3>Всё делается автоматически</h3></div>
        <p class="muted small">Архивы распаковываются, а образы .img и .raw конвертируются в быстрый формат qcow2. Прогресс виден прямо здесь и в разделе «Задачи».</p>
      </div>
    </article>
  </aside>
</section>
{% endblock %}