{% extends "base.html" %}

{% block title %}Running Checks - HM Video QC{% endblock %}

{% block wizard_nav %}
<div class="wizard-nav">
    <div class="wizard-step completed">1. Upload</div>
    <div class="wizard-step completed">2. Configure</div>
    <div class="wizard-step active">3. Results</div>
</div>
{% endblock %}

{% block content %}
<div class="progress-container">
    <h2>Running Quality Checks...</h2>

    <div class="overall-progress">
        <div class="progress-bar-container">
            <div id="progressBar" class="progress-bar" style="width: 0%;"></div>
        </div>
        <p id="progressText">0 of {{ total_checks }} checks completed</p>
    </div>

    <div class="checks-progress" data-total-checks="{{ total_checks }}">
        {% for check in checks %}
        <div class="check-progress-item" id="check_{{ check.id }}">
            <div class="check-status status-queued">
                <div class="status-icon"></div>
            </div>
            <div class="check-info">
                <strong>{{ check.id }}</strong>
                <p class="check-message">Waiting to start...</p>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // Pass total checks count to JavaScript
    window.totalChecks = {{ total_checks }};
</script>
<script src="{{ url_for('static', filename='js/progress.js') }}"></script>
{% endblock %}