warpbox-dev/backend/templates/pages/download.html

{{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}}
        {{$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}}
          {{if $single}}
            {{$first := index .Data.Files 0}}
            <a class="button button-primary button-wide" href="{{$first.DownloadURL}}" download="{{$first.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>
          {{else}}
            <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}}
        {{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">
                <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" /></svg>
                <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">
                <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" /></svg>
                <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" 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 data-react-url="{{.ReactURL}}" data-reacted="{{if .Reacted}}true{{else}}false{{end}}">
                <a class="file-open" href="{{.DownloadURL}}?inline=1"{{if not $single}} target="_blank" rel="noopener noreferrer"{{end}} aria-label="Open {{.Name}}">
                  <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}} · {{.ContentType}}</small>
                  </span>
                  <span class="file-type">{{.ContentType}}</span>
                  <span class="file-size">{{.Size}}</span>
                </a>
                {{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">
                        <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>
        </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">
                  <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}}