{{define "title"}}Journal{{end}}

{{define "content"}}
<main class="container">
  <div id="feed">
    {{template "feed_items" .}}
  </div>
</main>
{{end}}

{{define "feed_items"}}
{{range .Entries}}
<article class="pub-card">
  {{if .Images}}
  {{with (index .Images 0)}}
  {{if isVideo .MimeType}}
  <video src="/uploads/{{.Filename}}" controls class="media-embed"></video>
  {{else if isAudio .MimeType}}
  <audio src="/uploads/{{.Filename}}" controls class="media-audio"></audio>
  {{else}}
  <a href="/uploads/{{.Filename}}" target="_blank">
    <img class="pub-cover" src="/uploads/{{.Filename}}" alt="">
  </a>
  {{end}}
  {{end}}
  {{end}}
  <div class="pub-body">
    <small class="pub-meta">{{.EntryDate}} · {{.EntryTime}}</small>
    {{if .Title}}<strong class="pub-title">{{.Title}}</strong>{{end}}
    {{if .Description}}<div class="pub-desc">{{markdown .Description}}</div>{{end}}
    {{if .Hashtags}}<div class="pub-tags">{{range .Hashtags}}<span class="tag">#{{.}}</span> {{end}}</div>{{end}}
  </div>
</article>
{{else}}
<p><small>// Noch keine öffentlichen Einträge</small></p>
{{end}}
{{if .HasMore}}
<div id="sentinel" data-offset="{{.Offset}}"></div>
{{end}}
{{end}}

{{define "scripts"}}
<script>
(function() {
  const sentinel = document.getElementById('sentinel');
  if (!sentinel) return;
  const obs = new IntersectionObserver(function(entries) {
    if (!entries[0].isIntersecting) return;
    obs.disconnect();
    fetch('/feed?offset=' + sentinel.dataset.offset)
      .then(r => r.text())
      .then(html => {
        sentinel.remove();
        const div = document.createElement('div');
        div.innerHTML = html;
        document.getElementById('feed').append(...div.childNodes);
        const next = document.getElementById('sentinel');
        if (next) obs.observe(next);
      });
  });
  obs.observe(sentinel);
})();
</script>
{{end}}

{{template "base" .}}