{{define "partials/tag_list.html"}}
<div id="image-tags" data-image-id="{{.ImageID}}">
  {{if .ErrMsg}}<div class="flash flash-err" style="margin-bottom:4px">{{.ErrMsg}}</div>{{end}}
  {{if .WarnMsg}}<div class="flash flash-warn" style="margin-bottom:4px">{{.WarnMsg}}</div>{{end}}
  {{if .OkMsg}}<div class="flash flash-ok" style="margin-bottom:4px">{{.OkMsg}}</div>{{end}}
  {{$groups := groupByImageSource .ImageTags}}
  {{$implied := impliedFromImageTags .ImageTags}}
  {{if $groups}}
    {{range $groups}}
    <div class="tag-source-group" data-source="{{.Source}}">
      <h4 class="tag-source-title">{{.Title}}</h4>
      <ul class="tag-list" data-source="{{.Source}}">
        {{range .Tags}}
        <li class="tag-item" data-tag-id="{{.TagID}}" data-source="{{if .IsAuto}}auto{{else}}user{{end}}" style="color:{{.Color}}">
          <a href="/?q={{.Category}}:{{.TagName}}" class="tag-chip-name">{{.TagName}}</a>
          {{if .IsAuto}}{{with autoConfPct .Confidence}}<span class="auto-conf">{{.}}%</span>{{end}}{{end}}
          <button class="tag-remove-btn"
                  hx-delete="/images/{{$.ImageID}}/tags/{{.TagID}}"
                  hx-target="#image-tags"
                  hx-swap="outerHTML"
                  hx-headers='{"X-CSRF-Token":"{{$.CSRFToken}}"}'
                  title="Remove tag">×</button>
        </li>
        {{end}}
      </ul>
    </div>
    {{end}}
  {{else}}
  <ul class="tag-list"><li class="no-tags">No tags yet.</li></ul>
  {{end}}
  {{if or $implied .Aliases}}
  <details class="tag-source-group" data-source="implied">
    <summary class="tag-source-title">{{if and $implied .Aliases}}Implied tags and aliases{{else if $implied}}Implied tags{{else}}Aliases{{end}}</summary>
    {{if $implied}}
    <ul class="tag-list" data-source="implied">
      {{range $implied}}
      <li class="tag-item tag-implied-entry" data-tag-id="{{.TagID}}" data-source="implied" style="color:{{.Color}}">
        <a href="/?q={{.Category}}:{{.TagName}}" class="tag-chip-name">{{.TagName}}</a>
      </li>
      {{end}}
    </ul>
    {{end}}
    {{if .Aliases}}
    <ul class="tag-list" data-source="alias">
      {{range .Aliases}}
      <li class="tag-item tag-alias-entry" data-tag-id="{{.ID}}" data-source="alias" style="color:{{.CategoryColor}}">
        <a href="/?q={{.CanonicalCategoryName}}:{{.CanonicalName}}" class="tag-chip-name">{{.Name}}</a>
      </li>
      {{end}}
    </ul>
    {{end}}
  </details>
  {{end}}
  <hr class="tag-list-divider" hidden>
  <h4 class="tag-list-added-title" hidden>Just added</h4>
  <ul class="tag-list tag-list-added"></ul>
</div>
{{if .ClearInput}}<script>
(function(){var i=document.getElementById('tag-input');if(i){i.value='';var d=document.getElementById('tag-suggest-dropdown');if(d)d.innerHTML='';}})();
</script>{{end}}
{{if .SidebarTags}}
<div id="sidebar-inner" class="detail-sidebar-inner" hx-swap-oob="true">
  {{template "partials/detail_sidebar.html" .}}
</div>
{{end}}
{{if .DangerZone}}
{{template "partials/detail_danger_zone.html" (dict "ImageID" .ImageID "ImageTags" .ImageTags "HasUserTags" .HasUserTags "ImageTaggers" .ImageTaggers "ImageSources" .ImageSources "CanTransfer" .CanTransfer "CSRFToken" .CSRFToken "BackQuery" .BackQuery "BackSort" .BackSort "BackOrder" .BackOrder "BackPage" .BackPage "BackSeed" .BackSeed "Ref" .Ref "CurrentFolder" .CurrentFolder "OOB" true)}}
{{end}}
{{end}}