{{/* The verbs live in the top bar; the page is the list.

     This screen used to open with two stacked forms — a title field
     with a Create button, then a dashed drop zone with a file input and
     four lines of limits — and the sheets themselves began below the
     fold of both. A list of sheets should be a list of sheets.

     Create is a button beside the account menu now, and makes a sheet
     called "Untitled sheet" in one click; the name is fixed afterwards
     by renaming it in the top bar of the sheet itself, which is what
     handlers_rename.go is for. Import moved to a page of its own at
     /sheets/import — see handleImportPage for why a page and not an
     item in the File menu. */}}
{{define "head"}}
{{/* Drag and drop, and only that. The overlay at the foot of this file
     is hidden until a file is dragged over the window, and every drop
     ends as a submit of the same form /sheets/import serves — same
     route, same CSRF check, same job.

     With scripting off it never appears and the Import link in the top
     bar is the entire feature. That is what AGENTS.md's "every
     drag-only affordance needs a menu equivalent" asks for: the link
     is the floor, and the drag is a shortcut to it. */}}
<script defer src="{{asset "static/drop.js"}}"></script>
{{end}}

{{/* Import and Create are the bar's page actions (handleSheetList builds
     them as estilo chrome.Actions): buttons beside the account at wide
     widths, rows in the Menu sheet below 800px. Create is a POST in both
     places. They used to be an extra block in the rastrillo tail, whose
     buttons were taller than the bar and grew it from 45px to 51px. */}}

{{define "content"}}
<header rst-page-header>
<div rst-page-header-titles>
{{/* "All sheets", not "Your sheets". The old heading was wrong twice:
     it repeated the brand in the bar directly above it, and it claimed
     ownership the line underneath immediately contradicts — everyone on
     the instance opens every sheet here, so almost none of these are
     yours. A heading its own subtitle corrects is worse than none. */}}
<h1>All sheets</h1>
<p rst-page-header-sub>Everyone on this instance can open every sheet here.</p>
</div>
</header>

{{if .Data.Sheets}}
<ul rst-list data-sheet-list>
{{range .Data.Sheets}}
<li rst-lrow>
{{/* The thumbnail. Built from the SHAPE of the sheet — which cells
     exist, and what colour they are — and never from a cell's
     contents, which is why it cannot leak one. aria-hidden, because
     the link beside it already says which sheet this is and a
     screen reader gains nothing from "image" twice.

     The same 26x34 slot in the same place as the Docs app's, by
     agreement, so the two file lists read as one product. */}}
<span data-preview-slot>{{.Preview}}</span>
<div rst-row-main>
<a href="/sheets/{{.ID}}">{{.Title}}</a>
<span rst-row-sub>Last changed {{.UpdatedAt.Format "2 Jan 2006, 15:04"}}</span>
</div>
</li>
{{end}}
</ul>
{{else}}
{{/* The empty state points at the two controls in the top bar. It
     used to say "make one above", which was true when the form was
     directly above it and would now be a sentence pointing at a
     header. An empty screen is the one place in a product that has
     nothing to do but explain what to do next. */}}
<div rst-empty>
<p rst-empty-title>No sheets yet</p>
<p rst-empty-body>Create one from the top bar and it opens with a blank
grid you can type into straight away, or
<a href="/sheets/import">import an Excel file</a> to start from what you
already have.</p>
</div>
{{end}}

{{/* The drop target for the whole page.

     This screen used to carry a dashed box you could drop a file on,
     and taking the box away took the drop with it — so the drop comes
     back without the box. It is `hidden` at rest, contributes nothing
     to the layout and nothing to the tab order, and drop.js reveals it
     only while a drag carrying files is actually over the window. An
     affordance that appears exactly when it applies beats a permanent
     rectangle explaining that it exists.

     It is the same form as the one on /sheets/import, deliberately:
     drop.js fills this file input and submits this form, so a drop
     from here is the ordinary multipart POST and there is no second
     code path on the server. The file field is visible inside the
     panel rather than hidden, because a refused drop ("drop one file
     at a time") needs something to recover with that is not the back
     button.

     `hidden` is load-bearing and is asserted in a test: rst-modal-overlay
     sets display:flex, an author rule beats the UA's [hidden], and
     without the reinstating rule in sheets.css this would cover the
     list permanently. */}}
<form data-drop data-drop-page hidden rst-modal-overlay
      method="post" action="/sheets/import" enctype="multipart/form-data">
<div rst-modal-panel>
<div data-drop-page-body>
<p data-drop-page-title>Drop it to import</p>
{{/* The same limits /sheets/import states, and stated before the
     import for the same reason: one worksheet is read, and a
     three-sheet workbook would otherwise arrive looking whole. This
     is also the line drop.js rewrites to refuse a drop, which is
     why it is a sentence and not a list. */}}
<p rst-field-hint data-drop-hint>Excel .xlsx or .xlsm, up to 20 MB. The
first worksheet is imported.</p>
{{/* Chooser and submit, so a refused drop has something to recover
     with, and so the panel is a working form rather than a picture
     of one. They are hidden while a drag is actually over the window
     — see [data-drop-page-recover] in sheets.css — because offering
     a file picker to somebody mid-drag is a second way to do the
     thing they are already doing.

     They carry no tabindex, and its absence is a fix rather than an
     omission. Both used to carry tabindex="-1", to "keep them out of
     the tab order while the overlay is up" — which is exactly backwards.
     The overlay stays up after a REFUSED drop precisely so these two
     controls can be used, and a negative tabindex meant a keyboard user
     tabbed straight past the recovery form into the list behind it.
     The other two states never needed the help: `hidden` on the form
     takes the whole subtree out of the tab order at rest, and
     [data-drop-page-recover] is display:none under [data-drop-over],
     which does the same mid-drag. So it was redundant where it was
     harmless and harmful where it was not. */}}
<div data-drop-page-recover>
<input rst-input name="file" type="file" accept=".xlsx,.xlsm"
       aria-label="Spreadsheet to import">
<button rst-btn="primary" type="submit">Import</button>
</div>
</div>
</div>
</form>
{{end}}