{{define "item:relations"}}
<table class="table-all w3-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}}
{{ $relation_name := printf "%s%v-%v" "ItemRelation-" .Item_id .Related_item_id }}
{{ $relation_name_remove := printf "%s%v-%v" "ItemRelation-ToRemove-" .Item_id .Related_item_id }}
<tr id="{{$relation_name}}-Row">
    <td class="no-label {{$relation_name}}-Col">
      {{ $target_id := .Related_item_id}}
      {{ $relation_type := .Relation_type }}
      {{ if eq .Related_item_id $.item.Id }}
        {{ $target_id = .Item_id}}
        {{ if eq "Parent" .Relation_type}}
          {{ $relation_type = "Child" }}
        {{ else if eq "Child" .Relation_type}}
          {{ $relation_type = "Parent" }}
        {{ end }}
      {{ end }}
    <a
    href="/item/view/{{$target_id}}"
    hx-get="/item/view/{{$target_id}}"
    hx-target="#modal-container"
      ><i class="{{.Type_icon}}" title="{{.Type_title}}"></i> {{.Title}}</a
    >
    <input
      type="hidden"
      id="{{$relation_name_remove}}"
      name="{{$relation_name_remove}}"
      value=""
    />    
    </td>
    <td class="no-label {{$relation_name}}-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">class="w3-button w3-round-large w3-hover-metro-dark-blue w3-medium"
            {{ $category_name }}
          </div>
        {{ end }}
      {{ end }}
    </td>
    <td class="no-label {{$relation_name}}-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 {{$relation_name}}-Col">{{ widget_relation_type $relation_name $relation_type `id="$relation_name" class=" w3-border"` }}</td>
    <td class="no-label">
      <div class="w3-bar">
        <button
          id="Delete-{{$relation_name}}"
          class="w3-right w3-btn w3-metro-dark-red w3-round-large"
          type="button"
          _="on click set {value: '1'} on #{{$relation_name_remove}} then hide me then show #Undelete-{{$relation_name}} then add .w3-opacity-max to .{{$relation_name}}-Col"
        >
          <i class="bi bi-x-square" title="Remove"></i><span class="hide-small"> Remove</span>
        </button>
        <button
          id="Undelete-{{$relation_name}}"
          style="margin-right: 5px; display: none"
          class="w3-right w3-btn w3-metro-blue w3-round-large"
          type="button"
          _="on click set {value: ''} on #{{$relation_name_remove}} then hide me then show #Delete-{{$relation_name}} then remove .w3-opacity-max from .{{$relation_name}}-Col"
        >
          <i class="bi bi-arrow-counterclockwise" title="Undo"></i><span class="hide-small"> Undo</span>
        </button>
      </div>    
    </td>
  </tr>
  {{ end }}
</tbody>
</table>
  {{ end }}