{{ define "title" }}timeline{{ 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="tightly-knit social coding" />
{{ end }}

{{ define "mainLayout" }}
<div class="flex-grow">
    <div class="max-w-screen-xl mx-auto flex flex-col gap-4">
        <main>{{ block "content" . }}{{ end }}</main>
    </div>
</div>
{{ end }}

{{ define "content" }}
{{/*
  Single responsive grid. Every fragment is rendered once, with CSS alone
  handling the mobile → desktop reflow. Only trending has two variants
  (horizontal scroll for mobile, vertical sidebar for desktop); both are
  present in the DOM and toggled via utility classes.

  Desktop grid (lg+):
      row 1: [ gfi-banner  (col-span-2) ] [ newsletter (col 3) ]
      row 2: [ timeline    (col-span-2) ] [ trendingSidebar (col 3) ]

  If the newsletter is dismissed, the gfi-banner widens to col-span-3
  (see the small init script at the bottom of this block).
*/}}
<div id="timeline-grid"
     class="flex flex-col gap-4 lg:grid lg:grid-cols-3 lg:gap-x-2 lg:gap-y-6">

    <div id="newsletter-col"
         class="order-1 lg:order-none lg:col-start-3 lg:row-start-1 lg:pl-8">
        {{ template "timeline/fragments/newsletterWidget" . }}
    </div>

    <div id="gfi-banner"
         class="order-2 lg:order-none lg:col-span-2 lg:row-start-1">
        {{ template "timeline/fragments/goodfirstissues" . }}
    </div>

    <div class="order-4 lg:order-none lg:col-span-2 lg:row-start-2">
        {{ template "timeline/fragments/timeline" . }}
    </div>

    <div class="order-3 lg:hidden">
        {{ template "timeline/fragments/trending" . }}
    </div>

    <div class="hidden lg:flex lg:flex-col gap-6 lg:pl-8 lg:col-start-3 lg:row-start-2">
        {{ template "timeline/fragments/trendingSidebar" . }}
    </div>
</div>

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

    function widenGfi() {
      if (!gfi) return;
      gfi.classList.remove('lg:col-span-2');
      gfi.classList.add('lg:col-span-3', 'lg:max-w-4xl', 'lg:mx-auto');
    }

    function dismiss() {
      newsletterCol.remove();
      widenGfi();
      try { localStorage.setItem(DISMISS_KEY, '1'); } catch (e) {}
    }

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

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