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

{{define "content"}}
<section class="download-view download-view-wide" aria-labelledby="download-title">
  <div class="card download-card">
    <div class="card-content">
      <div class="file-emblem" aria-hidden="true">
        <span class="svg-icon svg-icon-document"></span>
      </div>
      <h1 id="download-title">{{if .Data.Locked}}Protected box{{else}}Box: {{.Data.Box.ID}} ({{len .Data.Files}} file{{if ne (len .Data.Files) 1}}s{{end}}){{end}}</h1>
      {{if .Data.Locked}}<p class="download-subtitle">Bucket id: {{.Data.Box.ID}}</p>{{end}}

      {{if .Data.Locked}}
        <form class="unlock-form" action="/d/{{.Data.Box.ID}}/unlock" method="post">
          <label>
            <span>Password</span>
            <input type="password" name="password" autocomplete="current-password" required>
          </label>
          <button class="button button-primary" type="submit">Unlock box</button>
        </form>
        {{if .Data.Obfuscated}}
          <p class="download-subtitle">File names, counts, and previews are hidden until the password is entered.</p>
        {{end}}
      {{end}}

      {{if .Data.Files}}
        {{$processing := false}}{{range .Data.Files}}{{if .Processing}}{{$processing = true}}{{end}}{{end}}
        {{$failed := false}}{{range .Data.Files}}{{if .Failed}}{{$failed = true}}{{end}}{{end}}
        {{if $processing}}
          <div class="upload-processing-alert" role="status">
            Some files are still processing. You can share this link now, but processing files will become available shortly.
          </div>
        {{end}}
        {{if $failed}}
          <div class="upload-processing-alert upload-processing-alert-error" role="alert">
            Upload processing failed for one or more files. The original upload could not be finalized by the storage backend.
          </div>
        {{end}}
        {{$single := eq (len .Data.Files) 1}}
        <div class="badge-row">
          <span class="badge badge-expiry">Expires {{.Data.ExpiresLabel}}</span>
          {{if .Data.MaxDownloads}}<span class="badge">{{.Data.DownloadCount}} / {{.Data.MaxDownloads}} downloads</span>{{end}}
        </div>

        {{if not .Data.Locked}}
          <button class="button button-outline button-wide download-share-button" type="button" data-share-box data-share-url="/d/{{.Data.Box.ID}}" data-share-title="{{if .Data.Locked}}Protected Warpbox box{{else}}Warpbox box {{.Data.Box.ID}}{{end}}" data-share-text="Shared files on Warpbox">
            <span class="svg-icon svg-icon-share" aria-hidden="true"></span>
            <span data-share-box-label>Share</span>
          </button>
          {{if or $processing $failed}}
            <span class="button button-outline button-wide is-disabled" aria-disabled="true">
              {{if $failed}}Download unavailable{{else}}Files processing{{end}}
            </span>
          {{else}}
          {{if $single}}
            {{$first := index .Data.Files 0}}
            <a class="button button-primary button-wide" href="{{$first.DownloadURL}}" download="{{$first.Name}}">
              <span class="svg-icon svg-icon-download" aria-hidden="true"></span>
              Download
            </a>
          {{else}}
            <a class="button button-primary button-wide" href="{{.Data.ZipURL}}">
              <span class="svg-icon svg-icon-download" aria-hidden="true"></span>
              Download zip
            </a>
          {{end}}
          {{end}}
        {{end}}

        <div class="file-browser-window" data-file-browser-window>
          <div class="file-browser-titlebar">
            <div>
              <strong>File Browser</strong>
              <span>{{len .Data.Files}} item{{if ne (len .Data.Files) 1}}s{{end}}</span>
            </div>
            <div class="file-browser-window-actions" aria-hidden="true">
              <span></span><span></span><span></span>
            </div>
          </div>
          <div class="file-browser-toolbar" aria-label="File view options">
            <div class="view-toolbar">
              <button class="button button-outline icon-button" type="button" data-view-button="list" aria-pressed="false" aria-label="List view" title="List view">
                <span class="svg-icon svg-icon-list" aria-hidden="true"></span>
                <span class="sr-only">List view</span>
              </button>
              <button class="button button-outline icon-button is-active" type="button" data-view-button="thumbs" aria-pressed="true" aria-label="Icon view" title="Icon view">
                <span class="svg-icon svg-icon-grid" aria-hidden="true"></span>
                <span class="sr-only">Icon view</span>
              </button>
            </div>
          </div>
          <div class="file-browser-head" aria-hidden="true">
            <span>Name</span>
            <span>Type</span>
            <span>Size</span>
          </div>
          <div class="download-list file-browser is-thumbs" data-file-browser>
            {{range .Data.Files}}
              <article class="download-item file-card {{if .Processing}}is-processing{{end}} {{if .Failed}}is-failed{{end}}" data-kind="{{.PreviewKind}}" {{if and (not .Processing) (not .Failed)}}data-file-context data-preview-url="{{.URL}}" data-view-url="{{.DownloadURL}}?inline=1" data-download-url="{{.DownloadURL}}"{{end}} data-file-name="{{.Name}}" data-reaction-card data-react-url="{{.ReactURL}}" data-reacted="{{if .Reacted}}true{{else}}false{{end}}">
                {{if or .Processing .Failed}}<div class="file-open" aria-label="{{.Name}} {{if .Failed}}failed processing{{else}}is processing{{end}}">{{else}}<a class="file-open" href="{{.DownloadURL}}?inline=1"{{if not $single}} target="_blank" rel="noopener noreferrer"{{end}} aria-label="Open {{.Name}}">{{end}}
                  <span class="file-media">
                    {{if .HasThumbnail}}
                      <img class="file-thumb" src="{{.ThumbnailURL}}" alt="" loading="lazy">
                    {{else}}
                      {{if .IconURL}}<img class="file-icon file-icon-standard" src="{{.IconURL}}" alt="" loading="lazy">{{end}}
                      {{if .IconRetroURL}}<img class="file-icon file-icon-retro" src="{{.IconRetroURL}}" alt="" loading="lazy">{{end}}
                    {{end}}
                  </span>
                  <span class="file-main">
                    <strong class="file-name" title="{{.Name}}">{{.Name}}</strong>
                    <small>{{.Size}} · {{if .Failed}}Failed{{else if .Processing}}Processing{{else}}{{.ContentType}}{{end}}</small>
                    {{if .Failed}}<small class="file-error">{{.Error}}</small>{{end}}
                  </span>
                  <span class="file-type">{{if .Failed}}Failed{{else if .Processing}}Processing{{else}}{{.ContentType}}{{end}}</span>
                  <span class="file-size">{{.Size}}</span>
                {{if or .Processing .Failed}}</div>{{else}}</a>{{end}}
                {{if not $.Data.Locked}}
                  <div class="file-reaction-dock" data-reaction-dock>
                    <div class="file-reactions" data-reaction-list>
                      {{range .Reactions}}
                        <button class="reaction-pill {{if not .Visible}}is-hidden-summary{{end}}" type="button" title="{{.Label}}" data-reaction-pill data-reaction-emoji-id="{{.EmojiID}}" data-reaction-label="{{.Label}}" data-reaction-url="{{.URL}}" data-reaction-count="{{.Count}}" aria-label="{{if $.Data.Locked}}Reaction{{else}}React with {{.Label}}{{end}}">
                          <img src="{{.URL}}" alt="{{.Label}}" loading="lazy">
                          <span>{{.Count}}</span>
                        </button>
                      {{end}}
                      {{if .ReactionMore}}
                        <button class="reaction-more" type="button" data-reaction-more aria-label="Show all reactions">+{{.ReactionMore}}</button>
                      {{end}}
                    </div>
                    {{if not .Reacted}}
                      <button class="reaction-button" type="button" data-reaction-button data-react-url="{{.ReactURL}}" aria-label="React to {{.Name}}" title="React">
                        <span class="svg-icon svg-icon-emoji" aria-hidden="true"></span>
                      </button>
                    {{end}}
                  </div>
                {{end}}
              </article>
            {{end}}
          </div>
        </div>
        {{if not .Data.Locked}}
          <div class="reaction-picker" data-reaction-picker hidden>
            <div class="reaction-picker-panel" role="dialog" aria-modal="false" aria-label="Choose a reaction">
              <div class="reaction-picker-head">
                <strong>React</strong>
                <button class="button button-ghost reaction-picker-close" type="button" data-reaction-close aria-label="Close reaction picker">Close</button>
              </div>
              <div class="reaction-existing" data-reaction-existing hidden>
                <small>Existing reactions</small>
                <div class="reaction-existing-list" data-reaction-existing-list></div>
              </div>
              <p class="reaction-readonly-note" data-reaction-readonly hidden>You already reacted to this file.</p>
              <div class="reaction-picker-tabs" role="tablist" aria-label="Emoji themes">
                {{range $index, $tab := .Data.EmojiTabs}}
                  <button type="button" class="reaction-tab {{if eq $index 0}}is-active{{end}}" data-reaction-tab="{{$tab.ID}}" role="tab" aria-selected="{{if eq $index 0}}true{{else}}false{{end}}">{{$tab.Label}}</button>
                {{end}}
              </div>
              <label class="reaction-search">
                <span class="sr-only">Search emoji</span>
                <input type="search" data-reaction-search placeholder="Search emoji">
              </label>
              <div class="reaction-grid-wrap">
                {{range $index, $tab := .Data.EmojiTabs}}
                  <div class="reaction-grid {{if eq $index 0}}is-active{{end}}" data-reaction-panel="{{$tab.ID}}" role="tabpanel">
                    {{range $tab.Emojis}}
                      <button class="reaction-emoji" type="button" data-emoji-id="{{.ID}}" data-emoji-label="{{.Label}}" title="{{.Label}}" aria-label="{{.Label}}">
                        <img src="{{.URL}}" alt="" loading="lazy">
                      </button>
                    {{end}}
                  </div>
                {{end}}
              </div>
            </div>
          </div>
          <div class="context-menu" data-file-context-menu role="menu" aria-label="File actions" hidden>
            <div class="context-menu-top">
              <small>File actions</small>
              <div class="context-menu-icons" aria-label="Quick actions">
                <button type="button" role="menuitem" data-context-action="preview" title="Open preview" aria-label="Open preview">
                  <span class="svg-icon svg-icon-open" aria-hidden="true"></span>
                </button>
                <button type="button" role="menuitem" data-context-action="copy-preview" title="Copy preview URL" aria-label="Copy preview URL">
                  <span class="svg-icon svg-icon-copy" aria-hidden="true"></span>
                  <span data-context-label class="sr-only">Copy</span>
                </button>
              </div>
            </div>
            <hr>
            <button type="button" role="menuitem" data-context-action="preview">
              <span class="svg-icon svg-icon-eye" aria-hidden="true"></span>
              <span data-context-label>Preview</span>
            </button>
            <button type="button" role="menuitem" data-context-action="view">
              <span class="svg-icon svg-icon-open" aria-hidden="true"></span>
              <span data-context-label>View raw file</span>
            </button>
            <hr>
            <button type="button" role="menuitem" data-context-action="copy-preview">
              <span class="svg-icon svg-icon-copy" aria-hidden="true"></span>
              <span data-context-label>Copy Preview</span>
            </button>
            <button type="button" role="menuitem" data-context-action="copy-download">
              <span class="svg-icon svg-icon-copy" aria-hidden="true"></span>
              <span data-context-label>Copy Download</span>
            </button>
            <hr>
            <button type="button" role="menuitem" data-context-action="download">
              <span class="svg-icon svg-icon-download" aria-hidden="true"></span>
              <span data-context-label>Download</span>
            </button>
          </div>
        {{end}}
      {{else if not .Data.Locked}}
        <p class="download-subtitle">{{.Data.ExpiresLabel}}</p>
      {{end}}
    </div>
  </div>
</section>
{{end}}