{{define "head"}}
{{/* Drag and drop only. Everything the drop zone does, the form below
     it already does with scripting off — drop.js fills that same file
     input and submits that same form, so there is one route, one CSRF
     check and one code path either way.

     This moved here with the form it decorates. It used to sit on the
     sheet list, which is where the import form used to be. */}}
<script defer src="{{asset "static/drop.js"}}"></script>
{{end}}

{{define "content"}}
<header rst-page-header>
<div rst-page-header-titles>
<h1>Import a spreadsheet</h1>
{{/* The limits are stated BEFORE the import, not discovered after it.
     Import reads one worksheet (xlsx.Import), and a workbook with
     three of them would otherwise arrive looking whole — the quiet
     kind of wrong PRODUCT.md's first principle forbids.

     They are a subhead here rather than a hint under the field
     because this page has the room the dropdown they nearly went in
     did not, and because drop.js overwrites the hint to speak about
     a drop — which would take the file limits down with it. */}}
<p rst-page-header-sub>Excel .xlsx or .xlsm, up to 20 MB. The first
worksheet is imported.</p>
</div>
</header>

{{if .Data.Error}}
{{/* A refusal renders HERE, on the page holding the form, rather than
     back on the sheet list. The list is not where the person is and
     no longer carries a form to try again with. */}}
<div rst-callout rst-tone="negative">
<div rst-callout-body>
<p>{{.Data.Error}}</p>
</div>
</div>
{{end}}

<form rst-form method="post" action="/sheets/import" enctype="multipart/form-data">
<div data-drop>
<div rst-field-row>
<div rst-field>
<label rst-field-label for="file">Choose a file</label>
<input rst-input id="file" name="file" type="file" accept=".xlsx,.xlsm">
<p rst-field-hint data-drop-hint>You can also drag a file onto this box.</p>
</div>
<button rst-btn="primary" type="submit">Import</button>
</div>
</div>
</form>
{{end}}