{% extends "oj_base.html" %}
{% block body %}
    {% load problem %}
    <div class="container main">
        <div class="row">
            <div class="col-lg-9">
                <div class="row">
                    <div class="right">
                        <form class="form-inline" method="get">
                            <div class="form-group-sm">
                                <input name="keyword" class="form-control" placeholder="请输入关键词">
                                <input type="submit" value="搜索" class="btn btn-primary">
                            </div>
                        </form>
                    </div>
                </div>
                <div>
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th></th>
                            <th>#</th>
                            <th>题目</th>
                            <th><a href="/problems/?order_by=difficulty">难度</a></th>
                            <th><a href="/problems/?order_by=aceptance">通过率</a></th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for item in problems %}
                            <tr>
                                <th><span class="glyphicon glyphicon-ok ac-flag"></span></th>
                                <th scope="row"><a href="/problem/{{ item.id }}/">{{ item.id }}</a></th>
                                <td><a href="/problem/{{ item.id }}/">{{ item.title }}</a></td>
                                <td>{{ item.difficulty }}</td>
                                <td>{{ item|accepted_radio }}%</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    <nav>
                        <ul class="pager">
                            {% if previous_page %}
                                <li class="previous"><a
                                        href="/problems/{{ previous_page }}/{% if keyword %}?keyword={{ keyword }}{% endif %}{% if tag %}?tag={{ tag }}{% endif %}">
                                    <span aria-hidden="true">&larr;</span> 上一页</a></li>
                            {% endif %}
                            {% if next_page %}
                                <li class="next"><a
                                        href="/problems/{{ next_page }}/{% if keyword %}?keyword={{ keyword }}{% endif %}{% if tag %}?tag={{ tag }}{% endif %}">下一页 <span
                                        aria-hidden="true">&rarr;</span></a></li>
                            {% endif %}
                        </ul>
                    </nav>
                </div>
            </div>

            <div class="col-lg-3">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
                            公告
                        </h3></div>
                    <div class="panel-body">
                        {% for item in announcements %}
                            {{ forloop.counter }}.&nbsp;&nbsp;<a href="/announcement/{{ item.id }}/" target="_blank">{{ item.title }}</a>
                        {% endfor %}
                    </div>
                </div>
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <span class="glyphicon glyphicon-tag" aria-hidden="true"></span>
                            分类
                        </h3>
                    </div>
                    <ul class="list-group">
                        {% for item in tags %}
                        <li class="list-group-item problem-tag" onclick="location.href='/problems/?tag={{ item.name }}'">
                            <span class="badge">{{ item.problem_number }}</span>
                            {{ item.name }}
                        </li>
                        {% endfor %}
                    </ul>
                </div>

            </div>
        </div>
    </div>
{% endblock %}

{% block js_block %}
    <script src="/static/js/app/oj/problem/problem_list.js"></script>
{% endblock %}