{{define "bodyclass"}}page-admin{{end}}
{{define "content"}}
{{$c := category .Data.List.Category}}
<div class="container admin">
  <a class="back-link" href="/admin">{{icon "arrow-left"}}All lists</a>
  <header class="admin-head">
    <div class="admin-head-title">
      <span class="shelf-icon">{{icon $c.Icon}}</span>
      <div>
        <h1 data-bind="title">{{.Data.List.Title}}</h1>
        <p class="muted"><span data-bind="count">{{.Data.List.ItemCount}}</span> of <span data-bind="max">{{.Data.List.MaxItems}}</span> · {{$c.Label}}<span data-bind="hidden">{{if not .Data.List.Visible}} · Hidden{{end}}</span></p>
      </div>
    </div>
    <div class="admin-head-actions">
      <a class="btn btn--ghost" data-bind="public" href="/l/{{.Data.List.Slug}}">{{icon "external"}}View</a>
      {{template "export" .Data.List.Slug}}
      <button class="btn" type="button" data-action="edit-list">{{icon "settings"}}List settings</button>
    </div>
  </header>
  <div class="meter" aria-hidden="true"><span data-bind="meter" style="width: {{pct .Data.List.ItemCount .Data.List.MaxItems}}%"></span></div>

  <div class="editor">
    <section class="panel editor-search" aria-labelledby="add-h">
      <div class="panel-head">
        <h2 id="add-h">{{if eq $c.Key "custom"}}Add favorites{{else}}Add {{$c.Label}}{{end}}</h2>
        <span class="muted small" data-bind="provider"></span>
      </div>
      <form class="search-bar" data-search role="search">
        {{icon "search"}}
        <input type="search" name="q" placeholder="{{if eq $c.Key "custom"}}Search Wikipedia (optional)…{{else}}Search for a {{$c.Singular}}…{{end}}" autocomplete="off" aria-label="Search">
        <span class="spinner" hidden></span>
      </form>
      <div class="search-results" data-results aria-live="polite"></div>
      <button type="button" class="btn btn--ghost btn--block" data-action="manual">{{icon "pencil"}}Add one manually</button>
    </section>

    <section class="panel editor-items" aria-labelledby="items-h">
      <div class="panel-head">
        <h2 id="items-h">Ranking</h2>
        <span class="muted small">Drag, use the arrows, or type a new rank.</span>
      </div>
      <ol class="rank-list" data-rank-list></ol>
      <nav class="pager" data-pager aria-label="Pages"></nav>
    </section>
  </div>
</div>
<script type="application/json" id="boot">{{.Data.Boot}}</script>
{{end}}
{{define "scripts"}}<script type="module" src="/static/js/admin-list.js?v={{.AssetVer}}"></script>{{end}}