{% extends "base.html" %}
{% block title %}Gallery - CVE-2026-5026 Lab{% endblock %}

{% block content %}
<!-- Page header -->
<div class="border-b border-gray-300 pb-3 mb-4">
  <h1 class="text-[#1a26c9] text-lg font-medium">Image Gallery</h1>
  <p class="text-lab-muted text-base mt-0.5">Uploaded SVG files are rendered inline - no sanitization applied</p>
</div>

<!-- Warning -->
<div class="border border-yellow-400 rounded-lg px-4 py-2.5 text-yellow-500 text-sm mb-4">
  ⚠️ This application renders uploaded SVG files directly in the browser without content sanitization.
  JavaScript inside SVGs will execute in the viewer's session context.
</div>

<!-- Gallery card -->
<div class="border border-gray-300 rounded-xl p-4">
  <div class="flex items-center justify-between mb-3">
    <p class="text-sm uppercase tracking-widest">Uploaded Files</p>

    <label class="cursor-pointer flex items-center gap-1.5 border border-[#1a26c9] text-[#1a26c9] hover:bg-blue-50 transition-colors text-xs px-3 py-1.5 rounded-lg font-mono">
      ↑ Upload SVG
      <input type="file" accept=".svg,image/svg+xml" class="hidden" onchange="handleDirectUpload(this)"/>
    </label>
  </div>

  <!-- Uploaded files -->
  <div id="uploadedSection" class="hidden">
    <div class="grid grid-cols-3 gap-3" id="uploadedGrid"></div>
  </div>

  <p class="text-sm mt-3 text-gray-400" id="emptyMsg">No files uploaded yet. Use the Upload SVG button above or go to the Upload section.</p>
</div>

<!-- SVG render zone -->
<div id="svgRenderZone" class="hidden"></div>
{% endblock %}

{% block scripts %}
<script src="/static/js/gallery.js"></script>
{% endblock %}