<div id="content">
<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>
<div id="card-contents" class="card">
{{{back}}}
</div>
<div class="buttons">
<span id="card-metrics">
(<span title="original interval">{{card.lastinterval}}</span>
<span title="adjusted interval">{{card.interval}}</span>
<span title="time since last review">{{timeSinceLastReview}}</span>
<span title="card factor">{{card.factor}}</span>)
</span>
</span>
<button onclick="review('fail')" class="shortcut_j">Fail ({{intervals.fail}})</button>
<button onclick="review('hard')" class="shortcut_k">Hard ({{intervals.hard}})</button>
<button onclick="review('good')" class="shortcut_l">Good ({{intervals.good}})</button>
<button onclick="review('easy')" class="shortcut_semicolon">Easy ({{intervals.easy}})</button>
<a href="/help" target="_blank"><button>Help</button></a>
<a onclick="window.open('/fieldset/{{card.fieldsetid}}', 'Edit Fieldset', 'height=800,width=600');" class="shortcut_e" target="_blank"><button>Edit</button></a>
<button onclick="replay()" class="shortcut_p">Play</button>
<a href="/" class="shortcut_b"><button>Stop</button></a>
</div>
<div class="charts">
<h3>Card History - ID {{card.id}}</h3>
<div id="cardHistory" class="chart"></div>
</div>
</div>
<script src="/js/plotly-latest.min.js" charset="utf-8"></script>
<script>
  function review (ease) {
    console.log('review ', ease);
    fetch('/card/{{card.id}}/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        elapsed: 20,
        ease: ease,
        startTime: {{cardStartTime}}
      })
    })
    .then(response => {
      if (!response.ok) {
        throw new Error(response.url + ': ' + response.status + ': ' +
          response.statusText);
      }
      response.json()
      .then((data) => {
        if (data.cardAvailable) window.location = '/next';
        else window.location = '/';
      });
    })
    .catch(err => {
      console.log('err: ', err);
      alert(err);
      window.location('/');
    });
  };

  let cardHistory = document.getElementById('cardHistory');
  if (cardHistory) {
    const data = [
      {{{json chartData.cardFactor}}},
      {{{json chartData.cardInterval}}},
    ];
    data[0].mode = 'lines';
    data[0].name = 'Factor';
    data[0].line = {
      color: 'rgb(185, 213, 232)',
      shape: 'hv'
    };
    data[1].mode = 'lines';
    data[1].name = 'Interval';
    data[1].yaxis = 'y2';
    data[1].line = {
      color: 'rgb(31, 119, 180)',
      shape: 'hv'
    };
    let maxInterval = 0;
    for (let i = data[0].y.length; i > 0; i--) {
      if (data[0].y[i] > maxInterval) maxInterval = data[0].y[i];
    }
    let maxFactor = 0;
    console.log('chart 1: ', data[1].y);
    for (let i = data[1].y.length; i > 0; i--) {
      if (data[1].y[i] > maxFactor) maxFactor = data[1].y[i];
    }
    console.log('maxInterval: ', maxInterval);
    console.log('maxFactor: ', maxFactor);
    Plotly.newPlot(cardHistory,
      data, {
        autosize: true,
        margin: {
          t: 10,
          b: 10,
          l: 30,
          r: 10,
        },
        xaxis: { title: 'datetime', automargin: true },
        yaxis: {
          title: 'factor',
          // range: [ 0, maxFactor ],
          automargin: true,
          rangemode: 'tozero'
        },
        yaxis2: {
          title: 'interval (days)',
          // range: [ 0, maxInterval ],
          overlaying: 'y',
          side: 'right',
          automargin: true,
          rangemode: 'tozero'
        },
      }
    );
  }
</script>
