{{define "home.html"}}{{template "base" .}}{{end}}

{{define "content"}}
<section class="upload-view" aria-labelledby="upload-title">
  <div class="hero-copy">
    {{if .CurrentUser}}
    <p class="hero-eyebrow">Welcome back, {{.CurrentUser.Username}}</p>
    {{else}}
    <p class="hero-eyebrow">Welcome</p>
    {{end}}
  </div>

  <form class="upload-grid" id="upload-form" action="/api/v1/upload" method="post" enctype="multipart/form-data" data-max-upload-bytes="{{.Data.MaxUploadBytes}}" data-max-upload-label="{{.Data.MaxUploadSize}}">
    <div class="card upload-main">
      <div class="card-content">
        {{if .CurrentUser}}
        <h1 id="upload-title">Drop it. Share it.</h1>
        <p class="upload-subtitle">{{.Data.LimitSummary}}</p>
        {{else}}
        <h1 id="upload-title">Send a file. Get a link.</h1>
        <p class="upload-subtitle">Fast, private transfers that expire on your terms.</p>
        {{end}}
        <label class="drop-zone" for="file-input">
          <span class="drop-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M12 16V4m0 0 4 4m-4-4-4 4M5 20h14" /></svg>
          </span>
          <span class="drop-title">Drop files to upload</span>
          <span class="drop-copy">or click to browse</span>
          <span class="drop-meta">Max file size: {{.Data.MaxUploadSize}} · {{.Data.LimitSummary}}</span>
          <input id="file-input" name="file" type="file" multiple>
        </label>

        <div class="upload-progress" id="upload-progress" hidden>
          <div class="progress-row">
            <span>Uploading</span>
            <span id="upload-status">Preparing...</span>
          </div>
          <div class="progress"><span id="total-progress-bar"></span></div>
        </div>
        <div class="result-list upload-queue" id="upload-queue" hidden></div>
      </div>
    </div>

    <div class="card upload-options">
      <div class="card-content">
        <h2 class="options-title">Upload options</h2>
        <div class="option-grid">
          {{if .CurrentUser}}
          <label>
            <span>Collection</span>
            <select name="collection_id">
              <option value="">Unsorted</option>
              {{range .Data.Collections}}<option value="{{.ID}}">{{.Name}}</option>{{end}}
            </select>
          </label>
          {{end}}
          <label>
            <span>Expires in</span>
            <select name="expires_minutes" data-expiry-select>
              {{range .Data.ExpiryOptions}}<option value="{{.Minutes}}"{{if eq .Minutes $.Data.DefaultExpiryMinutes}} selected{{end}}>{{.Label}}</option>{{end}}
            </select>
          </label>
          <label>
            <span>Max downloads</span>
            <input type="number" name="max_downloads" min="1" placeholder="Unlimited">
          </label>
          <label>
            <span>Password</span>
            <input type="password" name="password" autocomplete="new-password" placeholder="Optional">
          </label>
          <label class="checkbox-field">
            <input type="checkbox" name="obfuscate_metadata">
            <span>Hide file names/count until unlocked</span>
          </label>
        </div>

        <div class="form-footer">
          <p id="file-summary">Choose one or more files to begin.</p>
          <button class="button button-outline install-pwa-button" type="button" data-install-pwa hidden>Install Warpbox</button>
          <button class="button button-primary" type="submit">Upload files</button>
          <button class="button button-danger upload-new-button" type="button" id="new-upload" hidden>New upload</button>
        </div>
      </div>
    </div>
  </form>

  <section class="upload-result card" id="upload-result" hidden aria-live="polite">
    <div class="card-content">
      <div class="result-header">
        <div>
          <div class="result-title">
            <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M20 6 9 17l-5-5" /></svg>
            <span>Upload complete</span>
          </div>
          <p id="result-meta"></p>
        </div>
        <div class="result-actions">
          <button class="button button-outline" type="button" id="copy-url">Copy URL</button>
          <a class="button button-primary" id="open-box" href="/">Open box</a>
        </div>
      </div>
      <div class="result-list" id="result-list"></div>
      <p class="manage-link" id="manage-link" hidden>
        <span>Keep this private:</span>
        <a href="/" target="_blank" rel="noopener noreferrer">Manage or delete this upload</a>
      </p>
    </div>
  </section>
</section>
{{end}}