{{define "content"}}
<h1>Metrics</h1>
<div class="error-box" id="error" role="alert"></div>

<div class="toolbar mt">
  <div class="field tight">
    <label for="m-from">From</label>
    <input type="date" id="m-from">
  </div>
  <div class="field tight">
    <label for="m-to">To</label>
    <input type="date" id="m-to">
  </div>
  <button class="btn" id="m-apply">Apply</button>
  <a class="btn" id="m-csv" href="#">Export CSV</a>
</div>

<section id="dev-metrics" hidden>
  <div class="grid mt" id="dev-cards"></div>
  <div class="card mt"><h2>Earnings over time (weekly)</h2><div id="dev-weekly"></div></div>
  <div class="card mt"><h2>Per customer</h2><div id="dev-customers"></div></div>
</section>

<section id="cons-metrics" hidden>
  <div class="toolbar mt">
    <div class="field tight">
      <label for="m-customer">Customer</label>
      <select id="m-customer"><option value="">All</option></select>
    </div>
  </div>
  <div class="grid mt" id="cons-cards"></div>
  <div class="card mt"><h2>Awarded over time (weekly)</h2><div id="cons-weekly"></div></div>
  <div class="row mt">
    <div class="card"><h2>Per developer</h2><div id="cons-devs"></div></div>
    <div class="card"><h2>Per customer</h2><div id="cons-customers"></div></div>
  </div>
</section>

<div class="card mt">
  <div class="spread">
    <h2>Leaderboard — top developers</h2>
    <label class="muted"><input type="checkbox" id="lb-optout"> Hide me from the leaderboard</label>
  </div>
  <table class="list" id="leaderboard">
    <thead><tr><th>#</th><th>Developer</th><th>Tasks</th><th>Bounty</th></tr></thead>
    <tbody></tbody>
  </table>
</div>
{{end}}