{{define "content"}}
<div class="spread">
  <h1>Metrics</h1>
  <span>
    <label class="muted" style="display:inline">From <input type="date" id="m-from" style="width:auto"></label>
    <label class="muted" style="display:inline">To <input type="date" id="m-to" style="width:auto"></label>
    <button class="btn small" id="m-apply">Apply</button>
    <a class="btn small" id="m-csv" href="#">Export CSV</a>
  </span>
</div>
<div class="error-box" id="error" role="alert"></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="spread mt">
    <span>
      <label class="muted" style="display:inline">Customer
        <select id="m-customer" style="width:auto"><option value="">All</option></select>
      </label>
    </span>
  </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}}
