{% import 'macro/accordion.html' as accordion %}

{{ accordion.header('Set storages', 'storage', 'metadata', expanded=open_storage, icon='archive-2-line', class='p-0') }}
{% if storage_error %}<div class="alert alert-danger m-2" role="alert"><strong>Error:</strong> {{ storage_error }}.</div>{% endif %}
<ul class="list-group list-group-flush">
  {% if metadata_storages | length %}
    {% for storage in metadata_storages %}
      <li class="list-group-item">
        <form action="{{ url_for('admin_storage.rename', id=storage.fields.id) }}" method="post" class="row row-cols-lg-auto g-3 align-items-center">
          <div class="col-12 flex-grow-1">
            <label class="visually-hidden" for="name-{{ storage.fields.id }}">Name</label>
            <div class="input-group">
              <div class="input-group-text">Name</div>
              <input type="text" class="form-control" id="name-{{ storage.fields.id }}" name="name" value="{{ storage.fields.name }}">
              <button type="submit" class="btn btn-primary"><i class="ri-edit-line"></i> Rename</button>
            </div>
          </div>
          <div class="col-12">
            <a href="{{ url_for('admin_storage.delete', id=storage.fields.id) }}" class="btn btn-danger" role="button"><i class="ri-delete-bin-2-line"></i> Delete</a>
          </div>
        </form>
      </li>
    {% endfor %}
  {% else %}
    <li class="list-group-item text-center"><i class="ri-error-warning-line"></i> No storage found.</li>
  {% endif %}
  <li class="list-group-item">
    <form action="{{ url_for('admin_storage.add') }}" method="post" class="row row-cols-lg-auto g-3 align-items-center">
      <div class="col-12 flex-grow-1">
        <label class="visually-hidden" for="name">Name</label>
        <div class="input-group">
          <div class="input-group-text">Name</div>
          <input type="text" class="form-control" id="name" name="name" value="">
        </div>
      </div>
      <div class="col-12">
        <button type="submit" class="btn btn-primary"><i class="ri-add-circle-line"></i> Add</button>
      </div>
    </form>
  </li>
</ul>
{{ accordion.footer() }}