<!DOCTYPE html>
{% from sklearn.utils import estimator_html_repr %}
{% import json %}
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{{ handler.name }}</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
    crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <h2>MLHandler</h2>
    <p>This is a <strong>sample Tornado tempate</strong> for MLHandler. It
      exposes the following variables:</p>
    <ul>
      <li><code>{{! handler }}</code> : The <code>MLHandler</code> instance.</li>
      <li><code>{{! handler.model }}</code> : The <code>scikit-learn</code>
        model or pipeline associated with this handler.</li>
      <li><code>{{! data }}</code> : The <code>pandas.DataFrame</code>
        containing the training data.</li>
    </ul>
    <p>You can write your own template, and specify it as the <kbd>template</kbd>
      argument of your <code>MLHandler</code> configuration. The above
      variables will be available to any such template.</p>

    <hr></hr>
    <h3>Training Data:</h3>
    <p>The following table shows your training data.</p>
    <div class="formhandler"></div>
    <ul>
      <li>The target column is <code>{{ handler.get_opt('target_col',
          'Undefined') }}</code></li>
      <li>You have excluded these columns from training: <code>{{
          handler.get_opt('exclude', []) }}</code></li>
      <li>You have specified these columns as categorical variables: <code>{{
          handler.get_opt('cats', []) }}</code></li>
      <li>You have specified these columns as numerical variables: <code>{{
          handler.get_opt('nums', []) }}</code></li>
    </ul>

    <hr></hr>
    <h3>The Model:</h3>
    {% raw estimator_html_repr(handler.model) %}
    <p>Your model is a {{ handler.model.__class__.__name__ }}, with the following
      parameters:</p>
    <pre><code>{{ handler.model.get_params() }}</code></pre>
    <p>Download the model <a id="downloadlink">here.</a></p>
  </div>

  <script src="https://cdn.jsdelivr.net/combine/npm/jquery,npm/lodash,npm/g1"></script>
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
    crossorigin="anonymous"></script>
  <script>
    /* eslint-env browser, jquery */
    /* globals g1 */
    $('#algorithm').change(function() {
      console.log($(this).val())
    })
    $(document).ready(function() {
      let url = g1.url.parse(window.location)
      url.search = '_cache'
      $('.formhandler').attr('data-src', url.toString())
      $('.formhandler').formhandler({
        pageSize: 5
      })
      url.search = '_download'
      $('#downloadlink').attr('href', url.toString())
    })
  </script>
</body>
</html>
