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

{{define "content"}}
<section class="app-shell" aria-labelledby="dashboard-title">
  <aside class="app-sidebar">
    <nav class="sidebar-nav">
      <a class="sidebar-link is-active" href="/app">My Files</a>
      <a class="sidebar-link" href="/account/settings">Account</a>
      {{if eq .Data.User.Role "admin"}}<a class="sidebar-link" href="/admin">Admin panel</a>{{end}}
    </nav>
    <hr class="sidebar-sep">
    <form class="sidebar-logout" action="/logout" method="post">
      <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
      <button class="button button-outline" type="submit">Sign out</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="tabs-bar">
      <div class="tab-list" role="tablist">
        <a class="tab {{if not .Data.Selected}}is-active{{end}}" href="/app">All</a>
        {{range .Data.Collections}}
          <a class="tab {{if eq $.Data.Selected .ID}}is-active{{end}}" href="/app?collection={{.ID}}">{{.Name}}</a>
        {{end}}
      </div>
      <details class="new-collection-drop">
        <summary class="button button-outline button-sm">+ Collection</summary>
        <div class="new-collection-body">
          <form action="/app/collections" method="post">
            <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
            <label>
              <span>Name</span>
              <input name="name" placeholder="e.g. Projects" required>
            </label>
            <button class="button button-primary button-sm" type="submit">Create</button>
          </form>
        </div>
      </details>
    </div>

    <div class="card admin-table-card">
      <div class="card-content">
        <div class="table-header">
          <div>
            <h2>Boxes</h2>
            <p>Collections organise boxes. Shared links remain unlisted.</p>
          </div>
        </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>Expires</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              {{range .Data.Boxes}}
                <tr>
                  <td>
                    <div class="file-name">{{.Title}}</div>
                    <details class="row-edit">
                      <summary>Rename</summary>
                      <form action="/app/boxes/{{.ID}}/rename" method="post" class="row-edit-form">
                        <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
                        <input name="title" placeholder="New title">
                        <button class="button button-outline button-sm" type="submit">Save</button>
                      </form>
                    </details>
                  </td>
                  <td>
                    <div>{{if .CollectionName}}{{.CollectionName}}{{else}}<span class="muted-copy">—</span>{{end}}</div>
                    <details class="row-edit">
                      <summary>Move</summary>
                      <form action="/app/boxes/{{.ID}}/move" method="post" class="row-edit-form">
                        <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
                        <select name="collection_id">
                          <option value="">Unsorted</option>
                          {{range $.Data.Collections}}<option value="{{.ID}}">{{.Name}}</option>{{end}}
                        </select>
                        <button class="button button-outline button-sm" type="submit">Move</button>
                      </form>
                    </details>
                  </td>
                  <td>{{.FileCount}}</td>
                  <td>{{.Size}}</td>
                  <td>{{.ExpiresAt}}</td>
                  <td class="table-actions">
                    <a class="button button-outline button-sm" href="{{.URL}}" target="_blank" rel="noopener noreferrer">Open</a>
                    <form action="/app/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="6" class="muted-copy">No boxes yet. Upload some files to get started.</td></tr>
              {{end}}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>
{{end}}