{% extends "admin/base_site.html" %}
{% load i18n %}

{% block title %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %}

{% block extrastyle %}
{{ block.super }}
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Syne:wght@500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="{% url 'prolin_django:assets' path='styles.css' %}" />
<style>
  #container { min-height: 100vh; }
  #content { padding: 0 !important; margin: 0 !important; }
  .prolin-admin-sky {
    position: relative;
    min-height: calc(100vh - 80px);
    background: #060b12;
    overflow: hidden;
  }
  .prolin-admin-sky #sky-canvas {
    position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  }
  .prolin-admin-bar {
    position: absolute; top: 12px; left: 12px; right: 12px; z-index: 5;
    display: flex; justify-content: space-between; gap: 12px; align-items: center;
    pointer-events: none;
  }
  .prolin-admin-bar a, .prolin-admin-bar .chip {
    pointer-events: auto;
  }
  .prolin-admin-bar .chip {
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    color: #cde9e4;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(46,196,182,.3);
    background: rgba(8,14,22,.78);
    backdrop-filter: blur(10px);
  }
  .prolin-admin-bar a.button {
    background: #2ec4b6; color: #06201c; border: 0; border-radius: 999px;
    padding: 8px 14px; font-weight: 700; text-decoration: none;
  }
  #inspector {
    position: absolute; top: 64px; right: 16px; z-index: 6;
    width: min(300px, calc(100% - 32px));
  }
</style>
{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumbs">
  <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
  &rsaquo; <a href="{{ dashboard_url }}">Prolin</a>
  &rsaquo; Cielo
</div>
{% endblock %}

{% block content %}
<div class="prolin-admin-sky app-shell" id="view-cielo">
  <canvas id="sky-canvas" width="1600" height="900"></canvas>
  <div class="prolin-admin-bar">
    <span class="chip">Prolin · cielo en vivo (Django Admin)</span>
    <label class="chip" style="cursor:pointer;display:inline-flex;gap:8px;align-items:center;">
      <input type="checkbox" id="live-activity-toggle" />
      Pulso en vivo
    </label>
    <a class="button" href="{{ dashboard_url }}">Volver al panel</a>
  </div>

  <aside class="inspector" id="inspector" hidden>
    <div class="inspector-top">
      <div>
        <p class="inspector-kicker" id="inspector-mode">Explorando</p>
        <p class="inspector-lang" id="star-lang">—</p>
      </div>
      <button type="button" class="inspector-x" id="inspector-close" aria-label="Cerrar">×</button>
    </div>
    <h2 id="star-path">—</h2>
    <div class="inspector-brightness">
      <span>Brillo</span>
      <div class="brightness-track"><div class="brightness-fill" id="star-brightness"></div></div>
    </div>
    <dl id="star-meta"></dl>
  </aside>

  <div id="boot" class="boot" style="position:absolute;">
    <p class="boot-brand"><span>P</span><span>r</span><span>o</span><span>l</span><span>i</span><span>n</span></p>
    <p class="boot-status" id="boot-status">Cargando genoma…</p>
    <div class="boot-bar"><span id="boot-fill"></span></div>
  </div>
</div>

<script>
  window.PROLIN_GENOME_URL = "{{ genome_url }}";
  window.PROLIN_LIVE_SNAPSHOT_URL = "{% url 'prolin_django:live_snapshot' %}";
  window.PROLIN_LIVE_PING_URL = "{% url 'prolin_django:live_ping' %}";
  window.PROLIN_ADMIN_MODE = true;
</script>
<script src="{% url 'prolin_django:assets' path='admin-sky.js' %}"></script>
{% endblock %}