{% extends "layout.html" %}

{% block main %}
<h1>Problems</h1>
<div style="overflow-x: auto;">
    <table class="table table-hover table-full-width">
        <thead class="table-dark">
            <tr>
                <th scope="col">Title</th>
                <th scope="col">Difficulty</th>
            </tr>
        </thead>
        <tbody>
            {% for row in problems %}
            <tr>
                <td><a href="/problem/{{ row.id }}">{{ row.title }}</a></td>
                <td>{{ row.difficulty }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}