{% extends "base.html" %}

{% set total_progress = (100 * (g.num_labelled_images / (g.num_labelled_images + g.num_skipped_images))) | round(2) %}

{% block title %}
Summary
{% endblock %}

{% block header %}
<h1>Summary for dataset {{ dataset }}</h1>
<hr>
{% endblock %}

{% block content %}
<h2>Progress</h2>
<div style="display: flex; justify-content: center;">
    <div id="progress_container" , style="align-self: center;">
        <div id="progress_container_text">
            <div id="progress_container_text_align_center"> {{ g.num_labelled_images }} / {{ g.num_labelled_images +
                g.num_skipped_images }} ({{ 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>
<p>You <span style="color: rgb(58, 166, 255);">labelled</span> <b>{{ g.num_labelled_images }}</b> images.</p>
<p>You <span style="color: rgb(113, 113, 113);">skipped</span> <b>{{ g.num_skipped_images }}</b> images.</p>
<p>Click <a href="{{ url_for('classify.classify_next_image', dataset=dataset, only_skipped=only_skipped) }}">here</a> to
    label skipped images.</p>
<hr>
{% endblock %}