{% 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>Файлы .iso для установки системы с нуля</p></div>
      <form method="post" action="/iso/refresh" class="inline-form" data-toast="Список образов обновлён"><button class="btn btn-sm btn-ghost">{{ icon('refresh-cw', 'icon-sm') }}Обновить</button></form>
    </div>
    {% if isos %}
      <div class="list">
        {% for iso in isos %}
          <div class="list-item">
            <span class="list-icon brand">{{ icon('disc-3') }}</span>
            <div class="grow"><div class="title truncate">{{ iso.name }}</div><div class="meta">{{ iso.size|replace('MB', 'МБ') }} · загружен {{ iso.updated }}</div></div>
            <a class="btn btn-sm hide-sm" href="/vm/create?iso={{ iso.name|urlencode }}">Создать машину</a>
            <form method="post" action="/iso/{{ iso.name }}/delete" class="inline-form" data-confirm="Файл {{ iso.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('disc-3', 'Образов пока нет', 'Скачайте установочный образ нужной системы на сайте разработчика и загрузите его сюда.') }}
    {% endif %}
  </article>

  <aside class="stack">
    <article class="card">
      <div class="card-header"><h2>Загрузить образ</h2></div>
      <div class="card-body">
        {{ uploader('/iso/upload', 'iso_file', '.iso', 'Перетащите файл .iso сюда', 'или нажмите, чтобы выбрать на компьютере', '/iso', 'Загрузить') }}
      </div>
    </article>
    <article class="card">
      <div class="card-header"><h2>Где взять образ</h2></div>
      <div class="list">
        {% for name, url, note in [('Ubuntu Server', 'https://ubuntu.com/download/server', 'Популярный Linux для серверов'), ('Debian', 'https://www.debian.org/distrib/', 'Надёжный и лёгкий Linux'), ('Windows Server', 'https://www.microsoft.com/evalcenter', 'Пробная версия от Microsoft')] %}
          <a class="list-item" href="{{ url }}" target="_blank" rel="noopener">
            <div class="grow"><div class="title">{{ name }}</div><div class="meta">{{ note }}</div></div>{{ icon('external-link', 'icon-sm') }}
          </a>
        {% endfor %}
      </div>
    </article>
  </aside>
</section>
{% endblock %}