{% extends "app.html" %}
{% comment %}
# SPDX-License-Identifier: AGPL-3.0-or-later
{% endcomment %}

{% load bootstrap %}
{% load i18n %}
{% load static %}
{% load extras %}

{% block page_head %}
  <link type="text/css" rel="stylesheet"
        href="{% static 'storage/storage.css' %}">
{% endblock %}

{% block configuration %}

  <p>{% trans "The following storage devices are in use:" %}</p>

  <div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th>{% trans "Device" %}</th>
          <th>{% trans "Label" %}</th>
          <th>{% trans "Mount Point" %}</th>
          <th>{% trans "Type" %}</th>
          <th>{% trans "Used" %}</th>
          <th>{% trans "Actions" %}</th>
        </tr>
      </thead>
      <tbody>
        {% for disk in disks %}
          <tr>
            <td>{{ disk.device }}</td>
            <td>{{ disk.label|default_if_none:"" }}</td>
            <td>{{ disk.mount_points|join:"<br>" }}</td>
            <td>{{ disk.filesystem_type }}</td>
            <td>
              {% if 'percent_used' in disk %}
                <div class="progress">
                  <div class="progress-bar progress-bar-striped
                              {% if disk.percent_used < 75 %}
                                bg-success
                              {% elif disk.percent_used < 90 %}
                                bg-warning
                              {% else %}
                                bg-danger
                              {% endif %}
                              w-{{ disk.percent_used }}"
                       role="progressbar" aria-valuenow="disk.percent_used"
                       aria-valuemin="0" aria-valuemax="100">
                    {{ disk.percent_used }}%
                  </div>
                </div>
                <div>{{ disk.used_str }} / {{ disk.size_str }}</div>
              {% endif %}
            </td>
            <td>
              {% if disk.is_removable %}
                <form class="form" method="post"
                      action="{% url 'storage:eject' disk.device|urlencode:'' %}">
                  {% csrf_token %}

                  <button type="submit" class="btn btn-sm btn-default">
                    {% icon 'eject' %}
                  </button>
                </form>
              {% endif %}
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {% if expandable_root_size %}
    <h3>{% trans "Partition Expansion" %}</h3>
    <p>
      {% blocktrans trimmed %}
        There is {{ expandable_root_size }} of unallocated space
        available after your root partition.  Root partition can be
        expanded to use this space.  This will provide you additional
        free space to store your files.
      {% endblocktrans %}
    </p>
    <p>
      <a class="btn btn-primary btn-md" href="{% url 'storage:expand' %}"
         role="button">
        {% trans "Expand Root Partition" %}</a>
    </p>
  {% endif %}

  <h3>{%trans "Advanced" %} </h3>
  <p>
    {% blocktrans trimmed %}
      Advanced storage operations such as disk partitioning and RAID management
      are provided by the <a href="/_cockpit/storage">Cockpit</a> app.
    {% endblocktrans %}
  </p>

{% endblock %}
