app/templates/note_preview.html

{% extends "base.html" %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6">
  <div class="mb-8">
    <div class="flex flex-col-reverse sm:flex-row sm:items-start sm:justify-between gap-4 mb-4">
      <div>
        <h1 class="font-display text-4xl sm:text-5xl font-bold tracking-tight mb-4">
          {{ note.title }}
        </h1>

        <div class="flex flex-wrap gap-3 mb-6">
          <span class="px-4 py-2 bg-blue-500/20 border border-blue-500/50 rounded-lg font-mono text-sm">
            {{ note.subject.name }}
          </span>
          <span class="px-4 py-2 bg-purple-500/20 border border-purple-500/50 rounded-lg font-mono text-sm">
            {{ note.note_type.name }}
          </span>
          <span class="glass rounded-lg font-mono text-sm text-gray-400 flex items-center gap-2 px-3 py-2">
            <img src="https://api.dicebear.com/9.x/thumbs/svg?seed={{ note.user.email }}"
              alt="{{ note.user.name }} Avatar" class="w-6 h-6 rounded-full">
            by {{ note.user.name }}
          </span>
          <span class="px-4 py-2 glass rounded-lg font-mono text-sm text-gray-400">
            {{ note.created_at.strftime('%b %d, %Y') }}
          </span>
        </div>

        {% if note.description %}
        <p class="font-mono text-gray-300 max-w-3xl">{{ note.description }}</p>
        {% endif %}
      </div>

      <a href="{{ url_for('notes.list') }}"
        class="inline-flex items-center gap-2 font-mono text-sm text-gray-400 hover:text-blue-400 transition whitespace-nowrap">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
        </svg>
        Back to Notes
      </a>
    </div>
  </div>

  <!-- Preview Area -->
  <div class="grid grid-cols-1 xl:grid-cols-4 gap-4 mb-8">
    <div class="glass p-4 sm:p-8 rounded-2xl xl:col-span-3" id="preview-container">
      {% if preview.kind == 'youtube' %}
      <div class="rounded-2xl overflow-hidden bg-black/40 border border-white/10">
        <iframe src="{{ preview.embed_url }}" class="w-full aspect-video" frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen loading="lazy"></iframe>
      </div>
      {% elif preview.kind == 'image' %}
      <img src="{{ preview.url }}" class="w-full rounded-xl object-contain max-h-[80vh]" alt="{{ note.title }}" loading="lazy">
      {% elif preview.kind == 'pdf' %}
      <iframe src="{{ preview.url }}" class="w-full h-[75vh] rounded-xl bg-white/5"></iframe>
      {% elif preview.kind == 'video' %}
      <video controls class="w-full rounded-xl bg-black/40">
        <source src="{{ preview.url }}">
      </video>
      {% elif preview.kind == 'audio' %}
      <div class="glass rounded-xl p-6">
        <audio controls class="w-full">
          <source src="{{ preview.url }}">
        </audio>
      </div>
      {% elif preview.kind == 'text' %}
      <iframe src="{{ preview.url }}" class="w-full h-[75vh] rounded-xl bg-white/5"></iframe>
      {% elif preview.kind == 'document' %}
      <iframe src="{{ preview.viewer_url }}" class="w-full h-[75vh] rounded-xl bg-white/5"></iframe>
      {% elif preview.kind == 'iframe' %}
      <iframe src="{{ preview.url }}" class="w-full h-[75vh] rounded-xl bg-white/5"></iframe>
      {% else %}
      <div class="text-center py-12">
        <p class="font-mono text-gray-300 mb-3">Inline preview is not available for this resource.</p>
        <a href="{{ preview.url }}" target="_blank"
          class="inline-flex items-center gap-2 font-mono text-sm text-blue-400 hover:text-blue-300 transition break-all">
          Open in new tab
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
          </svg>
        </a>
      </div>
      {% endif %}
    </div>

    <aside class="glass rounded-2xl p-5 space-y-4">
      <h2 class="font-display text-xl">Preview Details</h2>
      <div class="space-y-3 font-mono text-xs text-gray-300">
        <div class="flex items-center justify-between gap-3">
          <span class="text-gray-500">Mode</span>
          <span class="uppercase tracking-wide">{{ preview.kind }}</span>
        </div>
        {% if preview.ext %}
        <div class="flex items-center justify-between gap-3">
          <span class="text-gray-500">File Type</span>
          <span class="uppercase tracking-wide">{{ preview.ext }}</span>
        </div>
        {% endif %}
        {% if preview.filename %}
        <div class="pt-2">
          <p class="text-gray-500 mb-1">Filename</p>
          <p class="break-words text-gray-300">{{ preview.filename }}</p>
        </div>
        {% endif %}
      </div>

      {% if preview.url %}
      <a href="{{ preview.url }}" target="_blank"
        class="w-full inline-flex justify-center items-center gap-2 px-3 py-2 rounded-lg bg-white/5 border border-white/10 font-mono text-xs hover:bg-white/10 transition">
        Open Raw Link
      </a>
      {% endif %}
    </aside>
  </div>

  <!-- Actions -->
  <div class="flex gap-4">
    {% if current_user.id == note.user_id %}
    <a href="{{ url_for('notes.edit', id=note.id) }}"
      class="btn-magnetic glass px-8 py-4 rounded-xl font-mono font-semibold hover:bg-white/5 text-center">
      Edit
    </a>
    {% endif %}
    {% if note.presigned_url %}
    {% if note.original_link %}
    <a href="{{ note.presigned_url }}" target="_blank"
      class="btn-magnetic glass px-8 py-4 rounded-xl font-mono font-semibold border-2 border-blue-500/50 hover:border-blue-400 animate-glow text-center">
      Go To Site
    </a>
    {% else %}
    <a href="{{ note.presigned_url }}" download
      class="btn-magnetic glass px-8 py-4 rounded-xl font-mono font-semibold border-2 border-blue-500/50 hover:border-blue-400 animate-glow text-center">
      Download
    </a>
    {% endif %}
    {% endif %}
    <a href="{{ url_for('notes.share', id=note.id) }}"
      class="btn-magnetic glass px-8 py-4 rounded-xl font-mono font-semibold hover:bg-white/5 text-center">
      Share
    </a>
  </div>
</div>
{% endblock %}