{{define "page:content"}}
<dialog id="dialog" class="view">
  <header>
    <h5><i class="{{.item.Type_icon}}" title="{{.item.Type_title}}"></i> {{.item.Type_title}} : {{.item.Title}}</h5>
    <span class="close-dialog button close"><i class='close-dialog bi bi-x-circle-fill'></i></span>
  </header>
  <div class="content">
    {{ if gt (len .item.Summary) 0}}
      <span style="font-weight: bold;">Summary</span>
      <div class="summary">
        {{.item.Summary_rendered | safeHTML}}
      </div>
      {{ end }}
    
      {{.item.Description_rendered | safeHTML}}
    
      {{ if gt (len .fields) 0}}
        <ul class="fields">
          {{ range .fields }}
            <li><span style="font-weight: bold;">{{.Title}}</span> : {{ renderFieldValue .Value .Widget}}</li>
            {{ end }}
        </ul>
      {{ end }}

      {{ template "item:relations_view" .}}

        <div class="row" style="margin-bottom: 20px">
          <div class="col half">
            <strong>Categories</strong> 
            {{ range (stringToArray .item.Categories "|")}}
            {{ $category_name := index $.categoriesMap .}}
            <div class="tag" style="padding: 3px">
              <a hx-post="/items" hx-target="#page-content" hx-push-url="true" href="#" hx-vals="{category_id&quot; : &quot;{{ . }}&quot;}">{{ $category_name }}</a>
            </div>
            {{ end }}
          </div>
          <div class="col half">
            {{ if gt (len .item.Tags) 0 }}
            <strong>Tags</strong> {{ range (stringToArray .item.Tags ",")}}
            <div class="tag" style="padding: 3px">
            <a hx-post="/items" hx-target="#page-content" hx-push-url="true" href="#" hx-vals="{Tags&quot; : &quot;{{.}}&quot;}">{{ . }}</a>
            </div>
            {{ end }}
            {{ end }}
          </div>
        </div>
      </div>
      <div id="footer-navbar">
        <a class="button main close-dialog" hx-get="/item/update/{{.item.Id}}" hx-push-url="true" hx-target="#page-content" href="/item/update/{{.item.Id}}"><i class="bi bi-pencil close-dialog"></i> Edit</a>
      </div>
  </dialog>
  {{ end }}