Paste view: collapsible stats pill under title (#17)

web/templates/paste.html

@@ -2,17 +2,36 @@
 {{template "topbar" .}}
 <div class="page">
   <div class="float">
-    <div class="meta-bar">
+    <div class="paste-title-bar">
       <h1>{{if .Title}}{{.Title}}{{else}}Untitled paste{{end}}</h1>
-      <span class="slug">/{{.ID}}</span>
-      {{if .Language}}<span class="tag">{{.Language}}</span>{{end}}
-      {{if .ExpiresAt}}<span class="tag">expires in {{.ExpiresIn}}</span>{{end}}
+      <span class="slug">/{{if .CustomSlug}}{{.CustomSlug}}{{else}}{{.ID}}{{end}}</span>
       <div class="spacer"></div>
       <a class="iconbtn" href="/raw/{{.ID}}">raw</a>
       <a class="iconbtn" href="#" onclick="copyContent(); return false;">copy</a>
       {{if .DeletionToken}}<a class="iconbtn danger" href="#" onclick="redeem('{{.DeletionToken}}'); return false;">delete</a>{{end}}
     </div>
   </div>
+  <div class="float">
+    <div class="stats-pill" id="stats-pill">
+      <button type="button" class="stats-head" id="stats-toggle" aria-expanded="false" onclick="toggleStats()">
+        <svg class="stats-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>
+        <span class="stats-summary">{{.StatsSummary}}</span>
+      </button>
+      <div class="stats-body" id="stats-body" hidden>
+        <div class="stats-grid">
+          <span class="stats-k">Language</span><span class="stats-v">{{if .Language}}{{.Language}}{{else}}text{{end}}</span>
+          <span class="stats-k">Size</span><span class="stats-v">{{.SizeHuman}} ({{.LineCount}} lines)</span>
+          <span class="stats-k">Views</span><span class="stats-v">{{.ViewCount}}</span>
+          <span class="stats-k">Created</span><span class="stats-v">{{.CreatedAgo}}</span>
+          {{if .ExpiresAt}}<span class="stats-k">Expires</span><span class="stats-v">in {{.ExpiresIn}}</span>{{end}}
+          <span class="stats-k">Password</span><span class="stats-v">{{if .HasPassword}}protected{{else}}none{{end}}</span>
+          {{if .BurnAfterRead}}<span class="stats-k">Burn</span><span class="stats-v">burn after read</span>{{end}}
+          {{if .CustomSlug}}<span class="stats-k">Custom URL</span><span class="stats-v">/{{.CustomSlug}}</span>{{end}}
+          <span class="stats-k">Visibility</span><span class="stats-v">{{.Visibility}}</span>
+        </div>
+      </div>
+    </div>
+  </div>
   {{if .JustCreated}}
   <div class="float">
     <div class="created-banner" style="display:block">
@@ -22,13 +41,7 @@
   </div>
   {{end}}
   <div class="float">
-    <div class="code-head"><span class="dot"></span> {{.LineCount}} lines · {{.SizeBytes}} bytes</div>
     <div class="code"><div class="gutter">{{.Gutter}}</div><div class="codebody" id="codebody">{{.ContentHTML}}</div></div>
-    <div class="footnote">
-      <span>Created {{.CreatedAgo}}</span>
-      <span>{{.ViewCount}} views</span>
-      <span>{{.Visibility}}</span>
-    </div>
   </div>
 </div>
 <input type="hidden" id="raw-content" value="{{.ContentAttr}}">
@@ -41,6 +54,15 @@ function toast(msg) {
   clearTimeout(t._h);
   t._h = setTimeout(() => t.classList.remove('show'), 2000);
 }
+function toggleStats() {
+  const body = document.getElementById('stats-body');
+  const pill = document.getElementById('stats-pill');
+  const btn = document.getElementById('stats-toggle');
+  const open = body.hidden;
+  body.hidden = !open;
+  pill.classList.toggle('open', open);
+  btn.setAttribute('aria-expanded', open ? 'true' : 'false');
+}
 function copyContent() {
   navigator.clipboard.writeText(document.getElementById('raw-content').value);
   toast('Copied');