{{ define "item-buttons" -}}
<button
	class="item-button"
	title="Deactivate {{ .Source }}/{{ .Id }}"
	hx-target="closest article"
	hx-swap="outerHTML"
	hx-select="article"
	hx-delete="/item/{{ .Source }}/{{ .Id }}"
>&#10005;</button>
<button
	class="item-button"
	title="Punt {{ .Source }}/{{ .Id }}"
>&#8631;</button>
{{- if .Link }}<a class="item-link" href="{{ .Link }}" target="_blank">&#8663;</a>
{{ end -}}
{{ end }}

{{ define "item-title" -}}
<span class="item-title">{{ or .Title .Id | raw }}</span>
{{- end }}

{{ define "item-class" -}}{{ if not .Active }}strikethru {{ end }}{{ if not .Active }}fade{{ end }}{{- end}}

{{ define "item" -}}
<article
	id="{{ .Source }}-{{ .Id }}"
	class="{{ template "item-class" . }}"
>

{{- /* The item title is a clickable <summary> if there is body content */ -}}
{{ if .Body }}
<details>
<summary>
    {{ template "item-buttons" . }}
    {{ template "item-title" . }}
</summary>
{{ if .Body }}
<p>{{ raw .Body }}</p>
{{ end }}
</details>
{{ template "item-buttons" . }}
{{- else -}}
{{ template "item-buttons" . }}
{{ template "item-title" . }}<br>
{{ end }}
{{- /* end if .Body */ -}}

{{- /* author/time footer line */ -}}
{{ if or .Author .Time }}
<span class="item-info">
{{ .Author }}
{{ .Time | tsToDate }}
</span><br>
{{ end -}}

{{- /* source/id/created footer line */ -}}
<span class="item-info">
<a href="/item/{{ .Source }}/{{ .Id }}">{{ .Source }}/{{ .Id }}</a>
{{ .Created | tsToDate }}
</span>
</article>
{{ end -}}
{{- /* end define "item" */ -}}