{% extends "base.html" %}

{% block title %}Problem {{ idx }} - {{ dataset_name }} - ML4SE Benchmark Viewer{% endblock %}

{% block header_extra %}
<div class="nav-links">
    <a href="/?dataset={{ dataset_slug }}" class="btn btn-secondary">← Back to List</a>
    {% set base_path = '/' + dataset_slug %}
    {% if idx > 0 %}
        <a href="{{ base_path }}/problem/{{ idx - 1 }}" class="btn btn-secondary">← Previous</a>
    {% else %}
        <button class="btn btn-secondary" disabled style="opacity: 0.5; cursor: not-allowed;">← Previous</button>
    {% endif %}
    {% if idx < total_problems - 1 %}
        <a href="{{ base_path }}/problem/{{ idx + 1 }}" class="btn btn-secondary">Next →</a>
    {% else %}
        <button class="btn btn-secondary" disabled style="opacity: 0.5; cursor: not-allowed;">Next →</button>
    {% endif %}
</div>
{% endblock %}

{% block extra_css %}
{{ css|safe }}
{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="{{ url_for('static', filename='problem.css') }}">
{% endblock %}

{% block content %}
<div id="problem-content">
    <div class="loading">
        <div class="spinner"></div>
        <p>Loading problem details...</p>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const problemIdx = {{ idx }};
const datasetSlug = {{ dataset_slug|tojson }};
const datasetName = {{ dataset_name|tojson }};
const hasGroundTruth = {{ has_ground_truth|tojson }};
const hasTasks = {{ has_tasks|tojson }};
</script>
<script src="{{ url_for('static', filename='problem.js') }}"></script>
{% endblock %}