{% extends "base.html" %}
{% block content %}

<script src="https://cdn.plot.ly/plotly-3.0.1.min.js" charset="utf-8"></script>
<script src="https://unpkg.com/@panzoom/panzoom@4.6.0/dist/panzoom.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.5/dist/cdn.min.js" defer></script>

<script>
  function alignTable(rows) {
    const colWidths = [];

    // Calculate max width for each column
    rows.forEach(row => {
      row.forEach((cell, i) => {
        colWidths[i] = Math.max(colWidths[i] || 0, cell.length);
      });
    });

    // Pad each cell and join with space
    return rows.map(row =>
      row.map((cell, i) => cell.padEnd(colWidths[i], ' ')).join('  ')
    ).join('\n');
  }
</script>

<style>
  [x-cloak] {
    display: none !important;
  }

  .calibration-layout {
    display: grid;
    gap: 1rem;
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "session"
      "heading"
      "plot";
  }

  .calibration-session {
    grid-area: session;
  }

  .calibration-heading {
    grid-area: heading;
  }

  .calibration-plot {
    grid-area: plot;
  }

  .detail-card {
    --detail-card-surface: rgb(255 255 255 / 0.7);
    border: 1px solid rgb(229 231 235);
    border-radius: 0.75rem;
    background: var(--detail-card-surface);
    padding: 1rem;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
  }

  .dark .detail-card {
    --detail-card-surface: rgb(31 41 55 / 0.8);
    border-color: rgb(55 65 81);
    background: var(--detail-card-surface);
  }

  .detail-card-title {
    margin-bottom: 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgb(75 85 99);
  }

  .dark .detail-card-title {
    color: rgb(209 213 219);
  }

  .detail-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
  }

  .detail-table tr {
    border-bottom: 1px solid rgb(229 231 235);
  }

  .detail-table tr:last-child {
    border-bottom: none;
  }

  .dark .detail-table tr {
    border-color: rgb(55 65 81);
  }

  .detail-table th,
  .detail-table td {
    padding: 0.75rem 1rem 0.75rem 0;
    vertical-align: top;
  }

  .detail-table th:last-child,
  .detail-table td:last-child {
    padding-right: 0;
  }

  .detail-table th {
    font-weight: 600;
    color: rgb(55 65 81);
  }

  .dark .detail-table th {
    color: rgb(229 231 235);
  }

  .detail-table td {
    color: rgb(37 99 235);
  }

  .dark .detail-table td {
    color: rgb(96 165 250);
  }

  .detail-table a {
    color: inherit;
  }

  .detail-table a:hover {
    text-decoration: underline;
  }

  .detail-sticky-col {
    position: sticky;
    left: 0;
    z-index: 10;
    box-shadow: none;
  }

  .detail-card-scroll {
    height: 18rem;
    overflow: hidden;
  }

  .detail-card-scroll-inner {
    height: 100%;
    overflow: auto;
    padding-right: 0.25rem;
  }

  .detail-card-scroll .detail-table thead {
    position: sticky;
    top: 0;
    z-index: 5;
  }

  .details-two-up,
  .details-three-up {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  @media (min-width: 1280px) {
    .details-two-up,
    .details-three-up {
      flex-direction: row;
    }

    .details-two-up > *,
    .details-three-up > * {
      flex: 1 1 0;
      min-width: 0;
    }
  }

  .phd2-plot-shell {
    min-height: 34rem;
  }

  .phd2-plot-shell [data-role="plot"] {
    min-height: 440px;
  }

  .author-pill {
    overflow: hidden;
  }

  .author-pill-text {
    min-width: 0;
    max-width: 14rem;
    margin-left: 0.75rem;
    opacity: 1;
    transform: translateX(0);
    transition:
      max-width 180ms ease,
      margin-left 180ms ease,
      opacity 180ms ease,
      transform 180ms ease;
  }

  @media (max-width: 767px) {
    .author-pill-text {
      max-width: 0;
      margin-left: 0;
      opacity: 0;
      transform: translateX(-0.85rem);
      overflow: hidden;
      pointer-events: none;
    }

    .author-pill.is-expanded .author-pill-text,
    .author-pill:hover .author-pill-text,
    .author-pill:focus-within .author-pill-text {
      max-width: 12rem;
      margin-left: 0.75rem;
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto;
    }
  }

  .inline-tool-tray {
    opacity: 0;
    visibility: hidden;
    transform: translateY(1rem);
    transition:
      opacity 180ms ease,
      transform 180ms ease,
      visibility 0s linear 180ms;
  }

  .inline-tool-tray.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
      opacity 180ms ease,
      transform 180ms ease,
      visibility 0s;
  }

  .inline-tools-bubble {
    pointer-events: auto;
  }

  .inline-media-arrow {
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 180ms ease,
      visibility 0s linear 180ms,
      background-color 180ms ease;
  }

  .inline-media-arrow.is-hover {
    opacity: 0.2;
    visibility: visible;
    transition:
      opacity 180ms ease,
      visibility 0s,
      background-color 180ms ease;
  }

  .inline-media-arrow.is-active {
    opacity: 1;
    visibility: visible;
    transition:
      opacity 180ms ease,
      visibility 0s,
      background-color 180ms ease;
  }

  .inline-corner-control {
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 180ms ease,
      visibility 0s linear 180ms,
      background-color 180ms ease;
  }

  .inline-corner-control.is-visible {
    opacity: 1;
    visibility: visible;
    transition:
      opacity 180ms ease,
      visibility 0s,
      background-color 180ms ease;
  }

  .image-meta-strip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex-wrap: nowrap;
    overflow: visible;
  }

  .image-meta-strip > * {
    min-width: 0;
  }

  .inline-media-caption-strip {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 1;
    max-width: 100%;
    transition:
      opacity 180ms ease,
      max-width 180ms ease,
      margin 180ms ease;
  }

  .engagement-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
  }

  .engagement-button,
  .engagement-chip,
  .engagement-secondary-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid rgb(209 213 219);
    border-radius: 9999px;
    background: rgb(255 255 255 / 0.78);
    padding: 0.6rem 0.95rem;
    color: rgb(17 24 39);
    transition:
      background-color 180ms ease,
      border-color 180ms ease,
      color 180ms ease;
  }

  .dark .engagement-button,
  .dark .engagement-chip,
  .dark .engagement-secondary-button {
    border-color: rgb(75 85 99);
    background: rgb(17 24 39 / 0.72);
    color: rgb(243 244 246);
  }

  .engagement-button:hover,
  .engagement-secondary-button:hover {
    background: rgb(243 244 246);
  }

  .dark .engagement-button:hover,
  .dark .engagement-secondary-button:hover {
    background: rgb(31 41 55 / 0.88);
  }

  .engagement-button.is-active {
    border-color: rgb(245 158 11);
    background: rgb(254 243 199);
    color: rgb(146 64 14);
  }

  .dark .engagement-button.is-active {
    border-color: rgb(245 158 11 / 0.65);
    background: rgb(120 53 15 / 0.48);
    color: rgb(253 230 138);
  }

  .engagement-count {
    font-weight: 700;
    color: rgb(37 99 235);
  }

  .dark .engagement-count {
    color: rgb(147 197 253);
  }

  .comment-thread {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgb(229 231 235);
  }

  .comment-thread-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    background: transparent;
    border: none;
    padding: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: rgb(37 99 235);
    cursor: pointer;
  }

  .comment-thread-toggle:hover {
    color: rgb(29 78 216);
  }

  .dark .comment-thread-toggle {
    color: rgb(147 197 253);
  }

  .dark .comment-thread-toggle:hover {
    color: rgb(191 219 254);
  }

  .dark .comment-thread {
    border-color: rgb(55 65 81);
  }

  .comment-thread[hidden] {
    display: none;
  }

  .comment-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .comment-card {
    border: 1px solid rgb(229 231 235);
    border-radius: 0.9rem;
    background: rgb(255 255 255 / 0.65);
    padding: 0.9rem 1rem;
  }

  .dark .comment-card {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39 / 0.55);
  }

  .comment-card-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
  }

  .comment-card-name {
    font-weight: 700;
    color: rgb(31 41 55);
  }

  .dark .comment-card-name {
    color: rgb(243 244 246);
  }

  .comment-card-time {
    font-size: 0.8rem;
    color: rgb(107 114 128);
  }

  .dark .comment-card-time {
    color: rgb(156 163 175);
  }

  .comment-card-body {
    margin: 0;
    white-space: pre-wrap;
    color: rgb(55 65 81);
  }

  .dark .comment-card-body {
    color: rgb(229 231 235);
  }

  .comment-empty {
    font-size: 0.95rem;
    color: rgb(107 114 128);
  }

  .dark .comment-empty {
    color: rgb(156 163 175);
  }

  .comment-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgb(0 0 0 / 0.72);
  }

  .comment-modal-backdrop.hidden {
    display: none;
  }

  .comment-modal-card {
    width: min(34rem, 100%);
    border: 1px solid rgb(229 231 235);
    border-radius: 1rem;
    background: rgb(255 255 255 / 0.98);
    padding: 1.25rem;
    box-shadow: 0 24px 48px rgb(15 23 42 / 0.24);
  }

  .dark .comment-modal-card {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39 / 0.98);
  }

  .comment-modal-input,
  .comment-modal-textarea {
    width: 100%;
    border: 1px solid rgb(209 213 219);
    border-radius: 0.75rem;
    background: rgb(255 255 255);
    padding: 0.75rem 0.9rem;
    color: rgb(17 24 39);
  }

  .comment-modal-textarea {
    min-height: 9rem;
    resize: vertical;
  }

  .dark .comment-modal-input,
  .dark .comment-modal-textarea {
    border-color: rgb(75 85 99);
    background: rgb(31 41 55);
    color: rgb(243 244 246);
  }

  .comment-modal-status {
    min-height: 1.25rem;
    font-size: 0.9rem;
    color: rgb(37 99 235);
  }

  .dark .comment-modal-status {
    color: rgb(147 197 253);
  }

  @media (min-width: 1024px) {
    .calibration-layout {
      grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
      grid-template-areas:
        "session plot"
        "heading plot";
    }

    .calibration-heading {
      max-height: 28rem;
    }
  }
</style>

<div class="relative flex flex-col items-center justify-center bg-repeat md:bg-cover dark:text-white"
  style="background-image: url('{{ url_for('blog.upload', filename=background_image) }}');">

  <div class="absolute w-full h-full backdrop-blur-md"></div>

  <div class="relative w-0 top-0 h-4 border-1 border-gray-200 dark:border-gray-400">
  </div>

  {% for il in images %}
  <div id="uid-{{il.image.id}}" class="relative flex flex-col items-center justify-center w-full space-y-0 p-2">
    <!-- Title under the date -->
    <h2 class="text-xl text-white text-center">
      {{ il.image.title }}
      {% if il.image.short_description %} - {{ il.image.short_description }}{% endif %}
    </h2>

    <!-- Date -->
    <span class="text-gray-200 font-light text-md">
      {{ il.image.created_at.strftime('%b %Y')|default('No date available') }}
    </span>
  </div>

  <div class="relative w-full md:max-w-4/5 lg:max-w-7/12 px-1 mx-auto">
    <!-- Main Card Container -->
    <div x-data="{ mainTab: 'image', explorePane: 'hr', showObjects: false }"
      x-init="
        const storageKey = `image_tabs_{{ il.image.id }}`;
        const consentManager = window.AstroSpaceConsent;
        const validMainTabs = ['image', 'details', 'explore'];
        const validExplorePanes = ['hr'{% if il.meta_json and 'variable' in il.meta_json %}, 'analyse'{% endif %}{% if il.guiding_plot %}, 'guiding'{% endif %}{% if il.calibration_plot %}, 'calibration'{% endif %}];
        const resizeExplorePane = value => {
          requestAnimationFrame(() => {
            requestAnimationFrame(() => {
              let plot = null;
              if (value === 'hr') {
                plot = document.getElementById('dist-scatter');
              } else if (value === 'analyse') {
                plot = document.getElementById('framesPlot');
              } else {
                const root = document.getElementById(`${value}-root-{{ il.image.id }}`);
                plot = root ? root.querySelector(`[data-role='plot']`) : null;
              }

              if (plot && window.Plotly) {
                Plotly.Plots.resize(plot);
              }
            });
          });
        };

        try {
          const savedTabs = consentManager?.getPreference(storageKey) || {};

          if (validMainTabs.includes(savedTabs.mainTab)) {
            mainTab = savedTabs.mainTab;
          }

          if (validExplorePanes.includes(savedTabs.explorePane)) {
            explorePane = savedTabs.explorePane;
          }
        } catch (error) {
          console.warn('Failed to restore image tab state', error);
        }

        if (mainTab === 'explore') {
          resizeExplorePane(explorePane);
        }

        $watch('mainTab', value => {
          if (!validMainTabs.includes(value)) {
            return;
          }

          if (value === 'explore') {
            resizeExplorePane(explorePane);
          }

          consentManager?.setPreference(storageKey, { mainTab: value, explorePane });
        });

        $watch('explorePane', value => {
          if (!validExplorePanes.includes(value)) {
            return;
          }

          resizeExplorePane(value);
          consentManager?.setPreference(storageKey, { mainTab, explorePane: value });
        });
      "
      class="rounded-xl md:rounded-2xl shadow-xl bg-white/80 dark:bg-gray-800/80">

      <!-- Main Tabs -->
      <div x-cloak
        class="flex overflow-x-auto border-b border-gray-200 dark:border-gray-700 justify-center items-center whitespace-nowrap">
        {% set main_tabs = [
        ('image', 'Image'),
        ('details', 'Details'),
        ('explore', 'Explore')
        ] %}

        {% for tab_id, tab_label in main_tabs %}
        <button @click="mainTab = '{{ tab_id }}'"
          :class="mainTab === '{{ tab_id }}' ? 'border-b-2 border-blue-600 text-blue-600 dark:text-blue-400' : 'text-gray-600 dark:text-gray-300'"
          class="px-4 py-2 text-sm font-medium">
          {{ tab_label }}
        </button>
        {% endfor %}
      </div>

      <!-- Image Tab -->
      {% set primary_image_src = url_for('blog.upload', filename=il.image.image_path|replace('\\', '/')) %}
      {% set starless_image_src = url_for('blog.upload', filename=il.image.starless_image_path|replace('\\', '/')) if il.image.starless_image_path else '' %}
      <div x-show="mainTab === 'image'" class="space-y-2 md:p-4">
        <div id="zoom-container-{{il.image.id}}"
          class="relative w-full max-w-full overflow-hidden md:rounded-[10px] px-1 flex items-center justify-center group touch-none">

          <div class="relative transition-transform duration-100 ease-in-out origin-center w-full h-full"
            id="zoom-wrapper-{{il.image.id}}">
            <img
              class="object-contain block w-full h-auto origin-center transition-transform duration-100 ease-in-out cursor-grab select-none"
              id="zoomable-image-{{il.image.id}}"
              src="{{ primary_image_src }}"
              alt="{{ il.image.title }}">
            <video
              id="zoomable-video-{{il.image.id}}"
              class="hidden object-contain block w-full h-auto origin-center transition-transform duration-100 ease-in-out"
              controls
              playsinline
              preload="metadata"></video>
            <div id="svg-overlay-{{il.image.id}}"
              class="absolute top-0 left-0 w-full h-full pointer-events-none z-10  duration-300">
            </div>
            <div id="compare-{{il.image.id}}" class="absolute top-0 left-0 pointer-events-none z-20 w-full h-full">
              {% set moon_width = (1800 / il.image.pixel_scale) | int %}

              <svg id="comp-wrapper-{{ il.image.id }}"
                class="absolute top-0 left-0 hidden pointer-events-auto w-full h-full z-5000"
                viewBox="0 0 {{ moon_width }} {{ moon_width }}">
                <image href="{{ url_for('static', filename='assets/images/moon.png') }}"
                  class="w-[{{ moon_width }}px] h-[{{ moon_width }}px]" id="comp-img-{{ il.image.id }}"
                  alt="Moon overlay" />
              </svg>
            </div>
            <div id="graticule-{{il.image.id}}" class="absolute top-0 left-0 w-full h-full pointer-events-none z-3000 ">
            </div>
          </div>

          {% if il.related_media %}
          <button id="media-prev-{{il.image.id}}" type="button"
            class="inline-media-arrow absolute left-3 top-1/2 z-20 -translate-y-1/2 rounded-full border border-white/30 bg-black/45 p-2 text-white shadow-lg hover:bg-black/65"
            aria-label="Previous media">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M12.78 15.53a.75.75 0 0 1-1.06 0L6.72 10.53a.75.75 0 0 1 0-1.06l5-5a.75.75 0 0 1 1.06 1.06L8.31 10l4.47 4.47a.75.75 0 0 1 0 1.06Z" clip-rule="evenodd" />
            </svg>
          </button>

          <button id="media-next-{{il.image.id}}" type="button"
            class="inline-media-arrow absolute right-3 top-1/2 z-20 -translate-y-1/2 rounded-full border border-white/30 bg-black/45 p-2 text-white shadow-lg hover:bg-black/65"
            aria-label="Next media">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M7.22 4.47a.75.75 0 0 1 1.06 0l5 5a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06-1.06L11.69 10 7.22 5.53a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
            </svg>
          </button>
          {% endif %}

          <button id="fullscreen-btn-{{il.image.id}}" title="Full Screen"
            class="inline-corner-control absolute bottom-3 left-3 z-20 p-1 border-2 border-gray-600 dark:border-white rounded-md bg-gray-200/15 hover:bg-gray-200/30"
            aria-label="Full Screen" type="button">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="14" height="14" fill="none" stroke="grey"
              stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="24 4 4 4 4 24" />
              <line x1="4" y1="4" x2="22" y2="22" />

              <polyline points="40 4 60 4 60 24" />
              <line x1="60" y1="4" x2="42" y2="22" />

              <polyline points="4 40 4 60 24 60" />
              <line x1="4" y1="60" x2="22" y2="42" />

              <polyline points="40 60 60 60 60 40" />
              <line x1="60" y1="60" x2="42" y2="42" />
            </svg>
          </button>

          <button id="reset-btn-{{il.image.id}}" title="Resize"
            class="inline-corner-control absolute bottom-3 right-3 z-20 p-1 border-2 border-gray-600 dark:border-white rounded-md bg-gray-200/15 hover:bg-gray-200/30"
            aria-label="Resize image" type="button">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="14" height="14" fill="none" stroke="grey"
              stroke-width="6">
              <line x1="36" y1="28" x2="60" y2="4" />
              <polyline points="38 4 60 4 60 26" />

              <line x1="28" y1="36" x2="4" y2="60" />
              <polyline points="4 38 4 60 26 60 " />
            </svg>
          </button>

          <div id="inline-tool-tray-{{il.image.id}}" class="inline-tool-tray pointer-events-none absolute inset-x-0 bottom-4 z-20 flex justify-center px-4"></div>
        </div>

        <div id="fullscreen-modal-{{il.image.id}}"
          class="fixed inset-0 hidden items-center justify-center bg-black/85 p-3 md:p-6"
          style="z-index: 90;">
          <div id="fullscreen-backdrop-{{il.image.id}}" class="absolute inset-0"></div>

          <div class="relative flex h-full w-full items-center justify-center">
            <div id="fullscreen-zoom-container-{{il.image.id}}"
              class="relative flex h-full w-full items-center justify-center overflow-hidden rounded-xl bg-black/40 touch-none">

              <div class="relative inline-block shrink-0 transition-transform duration-100 ease-in-out origin-center"
                id="fullscreen-zoom-wrapper-{{il.image.id}}">
                <img
                  class="object-contain block w-auto h-auto origin-center transition-transform duration-100 ease-in-out cursor-grab select-none"
                  style="max-width: 100%; max-height: calc(100vh - 10rem);"
                  id="fullscreen-zoomable-image-{{il.image.id}}"
                  src="{{ primary_image_src }}"
                  alt="{{ il.image.title }} fullscreen">
                <video
                  id="fullscreen-zoomable-video-{{il.image.id}}"
                  class="hidden object-contain block w-auto h-auto origin-center transition-transform duration-100 ease-in-out"
                  style="max-width: 100%; max-height: calc(100vh - 10rem);"
                  controls
                  playsinline
                  preload="metadata"></video>
                <div id="fullscreen-svg-overlay-{{il.image.id}}"
                  class="absolute top-0 left-0 w-full h-full pointer-events-none z-10 duration-300">
                </div>
                <div id="fullscreen-compare-{{il.image.id}}" class="absolute top-0 left-0 pointer-events-none z-20 w-full h-full">
                  <svg id="fullscreen-comp-wrapper-{{ il.image.id }}"
                    class="absolute top-0 left-0 hidden pointer-events-auto w-full h-full"
                    viewBox="0 0 {{ moon_width }} {{ moon_width }}">
                    <image href="{{ url_for('static', filename='assets/images/moon.png') }}"
                      class="w-[{{ moon_width }}px] h-[{{ moon_width }}px]" id="fullscreen-comp-img-{{ il.image.id }}"
                      alt="Moon overlay fullscreen" />
                  </svg>
                </div>
                <div id="fullscreen-graticule-{{il.image.id}}"
                  class="absolute top-0 left-0 w-full h-full pointer-events-none">
                </div>
              </div>

              <button id="fullscreen-close-btn-{{il.image.id}}" title="Close fullscreen viewer"
                class="absolute top-3 right-3 p-2 border-2 border-gray-600 dark:border-white rounded-md z-20 bg-gray-200/20 text-white hover:bg-gray-200/35 transition"
                aria-label="Close fullscreen viewer" type="button">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none"
                  stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
                  <line x1="5" y1="5" x2="19" y2="19" />
                  <line x1="19" y1="5" x2="5" y2="19" />
                </svg>
              </button>

              <button id="fullscreen-reset-btn-{{il.image.id}}" title="Resize"
                class="absolute bottom-4 right-4 p-2 border-2 opacity-15 border-gray-600 dark:border-white rounded-md z-20 bg-gray-200/20 hover:bg-gray-200/35 hover:opacity-100 transition"
                aria-label="Resize image" type="button">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="16" height="16" fill="none" stroke="grey"
                  stroke-width="6">
                  <line x1="36" y1="28" x2="60" y2="4" />
                  <polyline points="38 4 60 4 60 26" />

                  <line x1="28" y1="36" x2="4" y2="60" />
                  <polyline points="4 38 4 60 26 60 " />
                </svg>
              </button>

              <div id="fullscreen-tool-tray-{{il.image.id}}" class="pointer-events-none absolute inset-x-0 bottom-4 z-20 flex justify-center px-4">
                <div class="pointer-events-auto flex items-center space-x-2 rounded-full bg-black/55 px-3 py-2 backdrop-blur-sm">
                  <div>
                    <input id="fullscreen-graticule-toggle-{{il.image.id}}" type="checkbox" class="peer hidden" />
                    <label for="fullscreen-graticule-toggle-{{il.image.id}}" title="Overlay Coordinate Grid" class="inline-block px-3 py-1.5 rounded-full cursor-pointer shadow-sm text-sm font-medium
                      bg-gray-300 text-gray-900 border-slate-300 
                      hover:bg-gray-400 hover:border-slate-500 
                      hover:dark:bg-slate-600 hover:dark:border-slate-400
                      peer-checked:bg-green-800 peer-checked:text-white
                      peer-checked:hover:bg-green-700
                      dark:bg-slate-800 dark:text-gray-100 dark:border-slate-600 
                      dark:peer-checked:bg-green-500 dark:peer-checked:text-black">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 fill-current" viewBox="0 0 100 100"
                        preserveAspectRatio="xMidYMid meet">
                        <g fill="none" stroke="currentColor" stroke-width="4">
                          <circle cx="50" cy="50" r="45" />
                          <ellipse cx="50" cy="50" rx="45" ry="15" />
                          <ellipse cx="50" cy="50" rx="45" ry="30" />
                          <path d="M5,50 a45,45 0 0,1 90,0" />
                          <path d="M95,50 a45,45 0 0,1 -90,0" />
                          <line x1="50" y1="5" x2="50" y2="95" />
                          <path d="M35,5 A50,100 0 0,0 35,95" />
                          <path d="M65,5 A50,100 0 0,1 65,95" />
                        </g>
                      </svg>
                    </label>
                  </div>

                  <div>
                    <input id="fullscreen-compare-toggle-{{il.image.id}}" type="checkbox" class="peer hidden" />
                    <label for="fullscreen-compare-toggle-{{il.image.id}}" title="Compare with apparent size of solar objects" class="inline-block px-3 py-1.5 rounded-full cursor-pointer text-sm font-medium
                      bg-gray-300 text-gray-900 border-slate-300
                      hover:bg-gray-400 hover:border-slate-500
                      hover:dark:bg-slate-600 hover:dark:border-slate-400
                      peer-checked:hover:bg-green-700 
                      peer-checked:bg-green-800 peer-checked:text-white
                      dark:bg-slate-800 dark:text-gray-100 dark:border-slate-600
                      dark:peer-checked:bg-green-500 dark:peer-checked:text-black
                      shadow">
                      <svg class="w-5 h-5 fill-current" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"
                        aria-hidden="true" role="img">
                        <image href="{{ url_for('static', filename='assets/images/moon.png') }}" width="128" height="128"
                          class="object-contain" alt="Moon overlay fullscreen" />
                      </svg>
                    </label>
                  </div>

                  <div>
                    <input id="fullscreen-overlay-toggle-{{il.image.id}}" type="checkbox" class="peer hidden" />
                    <label for="fullscreen-overlay-toggle-{{il.image.id}}" title="Label celestial objects in the image" class="inline-block px-3 p-1.5 rounded-full cursor-pointer shadow-sm text-sm font-medium
                      bg-gray-300 text-gray-900 border-slate-300 
                      hover:bg-gray-400 hover:border-slate-500 hover:dark:bg-slate-600 hover:dark:border-slate-400
                      peer-checked:hover:bg-green-700 
                      peer-checked:bg-green-800 peer-checked:text-white
                      dark:bg-slate-800 dark:text-gray-100 dark:border-slate-600 
                      dark:peer-checked:bg-green-500 dark:peer-checked:text-black">
                      <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="_x32_" class="w-5 h-5 fill-current"
                        version="1.1" viewBox="0 0 512 512">
                        <path
                          d="M480.931 191.431c-1.37-3.032-3.171-5.863-5.495-8.326a24.85 24.85 0 0 0-7.877-5.643L115.761 2.619l-.258-.101C111.459.781 107.158 0 102.903 0 96.322.01 89.87 1.838 83.74 4.881c-9.199 4.595-17.839 11.928-25.651 21.248-7.83 9.338-14.796 20.724-20.256 33.638-7.132 16.846-10.67 33.711-10.68 48.784.01 10.349 1.655 19.926 5.359 28.114 1.866 4.108 4.255 7.867 7.298 11.093 3.014 3.217 6.69 5.864 10.863 7.629l.266.11 201.799 71.539v57.846L130.3 470.789c-2.821 4.283-1.627 10.055 2.656 12.876 4.283 2.831 10.055 1.626 12.876-2.647l106.906-162.324V502.69a9.302 9.302 0 0 0 9.309 9.31c5.128 0 9.292-4.162 9.292-9.31V317.564l107.65 163.455c2.84 4.274 8.594 5.478 12.894 2.647 4.292-2.821 5.469-8.593 2.638-12.876L271.339 283.761v-50.126l149.881 53.14v-.019a25.038 25.038 0 0 0 9.191 1.756c5.045-.028 9.852-1.425 14.346-3.631 6.736-3.373 12.867-8.621 18.39-15.21 5.505-6.59 10.376-14.567 14.218-23.582 4.981-11.792 7.472-23.611 7.482-34.31-.01-7.361-1.168-14.254-3.916-20.348zM65.295 139.706c-1.875 0-3.658-.238-5.367-.753l-2.106-.736c-1.654-.735-3.097-1.746-4.484-3.217-2.123-2.242-4.072-5.643-5.441-10.146-1.351-4.503-2.151-10.054-2.151-16.304 0-12.132 2.96-26.8 9.218-41.532 6.36-15.045 15.073-27.581 24.006-36.036 4.43-4.218 8.915-7.408 13.05-9.448 4.136-2.058 7.858-2.95 10.882-2.95 1.939.01 3.612.359 5.22 1.002l2.049 1.029a19.243 19.243 0 0 1 4.283 3.364c2.758 2.876 5.037 6.866 6.599 11.855 1.572 4.964 2.408 10.864 2.399 17.389.008 11.791-2.748 25.495-8.566 39.189-6.139 14.484-14.641 26.524-23.638 34.768-4.485 4.127-9.089 7.288-13.519 9.402-4.429 2.104-8.638 3.124-12.434 3.124zm92.862 34.071-76.76-27.214c.285-.129.598-.258.9-.387 8.336-3.979 16.378-10.495 23.63-18.95 7.279-8.437 13.722-18.841 18.73-30.642 6.332-14.944 9.42-29.962 9.42-43.361 0-8.208-1.168-15.827-3.575-22.498l72.918 36.229c.653 1.433 1.268 2.922 1.793 4.55 1.58 4.953 2.407 10.89 2.407 17.397.01 11.783-2.748 25.495-8.565 39.207-6.14 14.466-14.65 26.506-23.639 34.75-4.484 4.127-9.089 7.288-13.519 9.402a37.1 37.1 0 0 1-3.74 1.517zm238.082 84.406L172.108 178.73c6.323-3.952 12.398-9.301 17.986-15.816 7.28-8.447 13.722-18.851 18.73-30.661 6.323-14.953 9.42-29.933 9.42-43.352 0-5.404-.515-10.541-1.535-15.348l212.892 105.812c1.369 1.738 2.518 3.944 3.373 6.682 1.066 3.382 1.654 7.454 1.654 11.975.019 8.189-1.911 17.784-5.992 27.406-4.301 10.156-10.284 18.584-16.506 24.309-3.124 2.868-6.296 5.037-9.292 6.452-2.352 1.121-4.576 1.755-6.599 1.994zm63.995-19.347c-4.164 9.862-9.898 18.078-15.624 23.446-2.84 2.72-5.652 4.696-8.134 5.946-2.5 1.232-4.567 1.672-6.066 1.672-.984 0-1.737-.166-2.454-.469l-.257-.119-16.25-5.753c4.724-2.922 9.209-6.884 13.345-11.672 5.284-6.158 9.98-13.721 13.611-22.306 4.596-10.854 6.856-21.744 6.856-31.56 0-4.052-.432-7.876-1.213-11.488l15.486 7.692.257.12c.744.303 1.398.763 2.123 1.535 1.057 1.084 2.17 2.968 2.997 5.68.845 2.721 1.342 6.213 1.342 10.22.001 7.775-1.911 17.369-6.019 27.056z"
                          class="st0" />
                        <path
                          d="M97.811 48.26c1.727-.909 3.225-1.286 4.494-1.286.459 0 .91.046 1.342.148a5.32 5.32 0 0 0 6.359-3.989 5.317 5.317 0 0 0-4.016-6.36 15.962 15.962 0 0 0-3.685-.413c-3.336 0-6.553.947-9.485 2.509-4.402 2.372-8.327 6.048-11.902 10.68-3.538 4.594-6.7 10.183-9.346 16.506-1.14 2.702.137 5.799 2.849 6.956a5.298 5.298 0 0 0 6.939-2.858c3.134-7.454 7.022-13.529 10.9-17.517 1.911-2.005 3.832-3.466 5.551-4.376z"
                          class="st0" />
                      </svg>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="image-meta-strip px-1 text-sm text-gray-600 dark:text-gray-300">
            <a href="{{ url_for('profile.public', username=il.image.author) }}"
              x-data="{ expanded: false }"
              @mouseenter="if (window.innerWidth < 768) expanded = true"
              @mouseleave="if (window.innerWidth < 768) expanded = false"
              @focusin="expanded = true"
              @click.outside="expanded = false"
              @click="if (window.innerWidth < 768 && !expanded) { $event.preventDefault(); expanded = true }"
              :class="{ 'is-expanded': expanded }"
              :aria-expanded="expanded ? 'true' : 'false'"
              class="author-pill shrink-0 flex items-center rounded-full bg-white/70 px-3 py-1.5 text-gray-800 shadow-sm backdrop-blur-sm transition hover:bg-white dark:bg-gray-900/60 dark:text-gray-100 dark:hover:bg-gray-900/80">
              {% if il.image.user_image %}
              <img
                src="{{ url_for('blog.upload', filename=il.image.user_image) }}"
                class="h-8 w-8 rounded-full object-cover border border-white/40"
                alt="author image">
              {% else %}
              <img
                src="{{ url_for('static', filename='default_profile.png') }}"
                class="h-8 w-8 rounded-full object-cover border border-white/40"
                alt="default profile">
              {% endif %}
              <span class="author-pill-text flex min-w-0 flex-col leading-tight">
                <span class="truncate font-medium">@{{ il.image.author }}</span>
                <span class="truncate text-xs text-gray-500 dark:text-gray-400">{{ il.image.location }}</span>
              </span>
            </a>

            <div id="inline-tools-{{il.image.id}}" class="inline-tools-bubble flex flex-wrap items-center gap-2 rounded-full bg-black/55 px-3 py-2 backdrop-blur-sm">
            <div>
              <input id="graticule-toggle-{{il.image.id}}" type="checkbox" class="peer hidden" />

              <label for="graticule-toggle-{{il.image.id}}" title="Graticule" class="inline-block px-3 py-1.5 rounded-full cursor-pointer shadow-sm text-sm font-medium
         bg-gray-300 text-gray-900 border-slate-300 
         hover:bg-gray-400 hover:border-slate-500 
         hover:dark:bg-slate-600 hover:dark:border-slate-400
         peer-checked:bg-green-800 peer-checked:text-white
         peer-checked:hover:bg-green-700
         dark:bg-slate-800 dark:text-gray-100 dark:border-slate-600 
         dark:peer-checked:bg-green-500 dark:peer-checked:text-black">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 fill-current" viewBox="0 0 100 100"
                  preserveAspectRatio="xMidYMid meet">
                  <g fill="none" stroke="currentColor" stroke-width="4">
                    <!-- Outer circle -->
                    <circle cx="50" cy="50" r="45" />

                    <!-- Latitude lines (declination) -->
                    <ellipse cx="50" cy="50" rx="45" ry="15" />
                    <ellipse cx="50" cy="50" rx="45" ry="30" />

                    <!-- Longitude lines (RA) -->
                    <path d="M5,50 a45,45 0 0,1 90,0" />
                    <path d="M95,50 a45,45 0 0,1 -90,0" />

                    <!-- Meridians -->
                    <line x1="50" y1="5" x2="50" y2="95" />
                    <path d="M35,5 A50,100 0 0,0 35,95" />
                    <path d="M65,5 A50,100 0 0,1 65,95" /> <!-- Flipped this one -->
                  </g>
                </svg>

              </label>
            </div>

            <div>
              <input id="compare-toggle-{{il.image.id}}" type="checkbox" class="peer hidden" />

              <label for="compare-toggle-{{il.image.id}}" title="Moon Size Comparison" class="inline-block px-3 py-1.5 rounded-full cursor-pointer text-sm font-medium
           bg-gray-300 text-gray-900 border-slate-300
           hover:bg-gray-400 hover:border-slate-500
           hover:dark:bg-slate-600 hover:dark:border-slate-400
            peer-checked:hover:bg-green-700 
           peer-checked:bg-green-800 peer-checked:text-white
           dark:bg-slate-800 dark:text-gray-100 dark:border-slate-600
           dark:peer-checked:bg-green-500 dark:peer-checked:text-black
           shadow">

                <svg class="w-5 h-5 fill-current" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"
                  aria-hidden="true" role="img">
                  <image href="{{ url_for('static', filename='assets/images/moon.png') }}" width="128" height="128"
                    class="object-contain" alt="Moon overlay" />
                </svg>
              </label>
            </div>

            <div>
              <input id="overlay-toggle-{{il.image.id}}" type="checkbox" class="peer hidden" />

              <label for="overlay-toggle-{{il.image.id}}" title="Object Annotation" class="inline-block px-3 p-1.5 rounded-full cursor-pointer  shadow-sm text-sm font-medium
         bg-gray-300 text-gray-900 border-slate-300 
         hover:bg-gray-400 hover:border-slate-500 hover:dark:bg-slate-600 hover:dark:border-slate-400
         peer-checked:hover:bg-green-700 
         peer-checked:bg-green-800 peer-checked:text-white
         dark:bg-slate-800 dark:text-gray-100 dark:border-slate-600 
         dark:peer-checked:bg-green-500 dark:peer-checked:text-black">
                <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="_x32_" class="w-5 h-5 fill-current"
                  version="1.1" viewBox="0 0 512 512">
                  <path
                    d="M480.931 191.431c-1.37-3.032-3.171-5.863-5.495-8.326a24.85 24.85 0 0 0-7.877-5.643L115.761 2.619l-.258-.101C111.459.781 107.158 0 102.903 0 96.322.01 89.87 1.838 83.74 4.881c-9.199 4.595-17.839 11.928-25.651 21.248-7.83 9.338-14.796 20.724-20.256 33.638-7.132 16.846-10.67 33.711-10.68 48.784.01 10.349 1.655 19.926 5.359 28.114 1.866 4.108 4.255 7.867 7.298 11.093 3.014 3.217 6.69 5.864 10.863 7.629l.266.11 201.799 71.539v57.846L130.3 470.789c-2.821 4.283-1.627 10.055 2.656 12.876 4.283 2.831 10.055 1.626 12.876-2.647l106.906-162.324V502.69a9.302 9.302 0 0 0 9.309 9.31c5.128 0 9.292-4.162 9.292-9.31V317.564l107.65 163.455c2.84 4.274 8.594 5.478 12.894 2.647 4.292-2.821 5.469-8.593 2.638-12.876L271.339 283.761v-50.126l149.881 53.14v-.019a25.038 25.038 0 0 0 9.191 1.756c5.045-.028 9.852-1.425 14.346-3.631 6.736-3.373 12.867-8.621 18.39-15.21 5.505-6.59 10.376-14.567 14.218-23.582 4.981-11.792 7.472-23.611 7.482-34.31-.01-7.361-1.168-14.254-3.916-20.348zM65.295 139.706c-1.875 0-3.658-.238-5.367-.753l-2.106-.736c-1.654-.735-3.097-1.746-4.484-3.217-2.123-2.242-4.072-5.643-5.441-10.146-1.351-4.503-2.151-10.054-2.151-16.304 0-12.132 2.96-26.8 9.218-41.532 6.36-15.045 15.073-27.581 24.006-36.036 4.43-4.218 8.915-7.408 13.05-9.448 4.136-2.058 7.858-2.95 10.882-2.95 1.939.01 3.612.359 5.22 1.002l2.049 1.029a19.243 19.243 0 0 1 4.283 3.364c2.758 2.876 5.037 6.866 6.599 11.855 1.572 4.964 2.408 10.864 2.399 17.389.008 11.791-2.748 25.495-8.566 39.189-6.139 14.484-14.641 26.524-23.638 34.768-4.485 4.127-9.089 7.288-13.519 9.402-4.429 2.104-8.638 3.124-12.434 3.124zm92.862 34.071-76.76-27.214c.285-.129.598-.258.9-.387 8.336-3.979 16.378-10.495 23.63-18.95 7.279-8.437 13.722-18.841 18.73-30.642 6.332-14.944 9.42-29.962 9.42-43.361 0-8.208-1.168-15.827-3.575-22.498l72.918 36.229c.653 1.433 1.268 2.922 1.793 4.55 1.58 4.953 2.407 10.89 2.407 17.397.01 11.783-2.748 25.495-8.565 39.207-6.14 14.466-14.65 26.506-23.639 34.75-4.484 4.127-9.089 7.288-13.519 9.402a37.1 37.1 0 0 1-3.74 1.517zm238.082 84.406L172.108 178.73c6.323-3.952 12.398-9.301 17.986-15.816 7.28-8.447 13.722-18.851 18.73-30.661 6.323-14.953 9.42-29.933 9.42-43.352 0-5.404-.515-10.541-1.535-15.348l212.892 105.812c1.369 1.738 2.518 3.944 3.373 6.682 1.066 3.382 1.654 7.454 1.654 11.975.019 8.189-1.911 17.784-5.992 27.406-4.301 10.156-10.284 18.584-16.506 24.309-3.124 2.868-6.296 5.037-9.292 6.452-2.352 1.121-4.576 1.755-6.599 1.994zm63.995-19.347c-4.164 9.862-9.898 18.078-15.624 23.446-2.84 2.72-5.652 4.696-8.134 5.946-2.5 1.232-4.567 1.672-6.066 1.672-.984 0-1.737-.166-2.454-.469l-.257-.119-16.25-5.753c4.724-2.922 9.209-6.884 13.345-11.672 5.284-6.158 9.98-13.721 13.611-22.306 4.596-10.854 6.856-21.744 6.856-31.56 0-4.052-.432-7.876-1.213-11.488l15.486 7.692.257.12c.744.303 1.398.763 2.123 1.535 1.057 1.084 2.17 2.968 2.997 5.68.845 2.721 1.342 6.213 1.342 10.22.001 7.775-1.911 17.369-6.019 27.056z"
                    class="st0" />
                  <path
                    d="M97.811 48.26c1.727-.909 3.225-1.286 4.494-1.286.459 0 .91.046 1.342.148a5.32 5.32 0 0 0 6.359-3.989 5.317 5.317 0 0 0-4.016-6.36 15.962 15.962 0 0 0-3.685-.413c-3.336 0-6.553.947-9.485 2.509-4.402 2.372-8.327 6.048-11.902 10.68-3.538 4.594-6.7 10.183-9.346 16.506-1.14 2.702.137 5.799 2.849 6.956a5.298 5.298 0 0 0 6.939-2.858c3.134-7.454 7.022-13.529 10.9-17.517 1.911-2.005 3.832-3.466 5.551-4.376z"
                    class="st0" />
                </svg>
              </label>
            </div>

            {% if il.image.starless_image_path %}
            <div>
              <input id="starless-toggle-{{il.image.id}}" type="checkbox" class="peer hidden" />

              <label for="starless-toggle-{{il.image.id}}" title="Remove Stars" class="inline-block px-3 py-1.5 rounded-full cursor-pointer text-sm font-medium
                bg-gray-300 text-gray-900 border-slate-300
                hover:bg-gray-400 hover:border-slate-500
                hover:dark:bg-slate-600 hover:dark:border-slate-400
                peer-checked:hover:bg-green-700
                peer-checked:bg-green-800 peer-checked:text-white
                dark:bg-slate-800 dark:text-gray-100 dark:border-slate-600
                dark:peer-checked:bg-green-500 dark:peer-checked:text-black
                shadow">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M12 3l1.9 4.1L18 9l-4.1 1.9L12 15l-1.9-4.1L6 9l4.1-1.9L12 3z" />
                  <path d="M19 14l.95 2.05L22 17l-2.05.95L19 20l-.95-2.05L16 17l2.05-.95L19 14z" />
                  <path d="M5 15l.95 2.05L8 18l-2.05.95L5 21l-.95-2.05L2 18l2.05-.95L5 15z" />
                </svg>
              </label>
            </div>
            {% endif %}
          </div>

          <p id="inline-media-caption-{{il.image.id}}" class="inline-media-caption-strip min-h-[1.5rem] px-2 text-center text-sm text-gray-600 dark:text-gray-300"></p>

          <div class="engagement-actions">
            <button id="image-like-btn-{{il.image.id}}" type="button"
              class="engagement-button{% if il.engagement.liked %} is-active{% endif %}"
              aria-pressed="{{ 'true' if il.engagement.liked else 'false' }}"
              title="Star this image">
              <span aria-hidden="true">★</span>
              <span id="image-like-count-{{il.image.id}}" class="engagement-count">{{ il.engagement.like_count }}</span>
            </button>

            <span class="engagement-chip" title="Unique views">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z" />
                <circle cx="12" cy="12" r="3" />
              </svg>
              <span id="image-view-count-{{il.image.id}}" class="engagement-count">{{ il.engagement.view_count }}</span>
            </span>

            <button id="image-comments-toggle-{{il.image.id}}" type="button" class="engagement-secondary-button"
              title="Leave a comment">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M7 10h10M7 14h6" />
                <path d="M5 19l-1 3 3.5-1.5H18a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H6A3 3 0 0 0 3 7v10a3 3 0 0 0 2 2z" />
              </svg>
              <span id="image-comment-count-{{il.image.id}}" class="engagement-count">{{ il.engagement.comment_count }}</span>
            </button>
          </div>

            <div x-data="{ open: false }" class="relative inline-block shrink-0">
              <button @click="open = !open" title="Share this image" class="flex items-center p-1 rounded-full bg-gray-300 text-gray-900   shadow
           hover:bg-gray-400
           hover:dark:bg-slate-600
           dark:bg-slate-800 dark:text-gray-100 overflow-hidden">

                <!-- Left: Share Icon -->
                <div class="flex items-center justify-center w-10 h-full px-2">
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-current" viewBox="0 0 22 22">
                    <path
                      d="M12.5 6.25a.75.75 0 0 0 0-1.5v1.5Zm7.75 6.25a.75.75 0 0 0-1.5 0h1.5Zm-.75-6.25a.75.75 0 0 0 0-1.5v1.5Zm-4.088-1.5a.75.75 0 0 0 0 1.5v-1.5Zm4.838.75a.75.75 0 0 0-1.5 0h1.5Zm-1.5 4.141a.75.75 0 0 0 1.5 0h-1.5Zm1.28-3.61a.75.75 0 0 0-1.06-1.061l1.06 1.06Zm-8.06 5.939a.75.75 0 1 0 1.06 1.06l-1.06-1.06Zm.53-7.22h-3v1.5h3v-1.5Zm-3 0A4.75 4.75 0 0 0 4.75 9.5h1.5A3.25 3.25 0 0 1 9.5 6.25v-1.5ZM4.75 9.5v6h1.5v-6h-1.5Zm0 6a4.75 4.75 0 0 0 4.75 4.75v-1.5a3.25 3.25 0 0 1-3.25-3.25h-1.5Zm4.75 4.75h6v-1.5h-6v1.5Zm6 0a4.75 4.75 0 0 0 4.75-4.75h-1.5a3.25 3.25 0 0 1-3.25 3.25v1.5Zm4.75-4.75v-3h-1.5v3h1.5ZM19.5 4.75h-4.088v1.5H19.5v-1.5Zm-.75.75v4.141h1.5V5.5h-1.5Zm.22-.53-7 7 1.06 1.06 7-7-1.06-1.06Z" />
                  </svg>
                </div>

                <!-- Divider -->
                <div class="h-6 w-px bg-gray-400 dark:bg-gray-500"></div>

                <!-- Right: Dropdown arrow -->
                <div class="flex items-center justify-center w-8 h-full">
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-current" viewBox="0 0 20 20">
                    <path d="M5.5 7l4.5 5 4.5-5h-9z" />
                  </svg>
                </div>
              </button>

              <!-- Dropdown menu -->
              <div x-show="open" @click.outside="open = false"
                class="absolute right-0 z-300 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 dark:bg-gray-800 overflow-visible"
                style="display: none;">
                <div class="py-1 text-sm text-gray-700 dark:text-gray-100 overflow-visible">
                  <button id="copy-link-{{il.image.id}}"
                    class="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700 ">Share
                    link</button>
                  <button id="copy-link-details-{{il.image.id}}"
                    class="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700">Share link with
                    details </button>
                </div>
              </div>
            </div>
        </div>

        <div class="p-2 text-gray-700 dark:text-gray-200">
          <p>{{ il.image.description | safe }}</p>

          <button id="comment-thread-toggle-{{il.image.id}}" type="button" class="comment-thread-toggle" aria-expanded="false">
            Show comments ({{ il.engagement.comment_count }})
          </button>

          <div id="comment-thread-{{il.image.id}}" class="comment-thread" hidden>
            <div id="comments-list-{{il.image.id}}" class="comment-list">
              {% if il.engagement.comments %}
              {% for comment in il.engagement.comments %}
              <article class="comment-card">
                <div class="comment-card-header">
                  <span class="comment-card-name">{{ comment.commented_by or 'Anonymous' }}</span>
                  <time class="comment-card-time">{{ comment.commented_at.strftime('%d %b %Y %H:%M') }}</time>
                </div>
                <p class="comment-card-body">{{ comment.comment }}</p>
              </article>
              {% endfor %}
              {% else %}
              <p id="comments-empty-{{il.image.id}}" class="comment-empty">No comments yet. Be the first to leave one.</p>
              {% endif %}
            </div>
          </div>

          <div id="image-comment-modal-{{il.image.id}}" class="comment-modal-backdrop hidden" aria-hidden="true">
            <div class="comment-modal-card" role="dialog" aria-modal="true" aria-labelledby="image-comment-title-{{il.image.id}}">
              <div class="flex items-start justify-between gap-3">
                <div>
                  <p id="image-comment-title-{{il.image.id}}" class="text-lg font-semibold text-gray-900 dark:text-white">Leave a comment</p>
                  <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">No account is required. We rate-limit anonymous comments to reduce abuse.</p>
                </div>
                <button id="image-comment-close-{{il.image.id}}" type="button"
                  class="rounded-full border border-gray-300 px-3 py-1 text-sm font-semibold text-gray-900 transition hover:bg-gray-100 dark:border-gray-600 dark:text-white dark:hover:bg-gray-800">
                  Close
                </button>
              </div>

              <form id="image-comment-form-{{il.image.id}}" class="mt-4 space-y-4">
                <div class="space-y-2">
                  <label for="image-comment-name-{{il.image.id}}" class="block text-sm font-semibold text-gray-700 dark:text-gray-200">Display name</label>
                  <input id="image-comment-name-{{il.image.id}}" name="display_name" type="text" maxlength="40"
                    class="comment-modal-input"
                    value="{{ remembered_commenter_name }}"
                    placeholder="How should your name appear?">
                </div>

                <div class="space-y-2">
                  <label for="image-comment-text-{{il.image.id}}" class="block text-sm font-semibold text-gray-700 dark:text-gray-200">Comment</label>
                  <textarea id="image-comment-text-{{il.image.id}}" name="comment" maxlength="1500"
                    class="comment-modal-textarea"
                    placeholder="Share what you noticed, liked, or learned from this post."></textarea>
                </div>

                <label class="flex items-start gap-3 text-sm text-gray-600 dark:text-gray-300">
                  <input id="image-comment-remember-{{il.image.id}}" name="remember_name" type="checkbox"
                    class="mt-1 h-4 w-4 rounded border-gray-300 text-blue-600"
                    {% if not preference_cookies_enabled %}disabled{% endif %}
                    {% if remembered_commenter_name %}checked{% endif %}>
                  <span>
                    Remember this display name on this browser for future comments.
                    {% if not preference_cookies_enabled %}
                    Enable preference cookies in Cookie Settings to save it.
                    {% endif %}
                  </span>
                </label>

                <p id="image-comment-status-{{il.image.id}}" class="comment-modal-status"></p>

                <div class="flex flex-wrap items-center justify-end gap-2">
                  <button id="image-comment-cancel-{{il.image.id}}" type="button"
                    class="rounded-full border border-gray-300 px-5 py-2 text-sm font-semibold text-gray-900 transition hover:bg-gray-100 dark:border-gray-600 dark:text-white dark:hover:bg-gray-800">
                    Cancel
                  </button>
                  <button id="image-comment-submit-{{il.image.id}}" type="submit"
                    class="rounded-full bg-blue-600 px-5 py-2 text-sm font-semibold text-white transition hover:bg-blue-700">
                    Post Comment
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>

      <div x-show="mainTab === 'details'" x-cloak class="p-6 dark:text-white">
        {% set rows = {
          'Lights': 'light_count',
          'Single Exposure': 'exposure_time',
          'Total Exposure': 'total_time',
          'Gain': 'gain',
          'Offset': 'offset_cam',
          'Temp (°C)': 'temperature'
        } %}
        {% set weighted_source = il.lights[0] if il.lights else {} %}
        {% set has_weighted_exposure = il.lights and (
          'effective_total' in weighted_source or
          'effective_red' in weighted_source or
          'effective_green' in weighted_source or
          'effective_blue' in weighted_source
        ) %}
        {% set weighted_rows = [
          ('Red Channel', weighted_source.get('effective_red')),
          ('Green Channel', weighted_source.get('effective_green')),
          ('Blue Channel', weighted_source.get('effective_blue')),
          ('Total', weighted_source.get('effective_total'))
        ] %}

        {% set acquisition_software = il.software_list | selectattr('type', 'equalto', 'acquisition') | list %}
        {% set processing_software = il.software_list | selectattr('type', 'equalto', 'processing') | list %}

        <div class="space-y-4">
          <div class="details-two-up">
            <section class="detail-card">
              <h3 class="detail-card-title">Lights</h3>
              <div class="overflow-x-auto">
                <table html-id="light-{{il.image.id}}" class="detail-table min-w-max">
                  <tbody>
                    <tr>
                      <th class="detail-sticky-col min-w-[11rem]">Filter</th>
                      {% for light in il.lights %}
                      <td class="min-w-[9rem]">
                        <a href="{{ light.filter_link }}" target="_blank">
                          {{ light.cam_filter|replace("Filter", "") }}
                        </a>
                      </td>
                      {% endfor %}
                    </tr>

                    {% for label, field in rows.items() if field in il.lights[0] %}
                    <tr>
                      <th class="detail-sticky-col min-w-[11rem]">{{ label }}</th>
                      {% for light in il.lights %}
                      <td class="min-w-[9rem]">{{ light[field] }}</td>
                      {% endfor %}
                    </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
            </section>

            <section class="detail-card">
              <h3 class="detail-card-title">Equipment</h3>
              <table html-id="equipment-{{il.image.id}}" class="detail-table">
                <tbody>
                  {% for equipment in il.equipment_list %}
                  <tr>
                    <th>{{ equipment.table|replace('_', ' ')|title }}</th>
                    <td>
                      <a href="{{ equipment.link }}" target="_blank">
                        {{ equipment.brand | default('') + " " + equipment.name|replace(equipment.brand | default(''), '') }}
                      </a>
                    </td>
                  </tr>
                  {% else %}
                  <tr>
                    <td colspan="2" class="text-gray-500 dark:text-gray-400">No equipment recorded.</td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </section>
          </div>

          <div class="details-three-up">
            {% if has_weighted_exposure %}
            <section class="detail-card detail-card-scroll">
              <h3 class="detail-card-title">Weighted Exposure</h3>
              <div class="detail-card-scroll-inner">
                <table html-id="weighted-{{il.image.id}}" class="detail-table">
                  <tbody>
                    {% for label, value in weighted_rows %}
                    <tr>
                      <th>{{ label }}</th>
                      <td>{{ value or 'N/A' }}</td>
                    </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
            </section>
            {% endif %}

            {% if il.dates %}
            <section class="detail-card detail-card-scroll">
              <h3 class="detail-card-title">Nights</h3>
              <div class="detail-card-scroll-inner">
                <table html-id="night-summary-{{il.image.id}}" class="detail-table">
                  <thead>
                    <tr>
                      <th>Capture Dates</th>
                      <th>Moon Illumination</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for date in il.dates %}
                    <tr>
                      <th>{{ date.capture_date }}</th>
                      <td>{{ date.moon_phase }} ({{ date.moon_illumination }}%)</td>
                    </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
            </section>
            {% endif %}

            <section class="detail-card detail-card-scroll">
              <h3 class="detail-card-title">Software</h3>
              <div class="detail-card-scroll-inner">
                <table html-id="software-{{il.image.id}}" class="detail-table">
                  <tbody>
                    <tr>
                      <th>Acquisition</th>
                      <td>
                        {% if acquisition_software %}
                        <div class="space-y-2">
                          {% for software in acquisition_software %}
                          <p><a href="{{ software.link }}" target="_blank">{{ software.name }}</a></p>
                          {% endfor %}
                        </div>
                        {% else %}
                        <span class="text-gray-500 dark:text-gray-400">No acquisition software recorded.</span>
                        {% endif %}
                      </td>
                    </tr>
                    <tr>
                      <th>Processing</th>
                      <td>
                        {% if processing_software %}
                        <div class="space-y-2">
                          {% for software in processing_software %}
                          {% if software.metadata %}
                          <p>{{ software.metadata | safe }}</p>
                          {% else %}
                          <p><a href="{{ software.link }}" target="_blank">{{ software.name }}</a></p>
                          {% endif %}
                          {% endfor %}
                        </div>
                        {% else %}
                        <span class="text-gray-500 dark:text-gray-400">No processing software recorded.</span>
                        {% endif %}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </section>
          </div>
        </div>
      </div>

      <div x-show="mainTab === 'explore'" x-cloak class="space-y-4 md:p-4 dark:text-white">
        {% set explore_tabs = [('hr', 'Hertzsprung Russel Diagram')] %}
        {% if il.meta_json and 'variable' in il.meta_json %}
        {% set explore_tabs = explore_tabs + [('analyse', 'Analyse')] %}
        {% endif %}
        {% if il.guiding_plot %}
        {% set explore_tabs = explore_tabs + [('guiding', 'Guiding')] %}
        {% endif %}
        {% if il.calibration_plot %}
        {% set explore_tabs = explore_tabs + [('calibration', 'Calibration')] %}
        {% endif %}

        {% if explore_tabs|length > 1 %}
        <div class="flex justify-center">
          <fieldset class="inline-flex flex-wrap justify-center rounded-full bg-gray-100 p-1 shadow-sm dark:bg-gray-900/70" aria-label="Explore view mode">
            {% for pane_id, pane_label in explore_tabs %}
            <label class="cursor-pointer">
              <input type="radio" class="sr-only peer" name="explore-pane-{{il.image.id}}" value="{{ pane_id }}" x-model="explorePane">
              <span class="inline-flex items-center rounded-full border border-transparent px-4 py-2 text-sm font-semibold text-gray-500 transition peer-checked:border-blue-200 peer-checked:bg-blue-600 peer-checked:text-white peer-checked:shadow-sm dark:text-gray-300 dark:peer-checked:border-blue-400/50 dark:peer-checked:bg-blue-500 dark:peer-checked:text-gray-950">{{ pane_label }}</span>
            </label>
            {% endfor %}
          </fieldset>
        </div>
        {% endif %}

        <div x-show="explorePane === 'hr'" class="space-y-2 items-center justify-center dark:text-white display-inline">
          <div id="dist-scatter"
            class="w-full rounded-xl bg-white/70 dark:bg-white/70 mx-auto aspect-[3/4] sm:aspect-[4/5] md:aspect-[5/4] lg:aspect-[4/3] max-w-[95vw] sm:max-w-[600px] md:max-w-[800px] lg:max-w-[1000px]">
          </div>
        </div>

        {% if il.meta_json and 'variable' in il.meta_json %}
        <div x-show="explorePane === 'analyse'" class="detail-card space-y-4">
          <div class="flex flex-wrap gap-4 items-center text-black dark:text-white">
            <label for="xAxisSelect">X axis:</label>
            <select id="xAxisSelect"
                    class="input_container bg-white dark:bg-gray-700 text-black dark:text-white"></select>

            <div class="flex flex-col gap-1">
              <label>Y axis 1:</label>
              <select id="yAxisType1"
                      class="input_container bg-white dark:bg-gray-700 text-black dark:text-white" value="line">
                <option value="line" selected>Line</option>
                <option value="scatter">Scatter</option>
                <option value="bar">Bar</option>
              </select>
            </div>
            <select id="yAxisSelect1" class="input_container bg-white dark:bg-gray-700 text-black dark:text-white" multiple size="4"></select>

            <div class="flex flex-col gap-1">
              <label>Y axis 2:</label>
              <select id="yAxisType2"
                      class="input_container bg-white dark:bg-gray-700 text-black dark:text-white">
                <option value="scatter">Scatter</option>
                <option value="line">Line</option>
                <option value="bar">Bar</option>
              </select>
            </div>
            <select id="yAxisSelect2"
                    class="input_container bg-white dark:bg-gray-700 text-black dark:text-white" multiple size="4"></select>

            <div class="flex flex-col gap-1">
              <label>Y axis 3:</label>
              <select id="yAxisType3"
                      class="input_container bg-white dark:bg-gray-700 text-black dark:text-white">
                <option value="scatter">Scatter</option>
                <option value="line">Line</option>
                <option value="bar">Bar</option>
              </select>
            </div>
            <select id="yAxisSelect3"
                    class="input_container bg-white dark:bg-gray-700 text-black dark:text-white" multiple size="4"></select>

            <button id="updatePlotBtn"
                    class="px-4 py-2 bg-blue-500 text-white rounded">
              Update Plot
            </button>
          </div>

          <div id="framesPlot" class="w-full min-h-[500px]"></div>
        </div>
        {% endif %}

        {% if il.guiding_plot %}
        <div id="guiding-root-{{il.image.id}}" x-show="explorePane === 'guiding'" class="phd2-plot-shell detail-card">
          <div class="flex flex-col xl:flex-row gap-4">
            <div class="xl:w-80 space-y-3">
              <select data-role="session" aria-label="Guiding session" class="input_container bg-white dark:bg-gray-700 text-black dark:text-white w-full"></select>
              <div data-role="stats" class="rounded-lg border border-gray-200 dark:border-gray-700 p-3"></div>
              <div data-role="heading" class="rounded-lg border border-gray-200 dark:border-gray-700 p-3 max-h-64 overflow-auto"></div>
            </div>
            <div data-role="plot" class="flex-1"></div>
          </div>
        </div>
        {% endif %}

        {% if il.calibration_plot %}
        <div id="calibration-root-{{il.image.id}}" x-show="explorePane === 'calibration'" class="phd2-plot-shell detail-card">
          <div class="calibration-layout">
            <select data-role="session" aria-label="Calibration session" class="input_container bg-white dark:bg-gray-700 text-black dark:text-white w-full calibration-session"></select>
            <div data-role="heading" class="rounded-lg border border-gray-200 dark:border-gray-700 p-3 overflow-auto w-full calibration-heading"></div>
            <div data-role="plot" class="w-full calibration-plot"></div>
          </div>
        </div>
        {% endif %}
      </div>

    </div>

      <div class="relative flex flex-col items-center justify-center">
        <div class="relative w-0 top-0 h-6 border-1 mt-2 border-gray-200 dark:border-gray-400">
        </div>
      </div>


      <script type="module">
      import { drawHRDiagram } from "{{ url_for('static', filename='js/plotHR.js') }}";
      import { renderGuidingPlot, renderCalibrationPlot } from "{{ url_for('static', filename='js/phd2Plotly.js') }}";
      import { populateAxisSelects, drawVariablePlot } from "{{ url_for('static', filename='js/subFramePlot.js') }}";
        (function () {
          const imageId = "{{ il.image.id }}";

          function copyCurrentURL() {
            const link = `${window.location.origin}${window.location.pathname}#uid-${imageId}`;
            navigator.clipboard.writeText(link)
              .then(() => {
                alert("Link copied to clipboard!");
              })
              .catch(err => {
                alert("Failed to copy: " + err);
              });
          }

          document.getElementById("copy-link-{{il.image.id}}").addEventListener("click", copyCurrentURL);

          function copyCurrentURLwithDetails() {
            const id = "{{il.image.id}}";  // use your actual id injection method here
            const link = `${window.location.origin}${window.location.pathname}#uid-${id}`;

            // Define tables and their section titles in the order you want
            const tablesInfo = [
              { selector: `table[html-id="light-${id}"]`, title: "Lights:\n-------" },
              { selector: `table[html-id="weighted-${id}"]`, title: "Weighted Exposure:\n------------------" },
              { selector: `table[html-id="night-summary-${id}"]`, title: "Nights:\n-------" },
              { selector: `table[html-id="equipment-${id}"]`, title: "Equipment:\n-----------" },
              { selector: `table[html-id="software-${id}"]`, title: "Software:\n----------" }
            ];

            let fullText = {{ (
                il.image.title ~ " - " ~ il.image.short_description ~ "\n\n" ~
                il.image.description ~ "\n\nImage By: " ~ il.image.author ~ "\n\n"
            ) | tojson }};

        tablesInfo.forEach(({ selector, title }) => {
          const table = document.querySelector(selector);
          if (!table) return;  // skip if table not found

          const rows = table.querySelectorAll("tr");
          const tableData = [];

          rows.forEach(row => {
            const cells = Array.from(row.querySelectorAll("th, td"));
            const rowText = cells.map(cell => {
              const pElements = cell.querySelectorAll("p");
              if (pElements.length > 0) {
                return Array.from(pElements).map(p => p.innerText.trim()).join(", ");
              } else {
                return cell.innerText.trim();
              }
            });
            tableData.push(rowText);
          });

          const formattedTable = alignTable(tableData);

          fullText += `${title}\n${formattedTable}\n\n`;
        });

        fullText += link;
        console.log(fullText);
        navigator.clipboard.writeText(fullText)
          .then(() => {
            alert("Link copied to clipboard!");
          })
          .catch(err => {
            alert("Failed to copy: " + err);
          });
          }

        document.getElementById("copy-link-details-{{il.image.id}}").addEventListener("click", copyCurrentURLwithDetails);


        function copyCurrentURLwithDetailsHTML() {
          const link = `${window.location.origin}${window.location.pathname}#uid-{{il.image.id}}`;
          const lightTable = document.querySelector(`table[light-id="light-{{il.image.id}}"]`);

          //console.log(link);
          // Clone the table to avoid modifying the DOM
          const tableClone = lightTable.cloneNode(true);

          // Optionally remove classes or inline styles
          tableClone.removeAttribute("class");

          // Create a full HTML snippet
          const htmlContent = `<p>Link: <a href="${link}">${link}</a></p>${tableClone.outerHTML}`;
          //console.log(htmlContent);
          // Copy as HTML
          const blobt = new Blob([htmlContent], { type: "text/plain" });
          const blob = new Blob([htmlContent], { type: "text/html" });
          const clipboardItem = new ClipboardItem({ "text/plain": blobt }, { "text/html": blob });

          navigator.clipboard.write([clipboardItem])
            .then(() => {
              alert("HTML table and link copied to clipboard!");
            })
            .catch(err => {
              alert("Failed to copy HTML: " + err);
            });
        }

        // document.getElementById("copy-html-details-{{il.image.id}}").addEventListener("click", copyCurrentURLwithDetailsHTML); 

        const overlayData = {{ il.svg_image | tojson | safe  }};
        const uploadBase = {{ url_for('blog.upload', filename='') | tojson | safe }};
        const primaryImageSrc = {{ primary_image_src | tojson | safe }};
        const primaryCaption = {{ il.image.title | tojson | safe }};
        const starlessImageSrc = {{ starless_image_src | tojson | safe }};
        const relatedMedia = {{ il.related_media | tojson | safe }};

        function renderObjectOverlay(target, enabled) {
          if (!enabled) {
            target.innerHTML = "";
            return;
          }

          let svg = `<svg viewBox="0 0 ${overlayData.width} ${overlayData.height}" preserveAspectRatio="xMidYMid meet" style="position: absolute; top: 0; left: 0; pointer-events: auto;" xmlns="http://www.w3.org/2000/svg">

          <style>
            .astro-group {
              opacity: 0.2;
              transition: opacity 0.2s ease;
              cursor: pointer;
              pointer-events: all;
            }
            .astro-group:hover {
              opacity: 0.9;
            }
          </style>
        `;

          const overlays = overlayData.overlays.name.map((_, i) => ({
            id: overlayData.overlays.name[i],
            x: overlayData.overlays.x[i],
            y: overlayData.overlays.y[i],
            rx: overlayData.overlays.rx[i],
            ry: overlayData.overlays.ry[i],
            angle: overlayData.overlays.angle[i],
            otype: overlayData.overlays.otype[i],
          }));

          for (const item of overlays) {
            if (item.rx < 25 || item.ry < 25) {
              continue;
            }

            const rawId = item.id ?? "";
            const id = String(rawId).trim();
            const rawOtype = item.otype === "Unknown" || !item.otype ? "" : item.otype;
            const otype = String(rawOtype).trim();

            let query = (otype ? `${otype} ${id}` : id).trim();
            if (!query || typeof query !== "string") {
              query = id || "";
            }
            query = query.replace(/\s+/g, " ").trim();

            const searchURL = `https://www.google.com/search?q=${encodeURIComponent(query)}`;
            const transform = item.angle
              ? ` transform="rotate(${item.angle}, ${item.x.toFixed(2)}, ${item.y.toFixed(2)}) "`
              : "";

            svg += `
              <g class="astro-group" data-search="${searchURL}" data-query="${query}">
                <ellipse cx="${item.x.toFixed(2)}" cy="${item.y.toFixed(2)}"
                  rx="${item.rx.toFixed(2)}" ry="${item.ry.toFixed(2)}"${transform}
                  fill="none" stroke="white" stroke-width="10"></ellipse>

                <text x="${(item.x + 60).toFixed(2)}" y="${(item.y - item.ry - 60).toFixed(2)}"
                  font-size="72" fill="white" stroke="black" stroke-width="2"
                  text-anchor="middle" alignment-baseline="middle">
                  ${item.id}
                </text>
              </g>
            `;
          }

          svg += "</svg>";
          target.innerHTML = svg;

          target.querySelectorAll(".astro-group").forEach(group => {
            group.addEventListener("dblclick", (evt) => {
              const query = group.dataset.query;
              const url = group.dataset.search;

              const confirmSearch = confirm(
                `Search for:\n\n${query}\n\nProceed using your default search engine?`
              );

              if (confirmSearch) {
                window.open(url, "_blank");
              }

              evt.stopPropagation();
            });
          });
        }

        function renderGraticuleOverlay(target, enabled) {
          if (!enabled) {
            target.innerHTML = "";
            return;
          }

          let svg = `<svg viewBox="0 0 ${overlayData.width} ${overlayData.height}" preserveAspectRatio="xMidYMid meet" style="position: absolute; top: 0; left: 0; pointer-events: auto;">`;

          overlayData.grid_lines.ra_lines.forEach(line => {
            const points = line.map(pt => `${pt[0]},${pt[1]}`).join(" ");
            svg += `<polyline class="ra-line" stroke="white" stroke-width="8" fill="none" opacity="0.7" points="${points}" />`;
          });

          overlayData.grid_lines.dec_lines.forEach(line => {
            const points = line.map(pt => `${pt[0]},${pt[1]}`).join(" ");
            svg += `<polyline class="dec-line" stroke="white" stroke-width="8" fill="none" opacity="0.7" points="${points}" />`;
          });

          overlayData.grid_lines.labels.forEach(label => {
            svg += `<text x="${label.x}" y="${label.y}"font-family="Arial" font-weight="bold" font-size="60" fill="white" stroke="black" stroke-width="1" paint-order="stroke fill" opacity="0.7" transform="rotate(${label.rotation}, ${label.x}, ${label.y})">${label.text}</text>`;
          });

          svg += "</svg>";
          target.innerHTML = svg;
        }

        function syncCompareOverlay(compareWrapper, enabled) {
          if (!enabled) {
            compareWrapper.classList.add("hidden");
            return;
          }

          compareWrapper.classList.remove("hidden");

          if (!compareWrapper._panzoomInstance) {
            compareWrapper.setAttribute("viewBox", `0 0 ${overlayData.width} ${overlayData.height}`);
            compareWrapper._panzoomInstance = Panzoom(compareWrapper, {
              cursor: "grab",
              disableZoom: true
            });
          }
        }

        function createViewer(prefix) {
          const elements = {
            container: document.getElementById(`${prefix}zoom-container-${imageId}`),
            wrapper: document.getElementById(`${prefix}zoom-wrapper-${imageId}`),
            image: document.getElementById(`${prefix}zoomable-image-${imageId}`),
            video: document.getElementById(`${prefix}zoomable-video-${imageId}`),
            overlay: document.getElementById(`${prefix}svg-overlay-${imageId}`),
            graticule: document.getElementById(`${prefix}graticule-${imageId}`),
            compareWrapper: document.getElementById(`${prefix}comp-wrapper-${imageId}`),
            overlayToggle: document.getElementById(`${prefix}overlay-toggle-${imageId}`),
            graticuleToggle: document.getElementById(`${prefix}graticule-toggle-${imageId}`),
            compareToggle: document.getElementById(`${prefix}compare-toggle-${imageId}`),
            resetButton: document.getElementById(`${prefix}reset-btn-${imageId}`),
            toolTray: document.getElementById(`${prefix}tool-tray-${imageId}`),
          };

          const state = {
            astroEnabled: true,
            activeKind: "image",
          };

          const panzoom = Panzoom(elements.wrapper, {
            maxScale: 50
          });

          elements.container.addEventListener("wheel", (event) => {
            if (state.activeKind === "video") {
              return;
            }
            panzoom.zoomWithWheel(event);
          }, { passive: false });

          const renderAll = () => {
            const astroEnabled = state.astroEnabled;
            renderObjectOverlay(elements.overlay, astroEnabled && elements.overlayToggle.checked);
            renderGraticuleOverlay(elements.graticule, astroEnabled && elements.graticuleToggle.checked);
            syncCompareOverlay(elements.compareWrapper, astroEnabled && elements.compareToggle.checked);

            elements.overlay.classList.toggle("hidden", !astroEnabled);
            elements.graticule.classList.toggle("hidden", !astroEnabled);
            if (elements.toolTray) {
              elements.toolTray.classList.toggle("hidden", !astroEnabled);
            }
          };

          elements.resetButton.addEventListener("click", () => {
            panzoom.reset();
            elements.compareWrapper._panzoomInstance?.reset?.();
          });

          elements.overlayToggle.addEventListener("change", renderAll);
          elements.graticuleToggle.addEventListener("change", renderAll);
          elements.compareToggle.addEventListener("change", renderAll);

          renderAll();

          return {
            elements,
            reset() {
              panzoom.reset();
              elements.compareWrapper._panzoomInstance?.reset?.();
            },
            setSlide(slide) {
              state.activeKind = slide.kind;
              state.astroEnabled = !!slide.astro;

              elements.image.classList.toggle("hidden", slide.kind === "video");
              if (elements.video) {
                elements.video.classList.toggle("hidden", slide.kind !== "video");
              }

              elements.resetButton.classList.toggle("hidden", slide.kind === "video");

              if (slide.kind === "video") {
                if (elements.video) {
                  elements.video.src = slide.src;
                  elements.video.load();
                }
              } else {
                elements.image.src = slide.src;
                if (elements.video) {
                  elements.video.pause();
                  elements.video.removeAttribute("src");
                  elements.video.load();
                }
              }

              renderAll();
              panzoom.reset();
              elements.compareWrapper._panzoomInstance?.reset?.();
            },
            setToolState(state) {
              elements.overlayToggle.checked = !!state.overlay;
              elements.graticuleToggle.checked = !!state.graticule;
              elements.compareToggle.checked = !!state.compare;
              renderAll();
            }
          };
        }

        const inlineCaption = document.getElementById(`inline-media-caption-${imageId}`);
        const inlineToolTray = document.getElementById(`inline-tool-tray-${imageId}`);
        const inlineTools = document.getElementById(`inline-tools-${imageId}`);
        const starlessToggle = document.getElementById(`starless-toggle-${imageId}`);
        const mediaPrevButton = document.getElementById(`media-prev-${imageId}`);
        const mediaNextButton = document.getElementById(`media-next-${imageId}`);
        const likeButton = document.getElementById(`image-like-btn-${imageId}`);
        const likeCount = document.getElementById(`image-like-count-${imageId}`);
        const viewCount = document.getElementById(`image-view-count-${imageId}`);
        const commentsToggleButton = document.getElementById(`image-comments-toggle-${imageId}`);
        const commentThreadToggle = document.getElementById(`comment-thread-toggle-${imageId}`);
        const commentThread = document.getElementById(`comment-thread-${imageId}`);
        const commentCount = document.getElementById(`image-comment-count-${imageId}`);
        const commentsList = document.getElementById(`comments-list-${imageId}`);
        let commentsEmpty = document.getElementById(`comments-empty-${imageId}`);
        const commentModal = document.getElementById(`image-comment-modal-${imageId}`);
        const commentCloseButton = document.getElementById(`image-comment-close-${imageId}`);
        const commentCancelButton = document.getElementById(`image-comment-cancel-${imageId}`);
        const commentForm = document.getElementById(`image-comment-form-${imageId}`);
        const commentNameInput = document.getElementById(`image-comment-name-${imageId}`);
        const commentTextInput = document.getElementById(`image-comment-text-${imageId}`);
        const commentRememberInput = document.getElementById(`image-comment-remember-${imageId}`);
        const commentStatus = document.getElementById(`image-comment-status-${imageId}`);
        const commentSubmitButton = document.getElementById(`image-comment-submit-${imageId}`);
        let inlineToolHideTimer = null;
        let inlineChromeHideTimer = null;
        let inlineAstroControlsAvailable = true;
        let inlineChromeHovered = false;
        let inlineChromeActive = false;
        let commentSubmitInFlight = false;

        function formatCompactCount(value) {
          const count = Math.max(Number(value || 0), 0);
          if (count < 1000) {
            return String(Math.round(count));
          }

          if (count < 999500) {
            const scaled = count / 1000;
            const digits = scaled >= 10 ? 0 : 1;
            return `${Number(scaled.toFixed(digits))}k+`;
          }

          if (count < 1000000) {
            return "1M+";
          }

          const scaled = count / 1000000;
          const digits = scaled >= 10 ? 0 : 1;
          return `${Number(scaled.toFixed(digits))}M+`;
        }

        function setCountLabel(element, value) {
          if (!element) {
            return;
          }

          element.dataset.count = String(Number(value || 0));
          element.textContent = formatCompactCount(value);
        }

        function setLikeState(liked, totalLikes) {
          if (!likeButton) {
            return;
          }

          likeButton.classList.toggle("is-active", liked);
          likeButton.setAttribute("aria-pressed", liked ? "true" : "false");
          setCountLabel(likeCount, totalLikes);
        }

        function setViewCount(totalViews) {
          setCountLabel(viewCount, totalViews);
        }

        function setCommentCount(totalComments) {
          setCountLabel(commentCount, totalComments);
          if (commentThreadToggle) {
            const threadOpen = commentThread && !commentThread.hasAttribute("hidden");
            commentThreadToggle.textContent = `${threadOpen ? "Hide" : "Show"} comments (${formatCompactCount(totalComments)})`;
          }
        }

        function setCommentStatus(message, isError = false) {
          if (!commentStatus) {
            return;
          }

          commentStatus.textContent = message || "";
          commentStatus.style.color = isError ? "rgb(220 38 38)" : "";
        }

        function escapeHTML(value) {
          return String(value ?? "")
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/\"/g, "&quot;")
            .replace(/'/g, "&#39;");
        }

        function renderCommentCard(comment) {
          const article = document.createElement("article");
          article.className = "comment-card";
          article.innerHTML = `
            <div class="comment-card-header">
              <span class="comment-card-name">${escapeHTML(comment.display_name || "Anonymous")}</span>
              <time class="comment-card-time">${escapeHTML(comment.commented_at_label || "")}</time>
            </div>
            <p class="comment-card-body">${escapeHTML(comment.comment || "")}</p>
          `;
          return article;
        }

        function appendComment(comment) {
          if (!commentsList) {
            return;
          }

          if (commentsEmpty) {
            commentsEmpty.remove();
            commentsEmpty = null;
          }
          commentsList.appendChild(renderCommentCard(comment));
        }

        function openCommentModal() {
          if (!commentModal) {
            return;
          }

          commentModal.classList.remove("hidden");
          commentModal.setAttribute("aria-hidden", "false");
          document.body.style.overflow = "hidden";
          window.setTimeout(() => commentNameInput?.focus(), 20);
        }

        function closeCommentModal() {
          if (!commentModal) {
            return;
          }

          commentModal.classList.add("hidden");
          commentModal.setAttribute("aria-hidden", "true");
          document.body.style.overflow = fullscreenModal?.classList.contains("hidden") ? "" : "hidden";
          setCommentStatus("");
        }

        function normalizeMediaSrc(path) {
          return `${uploadBase}${String(path || "").replace(/\\/g, "/").replace(/^\/+/, "")}`;
        }

        const slideCount = 1 + relatedMedia.length;
        let activeSlideIndex = 0;

        function getActiveSlide() {
          if (activeSlideIndex === 0) {
            return {
              kind: "image",
              src: starlessToggle?.checked && starlessImageSrc ? starlessImageSrc : primaryImageSrc,
              caption: primaryCaption,
              astro: true,
            };
          }

          const media = relatedMedia[activeSlideIndex - 1] || {};
          return {
            kind: media.media_kind === "video" ? "video" : "image",
            src: normalizeMediaSrc(media.media_path),
            caption: media.caption || "",
            astro: false,
          };
        }

        function setToggleAvailability(toggle, enabled) {
          if (!toggle) {
            return;
          }

          toggle.disabled = !enabled;
          const label = document.querySelector(`label[for="${toggle.id}"]`);
          if (!label) {
            return;
          }

          label.classList.toggle("opacity-40", !enabled);
          label.classList.toggle("cursor-not-allowed", !enabled);
          label.classList.toggle("pointer-events-none", !enabled);
        }

        const inlineViewer = createViewer("");
        let fullscreenViewer = null;

        if (inlineTools && inlineToolTray) {
          inlineToolTray.appendChild(inlineTools);
        }

        const fullscreenModal = document.getElementById(`fullscreen-modal-${imageId}`);
        const fullscreenOpenButton = document.getElementById(`fullscreen-btn-${imageId}`);
        const fullscreenCloseButton = document.getElementById(`fullscreen-close-btn-${imageId}`);
        const fullscreenBackdrop = document.getElementById(`fullscreen-backdrop-${imageId}`);

        function ensureFullscreenViewer() {
          if (!fullscreenViewer) {
            // Initialize the fullscreen panzoom after the modal is visible so reset uses the rendered size.
            fullscreenViewer = createViewer("fullscreen-");
          }

          return fullscreenViewer;
        }

        function setInlineToolTrayVisible(visible) {
          if (!inlineToolTray || !inlineAstroControlsAvailable) {
            inlineToolTray?.classList.remove("is-visible");
            return;
          }

          inlineToolTray.classList.toggle("is-visible", visible);
        }

        function clearInlineToolTrayHideTimer() {
          if (inlineToolHideTimer !== null) {
            window.clearTimeout(inlineToolHideTimer);
            inlineToolHideTimer = null;
          }
        }

        function scheduleInlineToolTrayHide() {
          clearInlineToolTrayHideTimer();
          if (!inlineAstroControlsAvailable) {
            return;
          }

          inlineToolHideTimer = window.setTimeout(() => setInlineToolTrayVisible(false), 6000);
        }

        function pokeInlineToolTray() {
          if (!inlineAstroControlsAvailable) {
            return;
          }

          setInlineToolTrayVisible(true);
          scheduleInlineToolTrayHide();
        }

        function renderInlineChrome() {
          const arrowButtons = [mediaPrevButton, mediaNextButton].filter(Boolean);
          const arrowsShouldHover = inlineChromeHovered && arrowButtons.length > 0;

          arrowButtons.forEach(button => {
            button.classList.toggle("is-hover", arrowsShouldHover || inlineChromeActive);
            button.classList.toggle("is-active", inlineChromeActive);
          });

          [fullscreenOpenButton, inlineViewer.elements.resetButton].filter(Boolean).forEach(button => {
            button.classList.toggle("is-visible", inlineChromeActive);
          });
        }

        function clearInlineChromeHideTimer() {
          if (inlineChromeHideTimer !== null) {
            window.clearTimeout(inlineChromeHideTimer);
            inlineChromeHideTimer = null;
          }
        }

        function scheduleInlineChromeHide() {
          clearInlineChromeHideTimer();
          inlineChromeHideTimer = window.setTimeout(() => {
            inlineChromeActive = false;
            inlineChromeHovered = !!inlineContainer?.matches(":hover");
            renderInlineChrome();
          }, 5000);
        }

        function pokeInlineChrome() {
          inlineChromeHovered = true;
          inlineChromeActive = true;
          renderInlineChrome();
          scheduleInlineChromeHide();
        }

        function hideInlineChrome() {
          clearInlineChromeHideTimer();
          inlineChromeHovered = false;
          inlineChromeActive = false;
          renderInlineChrome();
        }

        function renderActiveSlide() {
          const slide = getActiveSlide();
          inlineViewer.setSlide(slide);

          inlineCaption.textContent = slide.caption || "";

          const astroEnabled = slide.astro;
          inlineAstroControlsAvailable = astroEnabled;
          setToggleAvailability(inlineViewer.elements.graticuleToggle, astroEnabled);
          setToggleAvailability(inlineViewer.elements.compareToggle, astroEnabled);
          setToggleAvailability(inlineViewer.elements.overlayToggle, astroEnabled);
          setToggleAvailability(starlessToggle, astroEnabled);
          if (inlineTools) {
            inlineTools.classList.toggle("hidden", !astroEnabled);
          }
          if (!astroEnabled) {
            clearInlineToolTrayHideTimer();
            setInlineToolTrayVisible(false);
          }
          renderInlineChrome();

          if (fullscreenViewer && !fullscreenModal.classList.contains("hidden")) {
            fullscreenViewer.setSlide(slide);
            fullscreenViewer.setToolState({
              overlay: inlineViewer.elements.overlayToggle.checked,
              graticule: inlineViewer.elements.graticuleToggle.checked,
              compare: inlineViewer.elements.compareToggle.checked,
            });
          }
        }

        function changeSlide(delta) {
          if (slideCount <= 1) {
            return;
          }

          activeSlideIndex = (activeSlideIndex + delta + slideCount) % slideCount;
          renderActiveSlide();
        }

        function openFullscreenViewer() {
          fullscreenModal.classList.remove("hidden");
          fullscreenModal.classList.add("flex");
          document.body.style.overflow = "hidden";

          requestAnimationFrame(() => {
            requestAnimationFrame(() => {
              const viewer = ensureFullscreenViewer();
              viewer.setToolState({
                overlay: inlineViewer.elements.overlayToggle.checked,
                graticule: inlineViewer.elements.graticuleToggle.checked,
                compare: inlineViewer.elements.compareToggle.checked,
              });
              renderActiveSlide();
            });
          });
        }

        function closeFullscreenViewer() {
          fullscreenViewer?.elements?.video?.pause?.();
          fullscreenModal.classList.add("hidden");
          fullscreenModal.classList.remove("flex");
          document.body.style.overflow = commentModal?.classList.contains("hidden") ? "" : "hidden";
        }

        fullscreenOpenButton.addEventListener("click", openFullscreenViewer);
        fullscreenCloseButton.addEventListener("click", closeFullscreenViewer);
        fullscreenBackdrop.addEventListener("click", closeFullscreenViewer);
        mediaPrevButton?.addEventListener("click", () => changeSlide(-1));
        mediaNextButton?.addEventListener("click", () => changeSlide(1));
        starlessToggle?.addEventListener("change", renderActiveSlide);
        const inlineContainer = inlineViewer.elements.container;
        inlineContainer?.addEventListener("mouseenter", pokeInlineToolTray);
        inlineContainer?.addEventListener("mousemove", pokeInlineToolTray);
        inlineContainer?.addEventListener("pointerdown", pokeInlineToolTray);
        inlineContainer?.addEventListener("focusin", pokeInlineToolTray);
        inlineContainer?.addEventListener("mouseenter", pokeInlineChrome);
        inlineContainer?.addEventListener("mousemove", pokeInlineChrome);
        inlineContainer?.addEventListener("pointerdown", pokeInlineChrome);
        inlineContainer?.addEventListener("focusin", pokeInlineChrome);
        inlineContainer?.addEventListener("mouseleave", () => {
          clearInlineToolTrayHideTimer();
          setInlineToolTrayVisible(false);
          hideInlineChrome();
        });

        commentsToggleButton?.addEventListener("click", () => {
          openCommentModal();
        });

        commentThreadToggle?.addEventListener("click", () => {
          if (!commentThread) {
            return;
          }

          const willOpen = commentThread.hasAttribute("hidden");
          if (willOpen) {
            commentThread.removeAttribute("hidden");
          } else {
            commentThread.setAttribute("hidden", "");
          }
          commentThreadToggle.setAttribute("aria-expanded", willOpen ? "true" : "false");
          setCommentCount(Number(commentCount?.dataset.count || commentCount?.textContent || 0));
        });

        commentCloseButton?.addEventListener("click", closeCommentModal);
        commentCancelButton?.addEventListener("click", closeCommentModal);
        commentModal?.addEventListener("click", (event) => {
          if (event.target === commentModal) {
            closeCommentModal();
          }
        });

        likeButton?.addEventListener("click", async () => {
          likeButton.disabled = true;

          try {
            const response = await fetch({{ url_for('blog.like_image_endpoint', image_id=il.image.id) | tojson | safe }}, {
              method: "POST",
              headers: {
                "X-CSRFToken": csrfToken,
              },
            });
            const data = await response.json().catch(() => ({}));
            if (!response.ok) {
              throw new Error(data.message || "Could not star this post right now.");
            }

            setLikeState(!!data.liked, data.like_count);
          } catch (error) {
            alert(error.message || "Could not star this post right now.");
          } finally {
            likeButton.disabled = false;
          }
        });

        commentForm?.addEventListener("submit", async (event) => {
          event.preventDefault();
          if (commentSubmitInFlight) {
            return;
          }

          commentSubmitInFlight = true;
          commentSubmitButton.disabled = true;
          setCommentStatus("Posting comment...");

          try {
            const response = await fetch({{ url_for('blog.comment_on_image', image_id=il.image.id) | tojson | safe }}, {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
                "X-CSRFToken": csrfToken,
              },
              body: JSON.stringify({
                display_name: commentNameInput?.value || "",
                comment: commentTextInput?.value || "",
                remember_name: !!commentRememberInput?.checked,
              }),
            });
            const data = await response.json().catch(() => ({}));
            if (!response.ok) {
              throw new Error(data.message || "Could not post your comment right now.");
            }

            appendComment(data.comment || {});
            setCommentCount(data.comment_count);
            commentThread?.removeAttribute("hidden");
            commentThreadToggle?.setAttribute("aria-expanded", "true");
            if (commentTextInput) {
              commentTextInput.value = "";
            }
            if (!data.preferences_enabled && commentRememberInput) {
              commentRememberInput.checked = false;
              setCommentStatus("Comment posted. Enable preference cookies if you want AstroSpace to remember your name.");
            } else {
              setCommentStatus("Comment posted.");
            }

            window.setTimeout(() => {
              closeCommentModal();
            }, 500);
          } catch (error) {
            setCommentStatus(error.message || "Could not post your comment right now.", true);
          } finally {
            commentSubmitInFlight = false;
            commentSubmitButton.disabled = false;
          }
        });

        document.addEventListener("keydown", (event) => {
          if (event.key === "Escape" && commentModal && !commentModal.classList.contains("hidden")) {
            closeCommentModal();
            return;
          }
          if (event.key === "Escape" && !fullscreenModal.classList.contains("hidden")) {
            closeFullscreenViewer();
          }
        });

        document.addEventListener("DOMContentLoaded", () => {
            setLikeState(likeButton?.getAttribute("aria-pressed") === "true", Number(likeCount?.textContent || 0));
            setViewCount(Number(viewCount?.textContent || 0));
            setCommentCount(Number(commentCount?.textContent || 0));
            renderActiveSlide();
            drawHRDiagram(overlayData);
            renderGuidingPlot("guiding-root-{{il.image.id}}", {{ il.guiding_plot | tojson | safe }});
            renderCalibrationPlot("calibration-root-{{il.image.id}}", {{ il.calibration_plot | tojson | safe }});

            {% if il.meta_json %}
            const metaVariable = {{ il.meta_json.variable | tojson | safe }};
            const metaComments = {{ il.meta_json.comments | tojson | safe }};

            populateAxisSelects(metaVariable);

            const update = () => {
                const xKey = document.getElementById("xAxisSelect").value;

                const getSelectedValues = (id) =>
                    Array.from(document.getElementById(id).selectedOptions)
                        .map(o => o.value);

                const yKeys = [
                    getSelectedValues("yAxisSelect1"),
                    getSelectedValues("yAxisSelect2"),
                    getSelectedValues("yAxisSelect3"),
                ]

                const chartTypes = [
                    document.getElementById("yAxisType1").value,
                    document.getElementById("yAxisType2").value,
                    document.getElementById("yAxisType3").value,
                ];

                drawVariablePlot(
                    metaVariable,
                    metaComments,
                    xKey,
                    yKeys,
                    chartTypes
                );
            };

            document
                .getElementById("updatePlotBtn")
                .addEventListener("click", update);

            update(); // initial plot 
            {% endif %}
        });
      })();
      </script>


    </div>
    {% endfor %}
    <div class="relative min-h-[35vh] flex flex-col items-center justify-center shadow-5xl">
      <div
        class="flex-grow flex items-center justify-center border-1 border-gray-200 dark:border-gray-400   shadow-5xl">
        <div class="w-0 top-0 h-full shadow-2xl">
        </div>
      </div>
    </div>
  </div>
  {% endblock %}