{% import "components/record.html" as record with context %}
{% import "components/problem.html" as problem with context %}
{% extends "layout/basic.html" %}
{% block content %}
    <script>
        var Context = {
            getProblemUrlWithCategory: "{{ url('problem_category', category='{category}') }}",
            getProblemUrlWithoutCategory: "{{ url('problem_main') }}",
            currentCategory: "{{category}}"
        };
    </script>
    <div class="row">
        <div class="medium-9 columns">
            <div class="section">
                <div class="section__body no-padding">
                    {% include "partials/problem_list.html" %}
                </div>
            </div>
        </div>
        <div class="medium-3 columns">
            <div class="section side">
                <div class="section__header">
                    <h1 class="section__title">{{ _('Categories') }}</h1>
                </div>
                <div class="section__body">
                    <ul class="group-list" data-widget-cf-container>
                        {% for category, sub_categories in model.builtin.CATEGORIES %}
                            <li class="group-list__item">
                                <h2 class="section__title">
                                    <a href="{{ url('problem_category', category=category) }}">{{ category }}</a>
                                </h2>
                                {% if sub_categories | length > 0 %}
                                    <ol class="chip-list">
                                        {% for sub_category in sub_categories %}
                                            <li class="chip-list__item">
                                                <a class="typo-a" href="{{ url('problem_category', category=(category + ',' + sub_category)) }}">{{ sub_category }}</a>
                                            </li>
                                        {% endfor %}
                                    </ol>
                                {% endif %}
                            </li>
                        {% endfor %}
                    </ul>
                </div>
                <div class="section__body">
                    {% include "partials/problem_lucky.html" %}
                </div>
            </div>
            <div class="section side">
                <div class="section__header">
                    <h1 class="section__title">{{ _('Search') }}</h1>
                </div>
                <form method="get" action="{{ url('problem_main') }}">
                    <div class="section__body">
                        <label>
                            <input name="q" type="text" class="textbox" value="{{ category }}" placeholder="1001">
                        </label>
                        <button type="submit" class="primary button">{{ _('Search') }}</button>
                    </div>
                </form>
            </div>
            {% if handler.user.hasPerm(perm.PERM_CREATE_PROBLEM) %}
                <div class="section side">
                    <div class="section__header">
                        <h1 class="section__title">{{ _('Create Problem') }}</h1>
                    </div>
                    <ol class="menu">
                        <li class="menu__item">
                            <a href="{{ url('problem_create') }}" class="menu__link">
                                <span class="icon icon-add"></span>
                                {{ _('Create Problem') }}</a>
                        </li>
                        <li class="menu__item">
                            <a href="{{ url('problem_import') }}" class="menu__link">
                                <span class="icon icon-copy"></span>
                                {{ _('Import Problem') }}</a>
                        </li>
                    </ol>
                    <div class="section__body">
                        <div class="typo supplementary">
                            <p>{{ _('You have permissions to create problems for this domain.') }}</p>
                        </div>
                    </div>
                </div>
            {% endif %}
            <div class="section side">
                <div class="section__header">
                    <h1 class="section__title">{{ _('Statistics') }}</h1>
                </div>
                {% include "partials/problem_stat.html" %}
            </div>
        </div>
    </div>
{% endblock %}