{{ define "title" }}Timeline · Tangled{{ end }}

{{ define "extrameta" }}
    <meta property="og:title" content="Timeline · Tangled" />
    <meta property="og:type" content="object" />
    <meta property="og:url" content="https://tangled.org" />
    <meta property="og:description" content="The next-generation social coding platform" />
{{ end }}

{{ define "mainLayout" }}
<div class="flex-grow flex flex-col -mt-4">
    <main class="flex-grow flex flex-col">{{ block "content" . }}{{ end }}</main>
</div>
{{ end }}

{{ define "content" }}
<div id="timeline-grid" class="flex flex-col w-full max-w-[1920px] mx-auto md:grid md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)_minmax(0,1fr)] md:items-start">

    <div class="hidden md:flex md:flex-col md:gap-4 md:pt-4 md:px-4 md:sticky md:top-0 md:h-screen md:overflow-y-auto md:pb-4 md:w-full md:max-w-[400px]">
        {{ template "timeline/fragments/notifications" . }}
        {{ template "timeline/fragments/recents" . }}
    </div>

    <div class="order-2 md:order-none md:col-start-2 md:row-start-1 md:w-full md:max-w-[600px] md:mx-auto">
        {{ template "timeline/fragments/timeline" . }}
    </div>

    <div class="order-1 md:order-none flex flex-col gap-4 md:col-start-3 md:row-start-1 md:w-full md:max-w-[400px] md:ml-auto md:pt-4 md:px-4 md:sticky md:top-0 md:h-screen md:overflow-y-auto md:pb-4">
        {{ if .ShowNewsletter }}
        <div id="newsletter-col" class="order-first md:order-last">
            {{ template "timeline/fragments/newsletterWidget" . }}
        </div>
        {{ end }}

        {{ template "timeline/fragments/trending" . }}

        <div class="hidden md:block">
          {{ template "timeline/fragments/announcements" . }}
        </div>

        {{ if and .LoggedInUser .VouchSuggestions }}
        <div class="hidden md:block">
            {{ template "timeline/fragments/vouchSuggestions" . }}
        </div>
        {{ end }}
    </div>
</div>

{{ if .ShowNewsletter }}
<script>
  (function() {
    var DISMISS_KEY = 'newsletter-dismissed';
    var newsletterCol = document.getElementById('newsletter-col');
    if (!newsletterCol) return;

    // hide removes the widget from the DOM without persisting anything.
    // Used when this browser's localStorage says we already dismissed in a
    // past session — the server has already told us .ShowNewsletter is true
    // (no DB row), so we deliberately do NOT re-POST /newsletter/dismiss
    // here: that would clobber a 'subscribed' row created from another
    // device after this localStorage entry was set.
    function hide() {
      newsletterCol.remove();
    }

    // dismiss is the user-initiated path. Persists both locally and (for
    // logged-in users) server-side so the widget stays hidden on all their
    // devices.
    function dismiss() {
      hide();
      try { localStorage.setItem(DISMISS_KEY, '1'); } catch (e) {}
      fetch('/newsletter/dismiss', { method: 'POST', credentials: 'same-origin' })
        .catch(function () { /* localStorage is the fallback */ });
    }

    try {
      if (localStorage.getItem(DISMISS_KEY) === '1') {
        hide();
        return;
      }
    } catch (e) { /* storage disabled; keep widget visible */ }

    newsletterCol.addEventListener('click', function(e) {
      if (e.target.closest('[data-newsletter-dismiss]')) dismiss();
    });
  })();
</script>
{{ end }}
{{ end }}