{{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">
        <svg viewBox="0 0 24 24" role="img" focusable="false"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" /><path d="M14 2v6h6" /></svg>
      </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}}
        <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}}
          <a class="button button-primary button-wide" href="{{.Data.ZipURL}}">
            <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M12 3v12m0 0 4-4m-4 4-4-4M5 21h14" /></svg>
            Download zip
          </a>
        {{end}}

        <div class="view-toolbar" aria-label="File view options">
          <button class="button button-outline is-active" type="button" data-view-button="list">List</button>
          <button class="button button-outline" type="button" data-view-button="thumbs">Thumbnails</button>
          <button class="button button-outline" type="button" data-preview-images>Preview images only</button>
        </div>

        <div class="download-list file-browser is-list" data-file-browser>
          {{range .Data.Files}}
            <article class="download-item file-card" data-kind="{{.PreviewKind}}" data-file-context data-preview-url="{{.URL}}" data-view-url="{{.DownloadURL}}?inline=1" data-download-url="{{.DownloadURL}}" data-file-name="{{.Name}}" data-reaction-card>
              <a class="thumb-link" href="{{.DownloadURL}}?inline=1" aria-label="View {{.Name}}">
                <img src="{{.ThumbnailURL}}" alt="" loading="lazy">
              </a>
              <a class="file-main" href="{{.DownloadURL}}?inline=1">
                <strong class="file-name" title="{{.Name}}">{{.Name}}</strong>
                <small>{{.Size}} · {{.ContentType}}</small>
              </a>
              {{if not $.Data.Locked}}
                <div class="file-actions">
                  <a class="button button-outline preview-action" href="{{.DownloadURL}}?inline=1" target="_blank" rel="noopener noreferrer" data-preview-action data-view-label="View" data-copy-label="Copy link">
                    <svg data-preview-view-icon viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6Z" /><circle cx="12" cy="12" r="3" /></svg>
                    <svg data-preview-copy-icon viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true" hidden><rect width="14" height="14" x="8" y="8" rx="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></svg>
                    <span data-preview-label>View</span>
                  </a>
                  <a class="button button-outline" href="{{.DownloadURL}}" download="{{.Name}}">
                    <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M12 3v12m0 0 4-4m-4 4-4-4M5 21h14" /></svg>
                    Download
                  </a>
                </div>
                <div class="file-reaction-dock" data-reaction-dock>
                  <div class="file-reactions" data-reaction-list>
                    {{range .Reactions}}
                      <span class="reaction-pill" title="{{.Label}}">
                        <img src="{{.URL}}" alt="{{.Label}}" loading="lazy">
                        <span>{{.Count}}</span>
                      </span>
                    {{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">
                      <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M12 21a9 9 0 1 0-9-9 9 9 0 0 0 9 9Z" /><path d="M8 14s1.4 2 4 2 4-2 4-2" /><path d="M9 9h.01M15 9h.01" /></svg>
                    </button>
                  {{end}}
                </div>
              {{end}}
            </article>
          {{end}}
        </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-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">
                  <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg>
                </button>
                <button type="button" role="menuitem" data-context-action="copy-preview" title="Copy preview URL" aria-label="Copy preview URL">
                  <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></svg>
                  <span data-context-label class="sr-only">Copy</span>
                </button>
              </div>
            </div>
            <hr>
            <button type="button" role="menuitem" data-context-action="preview">
              <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6Z" /><circle cx="12" cy="12" r="3" /></svg>
              <span data-context-label>Preview</span>
            </button>
            <button type="button" role="menuitem" data-context-action="view">
              <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg>
              <span data-context-label>View raw file</span>
            </button>
            <hr>
            <button type="button" role="menuitem" data-context-action="copy-preview">
              <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></svg>
              <span data-context-label>Copy Preview</span>
            </button>
            <button type="button" role="menuitem" data-context-action="copy-download">
              <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></svg>
              <span data-context-label>Copy Download</span>
            </button>
            <hr>
            <button type="button" role="menuitem" data-context-action="download">
              <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M12 3v12m0 0 4-4m-4 4-4-4M5 21h14" /></svg>
              <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}}