{# Zelda theme -- ROM upload page.

   Two states: empty (no ROM uploaded yet) and active (ROM stored).
   The preview grid in the active state hits the live delivery route,
   so the operator can confirm extraction works.

   Inherits from bragi's admin/base.html so the page sits inside the
   admin chrome (sidebar, top nav, shared layout).
#}
{% extends "admin/base.html" %}

{% block title %}Link's Awakening ROM{% endblock %}

{% block content %}
<style>
  .zelda-rom { max-width: 720px; }
  .zelda-rom .crumb { color: #57606a; font-size: 12px; margin-bottom: 0.5rem; }
  .zelda-rom .card { background: #f6f8fa; border: 1px solid #d0d7de; border-radius: 6px;
                     padding: 1rem 1.25rem; margin-bottom: 1rem; }
  .zelda-rom .card.active { background: #dafbe1; border-color: #2da44e; }
  .zelda-rom .upload { border: 2px dashed #d0d7de; padding: 1.5rem; text-align: center;
                       border-radius: 6px; background: #f6f8fa; }
  .zelda-rom .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
  .zelda-rom .cell { background: #f6f8fa; border: 1px solid #d0d7de; padding: 0.5rem;
                     text-align: center; font: 11px monospace; border-radius: 4px; }
  .zelda-rom .cell img { width: 48px; height: auto; image-rendering: pixelated; }
  .zelda-rom .btn { padding: 0.5rem 0.9rem; border-radius: 6px; cursor: pointer; }
  .zelda-rom .btn.primary { background: #2da44e; color: white; border: none; }
  .zelda-rom .btn.danger { color: #cf222e; background: white; border: 1px solid #d0d7de; }
  .zelda-rom .sha { font: 11px monospace; color: #57606a; }
</style>
<div class="zelda-rom">
  <div class="crumb">Sites &rsaquo; {{ site.slug }} &rsaquo; Zelda theme &rsaquo; ROM</div>
  <h1>Link's Awakening ROM</h1>

  {% if rom_sha %}
    <div class="card active">
      <strong>&#10003; ROM active</strong>
      <div class="sha">sha256: {{ rom_sha[:12] }}&hellip;</div>
    </div>
    <p>Sprites are extracted live on every page render. Previews below are real
       extractions through the public delivery route.</p>
    <div class="grid">
      {% for name in sprite_names %}
        <div class="cell">
          {# Preview URLs are absolute (//<site.hostname>/...) because
             /zelda/rom/<game>/<palette>/<sprite>.png is registered via
             register_delivery_blueprint and only exists on the delivery
             app at the site's public hostname, not on the admin host
             where this page renders. #}
          {# Cache-buster mixes ROM SHA + theme version per #68 so theme upgrades
             auto-invalidate cached PNGs even when the ROM hasn't changed. #}
          <img src="//{{ site.hostname }}/zelda/rom/la/dmg/{{ name }}.png?v={{ rom_sha[:12] }}-{{ theme_version }}"
               alt="{{ name }}" loading="lazy">
          <div>{{ name }}</div>
        </div>
      {% endfor %}
    </div>
    <form method="post" action="" enctype="multipart/form-data" style="margin-top:1.5rem">
      <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
      <input type="hidden" name="action" value="replace">
      <input type="file" name="rom" accept=".gb">
      <button class="btn primary" type="submit">Replace ROM&hellip;</button>
    </form>
    <form method="post" action="" style="margin-top: 0.5rem">
      <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
      <input type="hidden" name="action" value="delete">
      <button class="btn danger" type="submit"
              onclick="return confirm('Delete the ROM? Sprites will revert to placeholders.')">
        Delete ROM
      </button>
    </form>
  {% else %}
    <div class="card">
      <strong>No ROM uploaded</strong>
    </div>
    <form method="post" action="" enctype="multipart/form-data">
      <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
      <input type="hidden" name="action" value="upload">
      <div class="upload">
        <strong>Drop your .gb file here</strong><br>
        <small>or choose a file &middot; max 4 MB</small><br>
        <input type="file" name="rom" accept=".gb" required>
        <button class="btn primary" type="submit">Upload</button>
      </div>
    </form>
  {% endif %}
</div>
{% endblock %}