{% extends "base.html" %}
{% block title %}{{ document.title }}{% endblock %}

{% block content %}
<div class="max-w-5xl mx-auto space-y-6">
  <!-- MÉTADONNÉES DOCUMENT -->
  <section class="card p-6">
    <div class="flex flex-col md:flex-row md:items-start justify-between gap-4">
      <div>
        <h1 class="text-2xl font-semibold mb-2">
          {{ document.title }}
        </h1>
        <div class="space-y-1 text-sm text-gray-600 dark:text-gray-300">
          <div>
            <strong>Type :</strong>
            <span class="badge badge-primary ml-1">
              {{ document.file_type|upper }}
            </span>
          </div>
          <div>
            <strong>Uploadé par :</strong> {{ document.uploaded_by }}
          </div>
          {% if document.description %}
          <div class="pt-2">
            <strong>Description :</strong>
            <p class="mt-1">{{ document.description }}</p>
          </div>
          {% endif %}
        </div>
      </div>

      <!-- ACTIONS -->
      <div class="flex flex-wrap gap-2 md:justify-end">
        <div class="text-sm text-right md:mb-2">
          <strong>Date :</strong><br>
          {{ document.created_at.strftime('%d/%m/%Y %H:%M') }}
        </div>
        <div class="flex gap-2">
          <a href="{{ url_for('main.download_document', document_id=document.id) }}" class="btn btn-outline-primary">
            <i class="bi bi-download"></i> Télécharger
          </a>
          {% if session.get('is_admin') %}
            <a href="{{ url_for('main.edit_document', document_id=document.id) }}" class="btn btn-outline-primary">
              <i class="bi bi-pencil"></i> Modifier
            </a>
          {% endif %}
        </div>
      </div>
    </div>
  </section>

  <!-- TABLE DES MATIÈRES -->
  {% if render_type == 'markdown' and toc %}
  <section class="card">
    <div class="border-b border-gray-200 dark:border-gray-700 px-6 py-3 font-medium">
      Table des matières
    </div>
    <div class="p-6 prose dark:prose-invert max-w-none">
      {{ toc|safe }}
    </div>
  </section>
  {% endif %}

  <!-- CONTENU DU DOCUMENT -->
  <section class="card overflow-hidden">
    <div class="max-h-[70vh] overflow-y-auto p-6">
      {% if render_type == 'markdown' %}
        <article class="prose dark:prose-invert max-w-none">
          {{ content|safe }}
        </article>
      {% elif render_type == 'html' %}
        <article class="prose dark:prose-invert max-w-none">
          {{ content|safe }}
        </article>
      {% elif render_type == 'text' %}
        <pre class="whitespace-pre-wrap break-words text-sm font-mono bg-gray-50 dark:bg-gray-900 p-4 rounded">
          {{ content|safe }}
        </pre>
      {% elif render_type == 'pdf' %}
        <iframe src="{{ url_for('main.view_pdf', document_id=document.id) }}" class="w-full h-[70vh]"></iframe>
      {% else %}
        <div class="card p-6 text-center text-gray-600 dark:text-gray-300">
          <i class="bi bi-info-circle text-xl mb-2"></i>
          <p>Pour visualiser ce document ({{ document.file_type }}), veuillez le télécharger.</p>
        </div>
      {% endif %}
    </div>
  </section>
</div>
{% endblock %}