{% extends "base.html" %}

{% block styles %}
  {{ super() }}
  <link rel="stylesheet" href="{{url_for('static', filename='css/index.css')}}">
{% endblock %}

{% block app_content %}
  {% if current_user.is_authenticated %}
    <h1>Hi, {{ current_user.username }}!</h1>
  {% endif %}
  <p>
    Welcome to <i>AnnotateChange</i>, a tool for annotating time series data 
    for changepoint analysis.
  </p>
  {% if not current_user.is_authenticated %}
  <br>
  <p>
    Please <a href="{{ url_for('auth.login') }}">log in</a> or 
    <a href="{{ url_for('auth.register') }}">register</a> to get started.
  </p>
  {% endif %}
  {% if current_user.is_authenticated %}
    <h3>Introduction</h3>
    {% if not current_user.is_introduced %}
      <a href="{{ url_for('main.demo') }}">Click here to start the introduction to AnnotateChange.</a>
      {% if tasks_todo|length == 0 and tasks_done|length == 0 %}
      <br>
      <br>
      <p>
        Once you have finished the introduction you will be able to annotate real datasets.
      </p>
      {% endif %}
    {% else %}
    <p>
      Thank you for completing the introduction. If you want to revisit 
      it, you can do so by <a href="{{ url_for('main.demo') }}">clicking here</a>.
    </p>
    {% endif %}
    {% if current_user.is_introduced %}
      <h3>Doing Annotations</h3>
      {% if tasks_done|length == 0 %}
        <p>Click the button below to start annotating!</p>
      {% else %}
        <p>Click the button below to do some more annotations!</p>
      {% endif %}
      <div id="annotate-button">
        <a class="btn btn-primary btn-lg btn-block" href="{{ url_for('main.assign') }}" role="button">
          Click here to annotate a time series!
        </a>
      </div>
    {% endif %}
    {% if tasks_done %}
      <h3>Completed Annotations</h3>
      <p>Below are the time series that you've annotated so far. Thanks so much for your help!</p>
      <div class="tasks-done">
        <table class="table table-striped">
          <thead>
            <th scope="col">Name</th>
            <th scope="col">Completed On</th>
          </thead>
          {% for task in tasks_done %}
            <tr>
              {% if current_user.is_admin %}
              <td>{{ task.dataset.name | title }}</td>
              {% else %}
              <td>Dataset {{ task.dataset.id | title }}</td>
              {% endif %}
              <td>{{ task.annotated_on }}</td>
            </tr>
          {% endfor %}
        </table>
      </div>
    {% endif %}
  {% endif %}
{% endblock %}