{{define "item:relations"}}
<table class="table-all striped responsive">
  <thead>
    <tr>
      <th>Item</th>
      <th>Categories</th>
      <th>Tags</th>
      <th>Relation type</th>
      <th></th>
    </tr>
  </thead>
  <tbody id="relations-items">
{{ range .item.Relations}}
{{ $relationName := printf "%s%v-%v" "ItemRelation-" .ItemId .RelatedItemId }}
{{ $relationNameRemove := printf "%s%v-%v" "ItemRelation-ToRemove-" .ItemId .RelatedItemId }}
<tr id="{{$relationName}}-Row">
    <td class="no-label {{$relationName}}-Col">
      {{ $targetId := .RelatedItemId}}
      {{ $relationType := .RelationType }}
      {{ if eq .RelatedItemId $.item.Id }}
        {{ $targetId = .ItemId}}
        {{ if eq "Parent" .RelationType}}
          {{ $relationType = "Child" }}
        {{ else if eq "Child" .RelationType}}
          {{ $relationType = "Parent" }}
        {{ end }}
      {{ end }}
    <a href="/item/view/{{$targetId}}" hx-get="/item/view/{{$targetId}}" hx-target="body" hx-swap="beforeend"><i class="{{.TypeIcon}}" title="{{.TypeTitle}}"></i> {{.Title}}</a>
    <input type="hidden" id="{{$relationNameRemove}}" name="{{$relationNameRemove}}" value=""/>
    </td>
    <td class="no-label {{$relationName}}-Col">
      {{ if gt (len .Categories) 0 }}
        <i class="hide-medium hide-large bi bi-tags-fill"></i>
        {{ range (stringToArray .Categories "|")}}
          {{ $category_name := index $.categoriesMap .}}
          <div class="tag" style="padding: 3px">
            {{ $category_name }}
          </div>
        {{ end }}
      {{ end }}
    </td>
    <td class="no-label {{$relationName}}-Col">
      {{ if gt (len .Tags) 0 }}
        <i class="hide-medium hide-large bi bi-tags"></i>
        {{ range (stringToArray .Tags ",")}}
          <div class="tag" style="padding: 3px">
            {{ . }}
          </div>
        {{ end }}
      {{ end }}
    </td>
    <td class="no-label {{$relationName}}-Col">{{ widget_relation_type $relationName $relationType `id="$relation_name"` }}</td>
    <td class="no-label">
        <button id="Delete-{{$relationName}}" class="delete" type="button" onclick="bm_element_list_delete(this, {{$relationName}}, {{$relationNameRemove}})"><i class="bi bi-x-square" title="Remove"></i><span>Remove</span></button>
        <button id="Undelete-{{$relationName}}" style="margin-right: 5px;" class="delete" type="button" onclick="bm_element_list_undelete(this, {{$relationName}}, {{$relationNameRemove}})" hidden><i class="bi bi-arrow-counterclockwise" title="Undo"></i><span>Undo</span></button>
    </td>
  </tr>
  {{ end }}
</tbody>
</table>
  {{ end }}