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

{% block content %}

<section class="card">
  <div class="preview-header">
    {% if from_trash %}
      <a href="{{ url_for('trash_list') }}" class="back-link">← Corbeille</a>
    {% else %}
      <a href="{{ url_for('browse', subpath=parent_path) if parent_path else url_for('browse') }}"
         class="back-link">← Retour</a>
    {% endif %}
    <h1 id="preview-title">{{ filename }}</h1>
    {% if not from_trash %}
    <button type="button" id="rename-toggle" class="btn-icon" title="Renommer ce fichier">✏️</button>
    {% include '_preview_nav.html' %}
    {% endif %}
  </div>
  {% if not from_trash %}
  <div id="rename-inline" class="rename-inline" style="display:none">
    <input type="text" id="rename-input" class="rename-input" value="{{ filename }}">
    <button type="button" id="rename-save"   class="btn-rename-ok"     title="Valider">✓</button>
    <button type="button" id="rename-cancel" class="btn-rename-cancel" title="Annuler">✕</button>
    <span   id="rename-error" class="rename-error"></span>
  </div>
  <script>
  (function () {
    const RENAME_URL  = {{ url_for('rename_file') | tojson }};
    const FILE_PATH   = {{ subpath | tojson }};
    const renameToggle = document.getElementById('rename-toggle');
    const renameInline = document.getElementById('rename-inline');
    const renameInput  = document.getElementById('rename-input');
    const renameSave   = document.getElementById('rename-save');
    const renameCancel = document.getElementById('rename-cancel');
    const renameError  = document.getElementById('rename-error');
    renameToggle.addEventListener('click', () => {
      const open = renameInline.style.display !== 'none';
      renameInline.style.display = open ? 'none' : 'flex';
      if (!open) { renameInput.focus(); renameInput.select(); }
      renameError.textContent = '';
    });
    renameCancel.addEventListener('click', () => { renameInline.style.display = 'none'; renameError.textContent = ''; });
    async function doRename() {
      const newName = renameInput.value.trim();
      if (!newName) return;
      renameSave.disabled = true;
      const fd = new FormData(); fd.append('path', FILE_PATH); fd.append('new_name', newName);
      try {
        const data = await fetch(RENAME_URL, { method: 'POST', body: fd }).then(r => r.json());
        if (data.error) { renameError.textContent = data.error; return; }
        window.location.href = data.browse_url;
      } catch { renameError.textContent = 'Erreur réseau.'; }
      finally { renameSave.disabled = false; }
    }
    renameSave.addEventListener('click', doRename);
    renameInput.addEventListener('keydown', e => { if (e.key === 'Enter') doRename(); if (e.key === 'Escape') renameCancel.click(); });
  })();
  </script>
  {% endif %}
  <div class="preview-meta">
    <span>Taille : <strong>{{ filesize }}</strong></span>
    <span>Modifié : <strong>{{ mtime.strftime('%d/%m/%Y %H:%M') }}</strong></span>
  </div>
  <div style="margin-top:1.5rem">
    <p style="color:var(--muted); font-size:.9rem; margin-bottom:1rem">
      Aperçu non disponible pour ce type de fichier.
    </p>
    <a href="{{ raw_url }}" class="btn btn-primary" download="{{ filename }}">
      Télécharger {{ filename }}
    </a>
  </div>
</section>

{% endblock %}