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

{{define "content"}}
<section class="app-shell" aria-labelledby="dashboard-title">
  <aside class="app-sidebar">
    <a class="sidebar-link is-active" href="/app">Dashboard</a>
    <a class="sidebar-link" href="/account/settings">Settings</a>
    {{if eq .Data.User.Role "admin"}}<a class="sidebar-link" href="/admin">Admin</a>{{end}}
    <form class="sidebar-logout" action="/logout" method="post">
      <button class="button button-outline" type="submit">Logout</button>
    </form>
    <form class="collection-create" action="/app/collections" method="post">
      <label>
        <span>New collection</span>
        <input name="name" placeholder="Projects">
      </label>
      <button class="button button-outline" type="submit">Create</button>
    </form>
  </aside>

  <div class="app-main">
    <div class="admin-header">
      <div>
        <p class="kicker">Personal space</p>
        <h1 id="dashboard-title">My files</h1>
        <p class="muted-copy">{{.Data.StorageUsed}} used · max file size {{.Data.MaxUploadSize}}</p>
      </div>
      <a class="button button-primary" href="/">Upload files</a>
    </div>

    <div class="collection-tabs">
      <a class="button {{if not .Data.Selected}}button-primary{{else}}button-outline{{end}}" href="/app">All</a>
      {{range .Data.Collections}}
        <a class="button {{if eq $.Data.Selected .ID}}button-primary{{else}}button-outline{{end}}" href="/app?collection={{.ID}}">{{.Name}}</a>
      {{end}}
    </div>

    <div class="card admin-table-card">
      <div class="card-content">
        <div class="table-header"><h2>Owned boxes</h2><p>Collections organize boxes. Shared links remain unlisted.</p></div>
        <div class="admin-table-wrap">
          <table class="admin-table">
            <thead><tr><th>Title</th><th>Collection</th><th>Files</th><th>Size</th><th>Created</th><th>Expires</th><th>Actions</th></tr></thead>
            <tbody>
              {{range .Data.Boxes}}
                <tr>
                  <td class="file-name">{{.Title}}</td>
                  <td>{{if .CollectionName}}{{.CollectionName}}{{else}}Unsorted{{end}}</td>
                  <td>{{.FileCount}}</td>
                  <td>{{.Size}}</td>
                  <td>{{.CreatedAt}}</td>
                  <td>{{.ExpiresAt}}</td>
                  <td class="table-actions">
                    <a class="button button-outline" href="{{.URL}}" target="_blank" rel="noopener noreferrer">Open</a>
                    <form action="/app/boxes/{{.ID}}/rename" method="post"><input class="compact-input" name="title" placeholder="Rename"><button class="button button-outline" type="submit">Save</button></form>
                    <form action="/app/boxes/{{.ID}}/move" method="post">
                      <select name="collection_id"><option value="">Unsorted</option>{{range $.Data.Collections}}<option value="{{.ID}}">{{.Name}}</option>{{end}}</select>
                      <button class="button button-outline" type="submit">Move</button>
                    </form>
                    <form action="/app/boxes/{{.ID}}/delete" method="post"><button class="button button-danger" type="submit">Delete</button></form>
                  </td>
                </tr>
              {{else}}
                <tr><td colspan="7">You have no boxes yet.</td></tr>
              {{end}}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>
{{end}}