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

{{define "content"}}
<section class="app-shell admin-shell" aria-labelledby="admin-box-edit-title">
  <aside class="app-sidebar">
    <nav class="sidebar-nav">
      <a class="sidebar-link" href="/admin">{{template "icon-dashboard" .}}<span>Overview</span></a>
      <a class="sidebar-link is-active" href="/admin/files">{{template "icon-folder" .}}<span>Files</span></a>
      <a class="sidebar-link" href="/admin/users">{{template "icon-user-circle" .}}<span>Users</span></a>
      <a class="sidebar-link" href="/admin/settings">{{template "icon-settings" .}}<span>Settings</span></a>
      <a class="sidebar-link" href="/admin/storage">{{template "icon-database" .}}<span>Storage</span></a>
      <a class="sidebar-link" href="/admin/logs">{{template "icon-database" .}}<span>Logs</span></a>
      <a class="sidebar-link" href="/admin/bans">{{template "icon-settings" .}}<span>Bans</span></a>
    </nav>
    <hr class="sidebar-sep">
    <nav class="sidebar-nav">
      <a class="sidebar-link" href="/app">{{template "icon-home-simple" .}}<span>My Files</span></a>
    </nav>
    <hr class="sidebar-sep">
    <form class="sidebar-logout" action="/admin/logout" method="post">
      <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
      <button class="button button-outline" type="submit">{{template "icon-log-out" .}}<span>Sign out</span></button>
    </form>
  </aside>

  <div class="app-main">
    <div class="admin-header">
      <div>
        <p class="kicker">Operator console · <a href="/admin/files">Files</a></p>
        <h1 id="admin-box-edit-title">{{.Data.PageTitle}}</h1>
        <p class="muted-copy">Box <code>{{.Data.Box.ID}}</code> · {{.Data.Box.Owner}}</p>
      </div>
      <a class="button button-outline" href="/admin/boxes/{{.Data.Box.ID}}/view">Open box</a>
    </div>

    {{if .Data.Notice}}<p class="form-success">{{.Data.Notice}}</p>{{end}}
    {{if .Data.Error}}<p class="form-error">{{.Data.Error}}</p>{{end}}

    <div class="card admin-table-card">
      <div class="card-content">
        <div class="table-header">
          <div>
            <h2>Box settings</h2>
            <p>Change expiration, download limit, and protection.</p>
          </div>
        </div>

        <dl class="manage-details">
          <div><dt>Created</dt><dd>{{.Data.Box.CreatedAt}}</dd></div>
          <div><dt>Files</dt><dd>{{.Data.Box.FileCount}}</dd></div>
          <div><dt>Total size</dt><dd>{{.Data.Box.TotalSize}}</dd></div>
          <div><dt>Downloads</dt><dd>{{.Data.Box.DownloadCount}}{{if .Data.Box.MaxDownloads}} / {{.Data.Box.MaxDownloads}}{{end}}</dd></div>
          <div><dt>Expires</dt><dd>{{.Data.Box.ExpiresLabel}}</dd></div>
          <div><dt>Storage backend</dt><dd>{{.Data.Box.BackendID}}</dd></div>
          <div><dt>Protected</dt><dd>{{if .Data.Box.Protected}}Yes{{else}}No{{end}}</dd></div>
        </dl>

        <form class="settings-form settings-form-narrow" action="/admin/boxes/{{.Data.Box.ID}}/edit" method="post">
          <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
          <label>
            <span>Expires at (UTC)</span>
            <input type="datetime-local" name="expires_at" value="{{.Data.Box.ExpiresInput}}">
          </label>
          <label class="checkbox-field">
            <input type="checkbox" name="never_expires" {{if .Data.Box.NeverExpires}}checked{{end}}>
            <span>Never expires (overrides the date above)</span>
          </label>
          <label>
            <span>Max downloads (0 = unlimited)</span>
            <input type="number" min="0" name="max_downloads" value="{{.Data.Box.MaxDownloads}}">
          </label>
          {{if .Data.Box.Protected}}
          <label class="checkbox-field">
            <input type="checkbox" name="remove_password">
            <span>Remove password protection</span>
          </label>
          {{end}}
          <button class="button button-primary" type="submit">Save changes</button>
        </form>
      </div>
    </div>

    <div class="card admin-table-card">
      <div class="card-content">
        <div class="table-header">
          <div>
            <h2>Files</h2>
            <p>Remove individual files from this box. Removing the last file deletes the box.</p>
          </div>
        </div>

        <div class="result-list">
          {{range .Data.Files}}
            <article class="download-item">
              {{if .HasPreview}}<a class="thumb-link" href="{{.DownloadURL}}?inline=1" target="_blank" rel="noopener noreferrer"><img src="{{.ThumbnailURL}}" alt="" loading="lazy"></a>{{end}}
              <a class="file-main" href="{{.DownloadURL}}?inline=1" target="_blank" rel="noopener noreferrer">
                <strong class="file-name" title="{{.Name}}">{{.Name}}</strong>
                <small>{{.Size}} · {{.ContentType}}</small>
              </a>
              <div class="file-actions">
                <a class="button button-outline button-sm" href="{{.DownloadURL}}" download="{{.Name}}">Download</a>
                <form action="/admin/boxes/{{$.Data.Box.ID}}/files/{{.ID}}/delete" method="post">
                  <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
                  <button class="button button-danger button-sm" type="submit">Remove</button>
                </form>
              </div>
            </article>
          {{else}}
            <p class="muted-copy">This box has no files.</p>
          {{end}}
        </div>
      </div>
    </div>

    <div class="card admin-table-card">
      <div class="card-content">
        <div class="table-header">
          <div>
            <h2>Danger zone</h2>
            <p>Permanently delete this box and all of its files.</p>
          </div>
          <form action="/admin/boxes/{{.Data.Box.ID}}/delete" method="post">
            <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
            <button class="button button-danger" type="submit">Delete box</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>
{{end}}