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

{{define "content"}}
<section class="app-shell admin-shell" aria-labelledby="admin-title">
  <aside class="app-sidebar">
    <nav class="sidebar-nav">
      <a class="sidebar-link {{if eq .Data.Section "overview"}}is-active{{end}}" href="/admin">{{template "icon-dashboard" .}}<span>Overview</span></a>
      <a class="sidebar-link {{if eq .Data.Section "files"}}is-active{{end}}" 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-title">{{.Data.PageTitle}}</h1>
    </div>
  </div>

  <div class="metric-grid">
    <article class="metric-card">
      <span>Total boxes</span>
      <strong>{{.Data.Stats.TotalBoxes}}</strong>
    </article>
    <article class="metric-card">
      <span>Total files</span>
      <strong>{{.Data.Stats.TotalFiles}}</strong>
    </article>
    <article class="metric-card">
      <span>Storage used</span>
      <strong>{{.Data.Stats.TotalSizeLabel}}</strong>
    </article>
    <article class="metric-card">
      <span>Uploads 24h</span>
      <strong>{{.Data.Stats.UploadsLast24H}}</strong>
    </article>
    <article class="metric-card">
      <span>Protected</span>
      <strong>{{.Data.Stats.ProtectedBoxes}}</strong>
    </article>
    <article class="metric-card">
      <span>Expired</span>
      <strong>{{.Data.Stats.ExpiredBoxes}}</strong>
    </article>
  </div>

  <div class="admin-charts">
    <div class="card chart-card">
      <div class="card-content">
        <h2>Uploads per day</h2>
        <p class="muted-copy">New boxes created over the last 14 days.</p>
        <div class="bar-chart" role="img" aria-label="Uploads per day for the last 14 days">
          {{range .Data.Overview.UploadDays}}
          <div class="bar-chart-col" title="{{.Label}}: {{.Value}}">
            <span class="bar-chart-value">{{.Value}}</span>
            <span class="bar-chart-bar" style="height: {{.Height}}%"></span>
            <span class="bar-chart-label">{{.Label}}</span>
          </div>
          {{end}}
        </div>
      </div>
    </div>

    <div class="card chart-card">
      <div class="card-content">
        <h2>Box status</h2>
        <p class="muted-copy">Share of all {{.Data.Stats.TotalBoxes}} boxes.</p>
        <div class="stat-bars">
          {{range .Data.Overview.StatusBars}}
          <div class="stat-bar">
            <span>{{.Label}} <strong>{{.Value}}</strong></span>
            <span class="stat-bar-track"><span class="stat-bar-fill" style="width: {{.Percent}}%"></span></span>
          </div>
          {{end}}
        </div>
      </div>
    </div>
  </div>

  <div class="card chart-card">
    <div class="card-content">
      <h2>Storage added per day</h2>
      <p class="muted-copy">Bytes uploaded over the last 14 days.</p>
      <div class="bar-chart" role="img" aria-label="Storage added per day for the last 14 days">
        {{range .Data.Overview.StorageDays}}
        <div class="bar-chart-col" title="{{.Label}}: {{.Value}}">
          <span class="bar-chart-value">{{.Value}}</span>
          <span class="bar-chart-bar" style="height: {{.Height}}%"></span>
          <span class="bar-chart-label">{{.Label}}</span>
        </div>
        {{end}}
      </div>
    </div>
  </div>

  <div class="card admin-table-card">
    <div class="card-content">
      <div class="table-header">
        <div>
          <h2>Recent uploads</h2>
          <p>View or remove anonymous boxes.</p>
        </div>
        <a class="button button-outline" href="/admin/files">View all</a>
      </div>

      <div class="admin-table-wrap">
        <table class="admin-table">
          <thead>
            <tr>
              <th>Box</th>
              <th>Owner</th>
              <th>Files</th>
              <th>Size</th>
              <th>Downloads</th>
              <th>Created</th>
              <th>Expires</th>
              <th>Status</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {{range .Data.Boxes}}
              <tr>
                <td><code>{{.ID}}</code></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-outline" 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" type="submit">Delete</button>
                  </form>
                </td>
              </tr>
            {{else}}
              <tr><td colspan="9">No uploads yet.</td></tr>
            {{end}}
          </tbody>
        </table>
      </div>
    </div>
  </div>
  </div>
</section>
{{end}}