{{define "page:content"}}
<div id="modal" class="w3-modal">
    <div class="w3-modal-content w3-round-large">
        <header class="w3-container" style="margin-bottom: 20px; font-weight: bold;">
            <span _="on click remove #modal"
            class="w3-button w3-round-large w3-display-topright" style="margin-top: 2px; margin-right: 2px;"><i class='bi bi-x-circle-fill'></i></span>
            <h5><i class="{{.item.Type_icon}}" title="{{.item.Type_title}}"></i> {{.item.Type_title}} : {{.item.Title}}</h5>
          </header>

      <div class="w3-container" style="max-height:600px; overflow: auto;">
        {{ 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="w3-ul fields">
            {{ range .fields }}
            <li><span style="font-weight: bold;">{{.Title}}</span> : {{ renderFieldValue .Value .Widget}}</li>
            {{ end }}
          </ul>
        {{ end }}

        {{ template "item:relations_view" .}}

        <div class="w3-row" style="margin-bottom: 20px">
          <div class="w3-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="w3-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 class="w3-row" style="margin-bottom: 20px">
        <a
          class="w3-btn w3-metro-dark-blue w3-round-large"
          hx-get="/item/update/{{.item.Id}}"
          hx-push-url="true"
          hx-target="#page-content"
          _="on click remove #modal"
          href="/item/update/{{.item.Id}}"><i class="bi bi-pencil"></i> Edit</a>
        </div>
      </div>
    </div>
  </div>
  {{ end }}