{{define "relations_image.html"}}
{{template "layout_head" .}}
{{template "layout_mid" .}}

<div id="relations-image-page" data-image-id="{{.Image.ID}}" data-esc-back="/images/{{.Image.ID}}?back_q={{urlQ .BackQ}}&back_sort={{.BackSort}}&back_order={{.BackOrder}}{{if .BackPage}}&back_page={{.BackPage}}{{end}}{{if .BackSeed}}&back_seed={{.BackSeed}}{{end}}">
  <div id="detail-flash"></div>
  <div class="detail-topbar">
    <div class="detail-nav-group">
      <a href="/images/{{.Image.ID}}?back_q={{urlQ .BackQ}}&back_sort={{.BackSort}}&back_order={{.BackOrder}}{{if .BackPage}}&back_page={{.BackPage}}{{end}}{{if .BackSeed}}&back_seed={{.BackSeed}}{{end}}" class="back-link">‹ Image</a>
      <span class="detail-nav-sep">/</span>
      <span class="detail-filename mono-small">image {{.Image.ID}}</span>
    </div>
  </div>

  {{if and (not .Relations.HasAny) (not .Collection)}}
  <p class="field-hint">
    This image has no declared relations.
    {{if .Image.Phash}}
      <a href="/?q=phash:{{phashHex .Image.Phash}}~4">Find similar images via phash.</a>
    {{else}}
      <span class="field-hint">(no phash computed)</span>
      <form hx-post="/relations/phash/{{.Image.ID}}/recompute" hx-swap="none"
            hx-on::after-request="if(event.detail.successful){window.location.reload()}" style="display:inline">
        <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
        <button type="submit" class="btn-link-accent">[backfill phash]</button>
      </form>
    {{end}}
  </p>
  {{end}}

  {{if .Collection}}
  <section class="relations-section">
    <h3>Same collection</h3>
    <ul class="manga-pages-grid">
      {{range .Collection}}
      <li class="manga-page-cell">
        <a href="/images/{{.ID}}" class="manga-page-link{{if eq .ID $.Self}} relations-tree-current{{end}}" title="Image {{.ID}}{{if eq .ID $.Self}} (this image){{end}}">
          <img src="/thumbnails/{{$.ActiveGallery}}/{{.ID}}.jpg" alt="image {{.ID}}" loading="lazy" class="manga-page-thumb">
          {{/* Render the operator-set series_order verbatim; the row
               ordering (driven by loadCollectionSiblings's
               `series_order IS NULL, series_order, id`) already mirrors
               the `sort=collection` SQL, so cards display in the same
               order the gallery would under that sort. Rows without a
               series_order show the bare series label - the operator
               can spot which images still need an order assigned. */}}
          <span class="manga-page-num">{{.Series}}{{if .Order}} #{{deref64 .Order}}{{end}}</span>
        </a>
        {{if eq .ID $.Self}}
        <div class="relations-actions-row">
          <span class="relations-inline-label">^ This image</span>
        </div>
        {{end}}
      </li>
      {{end}}
    </ul>
  </section>
  {{end}}

  {{if .Relations.DupGroup}}
  <section class="relations-section">
    <h3>Same image as {{if eq .Relations.DupGroup.Original .Self}}this image{{else}}image {{.Relations.DupGroup.Original}}{{end}}</h3>
    <ul class="manga-pages-grid">
      {{range $id := .DupGroupMembersOrdered}}
      <li class="manga-page-cell{{if eq $id $.Relations.DupGroup.Original}} relations-cell-original{{end}}">
        <a href="/images/{{$id}}" class="manga-page-link{{if eq $id $.Self}} relations-tree-current{{end}}" title="Image {{$id}}{{if eq $id $.Self}} (this image){{end}}">
          <img src="/thumbnails/{{$.ActiveGallery}}/{{$id}}.jpg" alt="image {{$id}}" loading="lazy" class="manga-page-thumb">
          {{if eq $id $.Relations.DupGroup.Original}}<span class="relations-card-tag">original</span>{{end}}
          <span class="manga-page-num">{{if eq $id $.Relations.DupGroup.Original}}Original{{else}}Duplicate{{end}} · #{{$id}}</span>
        </a>
        <div class="relations-actions-row">
        {{if eq $id $.Self}}
          <span class="relations-inline-label">^ This image</span>
          {{if ne $id $.Relations.DupGroup.Original}}
          {{template "partials/relation_unlink_form.html" (dict "CSRFToken" $.CSRFToken "Type" "promote-original" "GroupID" $.Relations.DupGroup.ID "ImageID" $id "Label" "[original]" "Title" "Promote this image to the group original")}}
          {{end}}
          {{if and (eq $id $.Relations.DupGroup.Original) $.NextOriginalIfOriginalUnlinked}}
          {{template "partials/relation_unlink_form.html" (dict "CSRFToken" $.CSRFToken "Type" "duplicate" "ImageID" $id "Label" "[unlink]" "Title" "Unlink this image from the group" "Confirm" (printf "Unlink this image (the current original)? Image #%d will be promoted to the new original." $.NextOriginalIfOriginalUnlinked))}}
          {{end}}
        {{else}}
          {{if and (eq $id $.Relations.DupGroup.Original) $.NextOriginalIfOriginalUnlinked}}
          {{template "partials/relation_unlink_form.html" (dict "CSRFToken" $.CSRFToken "Type" "duplicate" "ImageID" $id "Label" "[unlink]" "Title" "Unlink this duplicate" "Confirm" (printf "Unlink image #%d (the current original)? Image #%d will be promoted to the new original." $id $.NextOriginalIfOriginalUnlinked))}}
          {{else}}
          {{template "partials/relation_unlink_form.html" (dict "CSRFToken" $.CSRFToken "Type" "duplicate" "ImageID" $id "Label" "[unlink]" "Title" "Unlink this duplicate")}}
          {{end}}
          {{if ne $id $.Relations.DupGroup.Original}}
          {{template "partials/relation_unlink_form.html" (dict "CSRFToken" $.CSRFToken "Type" "promote-original" "GroupID" $.Relations.DupGroup.ID "ImageID" $id "Label" "[original]" "Title" "Make this the original")}}
          {{end}}
        {{end}}
        </div>
      </li>
      {{end}}
    </ul>
  </section>
  {{end}}

  {{if .Relations.AltGroupMembers}}
  <section class="relations-section">
    <h3>Variants</h3>
    <ul class="manga-pages-grid">
      {{range $id := .AltGroupMembersOrdered}}
      <li class="manga-page-cell">
        <a href="/images/{{$id}}" class="manga-page-link{{if eq $id $.Self}} relations-tree-current{{end}}" title="Image {{$id}}{{if eq $id $.Self}} (this image){{end}}">
          <img src="/thumbnails/{{$.ActiveGallery}}/{{$id}}.jpg" alt="image {{$id}}" loading="lazy" class="manga-page-thumb">
          <span class="manga-page-num">Alternate · #{{$id}}</span>
        </a>
        <div class="relations-actions-row">
        {{if eq $id $.Self}}
          <span class="relations-inline-label">^ This image</span>
        {{else}}
          {{template "partials/relation_unlink_form.html" (dict "CSRFToken" $.CSRFToken "Type" "alternate" "ImageID" $id "Label" "[unlink]")}}
        {{end}}
        </div>
      </li>
      {{end}}
    </ul>
  </section>
  {{end}}

  {{if .VersionChainGens}}
  <section class="relations-section">
    <h3>Revision history</h3>
    <div class="relations-card-chain">
      {{range $g, $gen := .VersionChainGens}}
      {{if $g}}<span class="relations-chain-arrow" aria-hidden="true">→</span>{{end}}
      {{range $id := $gen}}
      {{$action := index $.VersionActions $id}}
      <div class="relations-chain-cell">
        <a href="/images/{{$id}}" class="relations-card-thumb relations-page-thumb-cell{{if eq $id $.Self}} relations-tree-current{{end}}" title="Image {{$id}}{{if eq $id $.Self}} (this image){{end}}">
          <img src="/thumbnails/{{$.ActiveGallery}}/{{$id}}.jpg" alt="image {{$id}}" loading="lazy" class="relations-page-thumb-img">
          <span class="relations-page-thumb-num">Version · #{{$id}}</span>
        </a>
        {{if eq $action "this"}}
        <span class="relations-inline-label">^ This image</span>
        {{else if eq $action "earlier"}}
        {{template "partials/relation_unlink_form.html" (dict "CSRFToken" $.CSRFToken "Type" "version" "A" $id "B" $.Image.ID "Label" "[unlink earlier revision]" "ExtraClass" "relations-inline-action")}}
        {{else if eq $action "newer"}}
        {{template "partials/relation_unlink_form.html" (dict "CSRFToken" $.CSRFToken "Type" "version" "A" $.Image.ID "B" $id "Label" "[unlink newer revision]" "ExtraClass" "relations-inline-action")}}
        {{end}}
      </div>
      {{end}}
      {{end}}
    </div>
  </section>
  {{end}}

  {{if .DerivativeTreeRows}}
  <section class="relations-section">
    <h3>Image based on {{if .Relations.DerivativeSource}}image {{deref64 .Relations.DerivativeSource}}{{else}}this image{{end}}</h3>
    <div class="relations-card-tree">
      {{range .DerivativeTreeRows}}
      {{$row := .}}
      {{$action := index $.DerivativeActions .ID}}
      <div class="relations-tree-row" data-depth="{{.Depth}}">
        {{if .Trunks}}
        <div class="relations-tree-prefix" aria-hidden="true">
          {{range $row.Trunks}}<span class="relations-tree-trunk" data-style="{{.}}"></span>{{end}}
        </div>
        {{end}}
        <a href="/images/{{.ID}}" class="relations-card-thumb relations-page-thumb-cell{{if eq .ID $.Self}} relations-tree-current{{end}}" title="Image {{.ID}}{{if eq .ID $.Self}} (this image){{end}}">
          <img src="/thumbnails/{{$.ActiveGallery}}/{{.ID}}.jpg" alt="image {{.ID}}" loading="lazy" class="relations-page-thumb-img">
          <span class="relations-page-thumb-num">{{if eq .Depth 0}}Source · {{else}}Derivative · {{end}}#{{.ID}}</span>
        </a>
        {{if eq $action "this"}}
        <span class="relations-inline-label">&lt;- This image</span>
        {{else if eq $action "source"}}
        {{template "partials/relation_unlink_form.html" (dict "CSRFToken" $.CSRFToken "Type" "derivative" "A" .ID "B" $.Image.ID "Label" (printf "[unlink source #%d]" .ID) "ExtraClass" "relations-inline-action")}}
        {{else if eq $action "derivative"}}
        {{template "partials/relation_unlink_form.html" (dict "CSRFToken" $.CSRFToken "Type" "derivative" "A" $.Image.ID "B" .ID "Label" (printf "[unlink derivative #%d]" .ID) "ExtraClass" "relations-inline-action")}}
        {{end}}
      </div>
      {{end}}
    </div>
  </section>
  {{end}}
</div>


{{template "layout_end" .}}
{{end}}