{% extends "base.html" %}

{% set image_id = image_id | int %}
{% set num_labelled = num_labelled | int %}
{% set num_total = num_total | int %}
{% set current_image_pos = (100 * (image_id / num_total)) %}
{% set total_progress = (100 * (num_labelled / num_total)) | round(2) %}

{% block title %}
Label image
{% endblock %}

{% block header %}
<h1>Classify images of <b>{{ dataset }}</b> dataset</h1>
{% endblock %}

{% block content %}
<div style="display: flex; justify-content: center;">
  <form method="POST" action="{{ url_for('classify.reset_all_labels', dataset=dataset) }}"
    onsubmit="return confirm('Are you sure you want to reset all labels for this dataset? This action is not reversible.');">
    {{ form.hidden_tag() }}
    <button type="submit" class="reset_button">Reset all labels</button>
  </form>
  <div id="progress_container" , style="align-self: center;">
    <div id="progress_container_text">
      <div id="progress_container_text_align_center"> {{ num_labelled }} / {{ num_total }} ({{ total_progress }}%) </div>
      <li class="progress_marker" style='left: {{ current_image_pos }}%; list-style: none;'></li>
    </div>
    <div id="loading_bar" style="width: {{ total_progress }}%;"></div>
  </div>
</div>
<br>
<img src="{{ url_for('static', filename=image) }}" alt="NAME: {{ image }}&#013;ID: {{ image_id }}"
  title="NAME: {{ image }}&#013;ID: {{ image_id }}">
<hr>
<br>

<form method="POST"
  action="{{ url_for('classify.submit_classification', dataset=dataset, id=image_id, only_skipped=only_skipped) }}">
  {{ form.hidden_tag() }}
  <div style="display: flex; flex-wrap: wrap; justify-content: center;">
    {% for label_button in form.label_buttons %}
    {{ label_button }}
    {% endfor %}
  </div>
  <br>
</form>
<form method="POST"
  action="{{ url_for('classify.handle_move_button', dataset=dataset, id=image_id, only_skipped=only_skipped) }}">
  {{ form.hidden_tag() }}
  <button type="submit" name="action" value="back" class="button back_button">Back</button>
  <button type="submit" name="action" value="skip" class="button skip_button">Skip</button>
</form>
{% endblock %}