{% extends '_admin/layout/base.html' %}

{% block content %}
<main class="app-main py-4">
  <div class="container-fluid px-3 px-md-4">

    <div class="card content-card shadow-sm">
      <div class="card-header bg-white d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
        <div>
          <h2 class="h5 mb-0">
            <i class="bi bi-folder2-open me-1"></i>
            {{ translate('application_files') }}
          </h2>
          <small class="text-muted">
            {{ translate('static_files_and_folders') }}
          </small>
        </div>

        <div class="d-flex align-items-center gap-2 small text-muted">
          <i class="bi bi-info-circle"></i>
          <span>{{ translate('drag_and_drop_files_to_upload') }}</span>
        </div>
      </div>

      <div class="card-body p-0">
        <file-explorer
          root="{{ file_explorer_root }}"
          path=""
          list-url="{{ admin_interface.url_for('_AdminFileController.list_root') }}"
          create-url="{{ admin_interface.url_for('_AdminFileController.upload') }}"
          rename-url="{{ admin_interface.url_for('_AdminFileController.rename') }}"
          delete-url="{{ admin_interface.url_for('_AdminFileController.delete') }}"
          create-folder-url="{{ admin_interface.url_for('_AdminFileController.create_folder') }}"
          move-url="{{ admin_interface.url_for('_AdminFileController.move') }}"
          download-url="{{ admin_interface.url_for('_AdminFileController.download') }}"
        ></file-explorer>
      </div>

      <div class="card-footer bg-white d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">
        <div class="text-muted small">
          <i class="bi bi-shield-check me-1"></i>
          {{ translate('files_are_limited_to_the_configured_static_root') }}
        </div>

        <div class="text-muted small">
          <i class="bi bi-folder me-1"></i>
          {{ translate('current_root') }}:
          <code>{{ file_explorer_root_indicator }}</code>
        </div>
      </div>
    </div>

  </div>
</main>
{% endblock %}

{% block css %}
<style>
  file-explorer {
    display: block;
  }

  file-explorer::part(drop-zone) {
    min-height: 360px;
  }

  file-explorer::part(items) {
    padding: 1rem;
  }

  file-explorer::part(breadcrumbs) {
    background: #ffffff;
  }

  @media (max-width: 576px) {
    file-explorer::part(items) {
      padding: 0.75rem;
    }
  }
</style>
{% endblock %}