<style>
  thead th {
    text-align: right;
  }
  tbody th {
    text-align: left;
  }
  tbody td {
    text-align: right;
  }
</style>
<div class="home {{mode}}">
<div id="signal"><img src="/img/{{theme}}-{{mode}}.png"></br><div><span
title="reviews before next new card">{{statsNext24Hours.reviewsToNextNew}}</span>/<span title="due now">{{dueNow}}</span>/<span title="new cards past 24 hours">{{statsPast24Hours.newCards}}</span>/<span title="study time past 24 hours">{{statsPast24Hours.time}}</span>/<span title="study time next 24 hour">{{statsNext24Hours.time}}</span></div></div>
<h1><a href="/"><img src="img/logo.png"></a>Spaced Repetition Flashcards</h1>
<table>
<thead>
<tr><th></th><th>Cards</th><th>Minutes</th></tr>
</thead>
<tbody>
<tr><th>Past 24 Hours:</th><td>{{statsPast24Hours.count}}</td><td>{{statsPast24Hours.time}}</tr>
<tr><th>Next 24 Hours:</th><td>{{statsNext24Hours.count}}</td><td>{{statsNext24Hours.time}}</tr>
<tr><th>Study Time Per Day:</th><td colspan=2><span
title="short term historic average">{{averageStudyTime}}</span> / <span
title="forward looking average for new card mode">{{studyTime}}</span></td></tr>
<tr><th>New Cards Per Day:</th><td colspan=2><span
  title="short term historic average">{{averageNewCards}}</span> / <span
  title="past 24 hours">{{newCardsSeen}}</span></td></tr>
<tr><th>Percent correct:</th><td colspan=2>{{percentCorrect}}%</td></tr>
<tr><th>Cards due:</th><td colspan=2><span title="due">{{dueNow}}</span> / <span title="overdue">{{overdue}}</span></td></tr>
<tr><th>Time to earliest due card:</th><td colspan=2>{{timeToNextDue}}</td></tr>
</tbody>
</table>
{{#if studyNow}}
<a href="/next" class="default_action shortcut_s"><button>Study</button></a>
<a href="/"><button>Reload</button></a>
{{else}}
<a href="/studyNow"><button>Study</button></a>
<a href="/" class="default_action"><button>Reload</button></a>
{{/if}}
<h3>Study time per hour</h3>
<div id="chart1" class="chart"></div>
<div class="buttons">
<a href="/admin"><button>Admin</button></a>
&nbsp;
<a id="button_stats" href="/stats"><button>Stats</button></a>
&nbsp;
<a href="/help" target="_blank"><button>Help</button></a>
</div>
</div>

<script src="/js/plotly-2.29.1.min.js" charset="utf-8"></script>
<script>
  let chart1 = document.getElementById('chart1');
  const chart1Data = {{{chart1Data}}};
  chart1Data.hovertemplate = '%{y}<extra></extra>';
  Plotly.newPlot(chart1,
    [ chart1Data ], {
      autosize: true,
      margin: {
        t: 20,
        b: 35,
        l: 40,
        r: 10
      },
      yaxis: { title: 'minutes' },
      xaxis: { title: 'hour' }
    }
  );
</script>
