<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{annotation_task_name}} - Training Failed</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

    <!-- Custom Styles -->
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">

    <!-- Training Failed specific styles -->
    <style>
        .failed-header {
            background: linear-gradient(135deg, var(--destructive) 0%, #c82333 100%);
            color: white;
            padding: 2rem 0;
            margin-bottom: 2rem;
            border-radius: 0.5rem;
        }

        .failed-content {
            background-color: #f8f9fa;
            border: 2px solid #e9ecef;
            border-radius: 0.5rem;
            padding: 2rem;
            margin-bottom: 1.5rem;
            text-align: center;
        }

        .failed-icon {
            font-size: 4rem;
            color: #dc3545;
            margin-bottom: 1rem;
        }

        .failed-message {
            font-size: 1.25rem;
            color: #495057;
            margin-bottom: 1.5rem;
        }

        .stats-box {
            background-color: white;
            border: 1px solid #dee2e6;
            border-radius: 0.5rem;
            padding: 1rem;
            margin: 1rem auto;
            max-width: 400px;
        }

        .stats-row {
            display: flex;
            justify-content: space-between;
            padding: 0.5rem 0;
            border-bottom: 1px solid #eee;
        }

        .stats-row:last-child {
            border-bottom: none;
        }

        .stats-label {
            color: #6c757d;
        }

        .stats-value {
            font-weight: 600;
        }

        .contact-info {
            background-color: #e9ecef;
            border-radius: 0.5rem;
            padding: 1rem;
            margin-top: 1.5rem;
        }
    </style>
</head>

<body>
    <!-- Header navigation bar -->
    <nav class="potato-navbar" role="navigation" style="margin-bottom: 1.5rem;">
        <div class="navbar-inner">
            <div class="navbar-brand">
                <span class="task-name">{{annotation_task_name}}</span>
            </div>
            <div class="navbar-center">
                <span style="color: var(--light-color); font-size: 0.85rem;">
                    <i class="fas fa-times-circle me-2"></i>Training Not Passed
                </span>
            </div>
            <div class="navbar-end">
                <div class="user-pill">
                    <span class="username">{{username}}</span>
                    <a href="/logout" class="logout-btn">Logout</a>
                </div>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <!-- Failed header -->
        <div class="failed-header text-center">
            <h2><i class="fas fa-times-circle me-3"></i>Training Not Passed</h2>
            <p class="mb-0">Unfortunately, you did not pass the training phase</p>
        </div>

        <!-- Failed content -->
        <div class="failed-content">
            <div class="failed-icon">
                <i class="fas fa-user-times"></i>
            </div>

            <h3 class="mb-3">We're sorry</h3>

            <p class="failed-message">
                {{ message }}
            </p>

            {% if explanation %}
            <div class="alert alert-info" role="alert">
                <i class="fas fa-info-circle me-2"></i>
                <strong>Explanation:</strong> {{ explanation }}
            </div>
            {% endif %}

            <!-- Statistics -->
            <div class="stats-box">
                <h6 class="mb-3"><i class="fas fa-chart-bar me-2"></i>Your Training Statistics</h6>

                {% if correct_count is defined %}
                <div class="stats-row">
                    <span class="stats-label">Correct Answers:</span>
                    <span class="stats-value text-success">{{ correct_count }}</span>
                </div>
                {% endif %}

                {% if total_mistakes is defined %}
                <div class="stats-row">
                    <span class="stats-label">Total Mistakes:</span>
                    <span class="stats-value text-danger">{{ total_mistakes }}</span>
                </div>
                {% endif %}

                {% if max_mistakes is defined and max_mistakes > 0 %}
                <div class="stats-row">
                    <span class="stats-label">Maximum Allowed:</span>
                    <span class="stats-value">{{ max_mistakes }}</span>
                </div>
                {% endif %}

                {% if question_mistakes is defined %}
                <div class="stats-row">
                    <span class="stats-label">Mistakes on Question:</span>
                    <span class="stats-value text-danger">{{ question_mistakes }}</span>
                </div>
                {% endif %}

                {% if max_mistakes_per_question is defined and max_mistakes_per_question > 0 %}
                <div class="stats-row">
                    <span class="stats-label">Max Per Question:</span>
                    <span class="stats-value">{{ max_mistakes_per_question }}</span>
                </div>
                {% endif %}

                {% if total_questions is defined %}
                <div class="stats-row">
                    <span class="stats-label">Total Questions:</span>
                    <span class="stats-value">{{ total_questions }}</span>
                </div>
                {% endif %}

                {% if min_correct is defined %}
                <div class="stats-row">
                    <span class="stats-label">Required Correct:</span>
                    <span class="stats-value">{{ min_correct }}</span>
                </div>
                {% endif %}
            </div>

            <!-- Contact info -->
            <div class="contact-info">
                <p class="mb-0">
                    <i class="fas fa-envelope me-2"></i>
                    If you believe this is an error or have questions, please contact the study administrator.
                </p>
            </div>
        </div>

        <!-- Footer -->
        <footer class="potato-footer">
            &copy; 2025 <a href="https://blablablab.si.umich.edu/">Blablablab</a>
            <span class="footer-sep">&middot;</span>
            <a href="https://github.com/davidjurgens/potato">GitHub</a>
            <span class="footer-sep">&middot;</span>
            <a href="https://github.com/davidjurgens/potato#cite-us">Cite Us</a>
        </footer>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
