{{define "content"}}
{{if .Stale}}
<p class="notice">Your login is no longer valid. You have been logged out; log in again to carry on.</p>
{{end}}

<form id="upload" class="card" method="post" action="{{.Base}}upload"
      enctype="multipart/form-data" data-max-size="{{.MaxSizeBytes}}">

  {{- /* Field order is load-bearing: the server streams this body rather than
       spooling it, so every option and the token have to arrive before the
       file part does. The drop zone is lifted back to the top of the card with
       CSS order, which changes what is seen without changing what is sent. */}}

  <div class="row">
    <label class="field">
      <span>Expires in</span>
      <input type="text" name="expiry" id="expiry" placeholder="{{.ExpiryHint}}" autocomplete="off">
    </label>
    <label class="field">
      <span>Vanity name <em>({{if .AllowVanity}}optional{{else}}needs a token{{end}})</em></span>
      <input type="text" name="vanity" id="vanity" placeholder="auto" autocomplete="off"
             spellcheck="false" autocapitalize="off"
             pattern="[A-Za-z0-9][A-Za-z0-9._-]{1,63}">
    </label>
  </div>

  <details class="panel">
    <summary>Use a different token for this upload</summary>
    <p class="hint">
      Applies to this upload only and does not log you in.
      {{if not .User}}To keep a token for this browser, <a href="{{.Base}}login">log in</a> instead.{{end}}
    </p>
    <label class="field">
      <span>Token</span>
      {{- /* Plain text on purpose: this is pasted once, behind a collapsed
           panel, and a masked field only hides the typo. Keeping it out of
           the password family also stops the browser treating this form as a
           login and hunting for a username to fill in above. */}}
      <input type="text" name="token" autocomplete="off"
             spellcheck="false" autocapitalize="off">
    </label>
  </details>

  <div class="drop" id="drop">
    <input type="file" name="file" id="file" required>
    <p class="hint" id="drop-hint">Choose a file, or drop one here.</p>
  </div>

  <div class="progress" id="progress" hidden>
    <div class="bar"><div class="fill" id="bar-fill"></div></div>
    <p class="hint" id="progress-text"></p>
  </div>

  <button type="submit" id="submit">Upload</button>
  <p class="hint" id="error" hidden></p>
</form>

<section class="limits">
  <h2>Your limits</h2>
  <dl>
    <dt>Uploading as</dt><dd>{{if .User}}{{.User}}{{else}}<em>anonymous</em>{{end}}</dd>
    <dt>Maximum size</dt><dd>{{.MaxSize}}</dd>
    <dt>Longest lifetime</dt><dd>{{.MaxExpiry}}</dd>
    <dt>Default lifetime</dt><dd>{{.DefaultExpiry}}</dd>
    <dt>Vanity names</dt><dd>{{if .AllowVanity}}allowed{{else}}need a token{{end}}</dd>
  </dl>
  {{if not .User}}<p class="hint"><a href="{{.Base}}login">Log in</a> with a token to raise these.</p>{{end}}
</section>

<section class="cli">
  <h2>From the command line</h2>
  <pre><code>curl --data-binary @file.zip \
     -H 'Content-Disposition: attachment; filename="file.zip"' \
     -H 'Authorization: Bearer &lt;token&gt;' \
     -H 'Vanity: my-file' \
     -H 'Expiry: 3d' \
     {{.AbsBase}}upload</code></pre>
</section>
{{end}}