{{define "content"}}
{{if .Stale}}
<p class="notice">Your login is no longer valid, that token has been removed. You have been logged out.</p>
{{end}}

<form id="upload" class="card" method="post" action="{{.Base}}api/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>Custom name <em>({{if .AllowVanity}}optional{{else}}needs a token{{end}})</em></span>
      <input type="text" name="vanity" id="vanity" placeholder="auto" autocomplete="off"
             pattern="[A-Za-z0-9][A-Za-z0-9._-]{1,63}">
    </label>
  </div>

  <details class="onceoff">
    <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>
      <input type="password" name="token" autocomplete="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>Custom 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}}api/upload</code></pre>
</section>
{{end}}