alpinux-static/app/templates/preview_text.html

{% 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>
  {% endif %}
  <div class="preview-meta">
    <span>Taille : <strong>{{ filesize }}</strong></span>
    <span>Modifié : <strong>{{ mtime.strftime('%d/%m/%Y %H:%M') }}</strong></span>
    <a href="{{ raw_url }}" download="{{ filename }}" class="btn btn-primary" style="margin-left:auto">
      Télécharger
    </a>
  </div>
</section>

{% if not from_trash %}
<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-text-wrap">
  <div class="text-bar">
    <span>{{ filename }}</span>
    <code>{{ lang }}</code>
  </div>
  <pre>{{ content | e }}</pre>
</div>

{% endblock %}