{% if storage %}
  <li class="nav-item col-lg-auto d-flex align-items-center">
    <i
      id="storage_icon"
      class="nav-link me-1 bi bi-sd-card"
      aria-current="page"
      data-bs-toggle="tooltip"
      data-bs-html="true"
      data-bs-placement="bottom"
      data-bs-title="
        <span><u>STORAGE</u><span>
        <br>
        Used: {{ storage.used_percent }}%
        <br>
        Status:
          <span class={% if storage.status == 'error' %}text-danger{% else %}text-success{% endif %}>
            {{ storage.status }}
          <span>
      "
    >
    </i>
    <div
      id="storage_progress_container"
      class="progress"
      role="progressbar"
      aria-label="storage used"
      aria-valuenow="{{ storage.used_percent }}"
      aria-valuemin="0"
      aria-valuemax="100"
      style="width: 125px"
      data-bs-toggle="tooltip"
      data-bs-html="true"
      data-bs-placement="bottom"
      data-bs-title="
        Total: {{ storage.total|filesizeformat }}
        <br>
        Used: {{ storage.used|filesizeformat }}
        <br>
        Free: {{ storage.free|filesizeformat }}
      "
    >
      <div
        id="storage_progress"
        class="progress-bar
          {% if storage.used_percent > 90 %} bg-danger
          {% elif storage.used_percent > 80 %} bg-warning
          {% else %} bg-success
          {% endif %}"
        style="width: {{ storage.used_percent }}%"
        storage-url="{% url 'collector_api:storage-info' %}"
      >
      </div>
    </div>
  </li>
{% endif %}