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

{{define "content"}}
<section class="app-shell admin-shell" aria-labelledby="admin-files-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</p>
        <h1 id="admin-files-title">{{.Data.PageTitle}}</h1>
        <p class="muted-copy">{{.Data.Total}} box{{if ne .Data.Total 1}}es{{end}} total.</p>
      </div>
    </div>

    <div class="card admin-table-card">
      <div class="card-content">
        <div class="table-header">
          <div>
            <h2>All uploads</h2>
            <p>Search, sort, and manage every box.</p>
          </div>
          <form class="inline-controls" method="get" action="/admin/files">
            <input type="hidden" name="sort" value="{{.Data.Sort}}">
            <input type="hidden" name="dir" value="{{.Data.Dir}}">
            <input type="hidden" name="per" value="{{.Data.PerPage}}">
            <label>
              <span class="sr-only">Search</span>
              <input type="search" name="q" value="{{.Data.Query}}" placeholder="Search box id or owner">
            </label>
            <button class="button button-primary button-sm" type="submit">Search</button>
            {{if .Data.Query}}<a class="button button-outline button-sm" href="/admin/files">Clear</a>{{end}}
          </form>
        </div>

        <div class="admin-table-wrap">
          <table class="admin-table">
            <thead>
              <tr>
                {{range .Data.Columns}}
                  <th><a class="sort-link {{if .Sorted}}is-sorted{{end}}" href="{{.Href}}">{{.Label}}{{if .Sorted}}<span class="sort-arrow" aria-hidden="true">{{if .Ascending}}▲{{else}}▼{{end}}</span>{{end}}</a></th>
                {{end}}
                <th>Status</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              {{range .Data.Boxes}}
                <tr>
                  <td><a href="/admin/boxes/{{.ID}}/edit"><code>{{.ID}}</code></a></td>
                  <td>{{.Owner}}</td>
                  <td>{{.FileCount}}</td>
                  <td>{{.TotalSizeLabel}}</td>
                  <td>{{.DownloadCount}}{{if .MaxDownloads}} / {{.MaxDownloads}}{{end}}</td>
                  <td>{{.CreatedAt}}</td>
                  <td>{{.ExpiresAt}}</td>
                  <td>
                    {{if .Expired}}<span class="badge">expired</span>{{else}}<span class="badge">active</span>{{end}}
                    {{if .Protected}}<span class="badge">protected</span>{{end}}
                  </td>
                  <td class="table-actions">
                    <a class="button button-primary button-sm" href="/admin/boxes/{{.ID}}/edit">Edit</a>
                    <a class="button button-outline button-sm" href="/admin/boxes/{{.ID}}/view">View</a>
                    <form action="/admin/boxes/{{.ID}}/delete" method="post">
                      <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
                      <button class="button button-danger button-sm" type="submit">Delete</button>
                    </form>
                  </td>
                </tr>
              {{else}}
                <tr><td colspan="9">No boxes match.</td></tr>
              {{end}}
            </tbody>
          </table>
        </div>

        <div class="pagination-bar">
          <nav class="pagination" aria-label="Pagination">
            {{if .Data.HasPrev}}<a class="button button-outline button-sm" href="{{.Data.PrevHref}}">← Prev</a>{{else}}<span class="button button-outline button-sm is-disabled" aria-disabled="true">← Prev</span>{{end}}
            {{range .Data.PageLinks}}<a class="button button-sm {{if .Active}}is-active{{else}}button-outline{{end}}" href="{{.Href}}">{{.Page}}</a>{{end}}
            {{if .Data.HasNext}}<a class="button button-outline button-sm" href="{{.Data.NextHref}}">Next →</a>{{else}}<span class="button button-outline button-sm is-disabled" aria-disabled="true">Next →</span>{{end}}
          </nav>
          <label class="per-page-control">
            <span>Per page</span>
            <select data-per-page="files" aria-label="Items per page">
              {{range .Data.PerPageOptions}}<option value="{{.}}" {{if eq . $.Data.PerPage}}selected{{end}}>{{.}}</option>{{end}}
            </select>
          </label>
        </div>
        <p class="pagination-summary">Showing {{.Data.RangeFrom}}–{{.Data.RangeTo}} of {{.Data.Total}} · Page {{.Data.Page}} of {{.Data.TotalPages}}</p>
      </div>
    </div>
  </div>
</section>
{{end}}