{{define "title"}}Journal — Öffentliche Einträge{{end}}

{{define "content"}}
<main class="container">
  <nav>
    <strong>Journal</strong>
    <a href="/login">Anmelden</a>
  </nav>

  <div id="feed">
    {{template "feed_items" .}}
  </div>
</main>
{{end}}

{{define "feed_items"}}
{{range .Entries}}
<article class="entry-card">
  <header>
    <small>{{.EntryDate}} · {{.EntryTime}}</small>
    {{if .Title}}<strong> · {{.Title}}</strong>{{end}}
  </header>
  {{if .Description}}<p>{{.Description}}</p>{{end}}
  {{if .Images}}
  <div class="entry-images">
    {{range .Images}}
    <a href="/uploads/{{.Filename}}" target="_blank">
      <img src="/uploads/{{.Filename}}" alt="{{.OriginalName}}" class="thumb">
    </a>
    {{end}}
  </div>
  {{end}}
  {{if .Hashtags}}
  <footer class="hashtags">
    {{range .Hashtags}}<span class="tag">#{{.}}</span> {{end}}
  </footer>
  {{end}}
</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();
    const offset = sentinel.dataset.offset;
    fetch('/feed?offset=' + 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" .}}