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

{{define "content"}}
<main class="container">
  <div class="page-header">
    <span>Journal</span>
    <a href="/login">Anmelden</a>
  </div>
  <div id="feed">
    {{template "feed_items" .}}
  </div>
</main>
{{end}}

{{define "feed_items"}}
{{range .Entries}}
<article class="pub-card">
  {{if .Images}}
  <a href="/uploads/{{(index .Images 0).Filename}}" target="_blank">
    <img class="pub-cover" src="/uploads/{{(index .Images 0).Filename}}" alt="">
  </a>
  {{end}}
  <div class="pub-body">
    <small class="pub-meta">{{.EntryDate}} · {{.EntryTime}}</small>
    {{if .Title}}<strong class="pub-title">{{.Title}}</strong>{{end}}
    {{if .Description}}<p class="pub-desc">{{.Description}}</p>{{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" .}}