{% extends "base.html" %}
{% block title %}Gestion des documents{% endblock %}

{% block extra_css %}
<style>
  /* Style pour les badges de type de fichier (sans couleur) */
  .file-badge {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: 0.35rem;
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    background-color: #e9ecef;
    color: #495057;
  }

  /* Style pour le tableau */
  .documents-table {
    width: 100%;
  }

  .documents-table th {
    background-color: #f8f9fa;
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #e3e6f0;
  }

  .documents-table th a {
    color: #4e73df;
    text-decoration: none;
  }

  .documents-table th a:hover {
    text-decoration: underline;
  }

  .documents-table td {
    padding: 1rem;
    border-bottom: 1px solid #e3e6f0;
    vertical-align: middle;
  }

  .documents-table tr:hover {
    background-color: rgba(78, 115, 223, 0.05);
  }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid px-4">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3 mb-0 text-gray-800">Gestion des documents</h1>
    <a href="{{ url_for('main.upload') }}" class="btn btn-primary btn-custom">
      <i class="bi bi-upload me-1"></i> Télécharger un document
    </a>
  </div>

  <!-- Tableau des documents -->
  <div class="card" style="border-radius: 0.5rem; box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1); border: 1px solid #e3e6f0; background-color: white; margin-bottom: 1.5rem;">
    <div class="card-header" style="background-color: #f8f9fa; border-bottom: 1px solid #e3e6f0; padding: 1rem 1.5rem; border-radius: 0.5rem 0.5rem 0 0;">
      <h6 class="m-0 font-weight-bold" style="color: #4e73df;">Liste des documents</h6>
    </div>
    <div class="card-body" style="padding: 1.5rem;">
      <div class="table-responsive">
        <table class="documents-table table table-hover">
          <thead>
            <tr>
              <th>
                <a href="{{ url_for('main.admin_documents', sort_by='title', direction='asc' if request.args.get('direction') == 'desc' else 'desc') }}">
                  Titre
                  {% if request.args.get('sort_by') == 'title' %}
                    {% if request.args.get('direction') == 'asc' %}
                      <i class="bi bi-sort-alpha-down"></i>
                    {% else %}
                      <i class="bi bi-sort-alpha-up"></i>
                    {% endif %}
                  {% endif %}
                </a>
              </th>
              <th>
                <a href="{{ url_for('main.admin_documents', sort_by='file_type', direction='asc' if request.args.get('direction') == 'desc' else 'desc') }}">
                  Type
                  {% if request.args.get('sort_by') == 'file_type' %}
                    {% if request.args.get('direction') == 'asc' %}
                      <i class="bi bi-sort-alpha-down"></i>
                    {% else %}
                      <i class="bi bi-sort-alpha-up"></i>
                    {% endif %}
                  {% endif %}
                </a>
              </th>
              <th>
                <a href="{{ url_for('main.admin_documents', sort_by='uploaded_by', direction='asc' if request.args.get('direction') == 'desc' else 'desc') }}">
                  Téléchargé par
                  {% if request.args.get('sort_by') == 'uploaded_by' %}
                    {% if request.args.get('direction') == 'asc' %}
                      <i class="bi bi-sort-alpha-down"></i>
                    {% else %}
                      <i class="bi bi-sort-alpha-up"></i>
                    {% endif %}
                  {% endif %}
                </a>
              </th>
              <th>
                <a href="{{ url_for('main.admin_documents', sort_by='created_at', direction='asc' if request.args.get('direction') == 'desc' else 'desc') }}">
                  Date
                  {% if request.args.get('sort_by') == 'created_at' %}
                    {% if request.args.get('direction') == 'asc' %}
                      <i class="bi bi-sort-numeric-down"></i>
                    {% else %}
                      <i class="bi bi-sort-numeric-up"></i>
                    {% endif %}
                  {% endif %}
                </a>
              </th>
              <th class="text-end" style="width: 280px;">Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for doc in documents %}
            <tr>
              <td>{{ doc.title }}</td>
              <td>
                <span class="file-badge">{{ doc.file_type|upper }}</span>
              </td>
              <td>{{ doc.uploaded_by }}</td>
              <td>{{ doc.created_at.strftime('%d/%m/%Y %H:%M') }}</td>
              <td class="text-end">
                <div class="d-flex gap-2 justify-content-end">
                  <!-- Bouton Voir -->
                  <a href="{{ url_for('main.view_document', document_id=doc.id) }}" class="btn btn-outline-primary btn-custom d-flex align-items-center" title="Voir le document">
                    <i class="bi bi-eye me-1"></i> Voir
                  </a>

                  <!-- Bouton Ouvrir -->
                  <a href="{{ url_for('main.open_with_app', document_id=doc.id) }}" class="btn btn-outline-secondary btn-custom d-flex align-items-center" title="Ouvrir le document">
                    <i class="bi bi-box-arrow-up-right me-1"></i> Ouvrir
                  </a>

                  <!-- Bouton Modifier -->
                  <a href="{{ url_for('main.edit_document', document_id=doc.id) }}" class="btn btn-outline-warning btn-custom d-flex align-items-center" title="Modifier le document">
                    <i class="bi bi-pencil me-1"></i> Modifier
                  </a>

                  <!-- Bouton Supprimer -->
                  <form action="{{ url_for('main.delete_document', document_id=doc.id) }}" method="POST" class="d-inline">
                    <button type="submit" class="btn btn-outline-danger btn-custom d-flex align-items-center" title="Supprimer le document"
                            onclick="return confirm('Êtes-vous sûr de vouloir supprimer ce document ?')">
                      <i class="bi bi-trash me-1"></i> Supprimer
                    </button>
                  </form>
                </div>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- Message si aucun document -->
  {% if not documents %}
  <div class="text-center py-5">
    <div class="mb-3">
      <i class="bi bi-file-earmark-x fs-1 text-gray-300"></i>
    </div>
    <h4 class="text-gray-600">Aucun document disponible</h4>
    <p class="text-gray-500 mb-4">Commencez par télécharger des documents</p>
    <a href="{{ url_for('main.upload') }}" class="btn btn-primary btn-custom">
      <i class="bi bi-upload me-1"></i> Télécharger un document
    </a>
  {% endif %}
</div>
{% endblock %}