{% extends 'oj_base.html' %}

{% block body %}
    <div class="container main">
        <ul class="nav nav-tabs nav-tabs-google">
            <li role="presentation" class="active">
                <a href="problem.html">题目</a></li>
            <li role="presentation"><a href="/problem/1/my_solutions/">我的提交</a></li>
        </ul>
        <h2 class="text-center">{{ problem.title }}</h2>

        <p class="text-muted text-center">发布时间: {{ problem.create_time }} CPU: {{ problem.time_limit }}ms
            内存: {{ problem.memory_limit }}M</p>

        <div>
            <div class="problem-section">
                <label class="problem-label">描述</label>

                <p class="problem-detail">{{ problem.description|safe }}</p>
            </div>
            <div class="problem-section">
                <label class="problem-label">输入</label>

                <p class="problem-detail">{{ problem.input_description }}</p>
            </div>
            <div class="problem-section">
                <label class="problem-label">输出</label>

                <p class="problem-detail">{{ problem.output_description }}k</p>
            </div>
            {% for item in samples %}
                <div class="problem-section">
                    <label class="problem-label">样例输入1</label>
        <pre>
{{ item.input }}</pre>

                </div>
                <div class="problem-section">

                    <label class="problem-label">样例输出1</label>
        <pre>
{{ item.output }}</pre>
                </div>
            {% endfor %}
            <div>
                <button type="button" id="show-more-btn" class="btn btn-info btn-sm">查看隐藏信息</button>
            </div>
            {% if problem.hint %}
                <div class="problem-section hide">
                    <label class="problem-label">提示</label>

                    <p class="problem-detail">{{ problem.hint|safe }}</p>
                </div>
            {% endif %}
            <div class="problem-section hide">
                <label class="problem-label">标签</label>

                <p class="problem-detail">
                    {% for tag in problem.tags.all %}
                        <span class="label label-success">{{ tag.name }}</span>
                    {% endfor %}
                </p>
            </div>

            <div>
                <label>选择语言</label>

                <div>
                    <label class="radio-inline">
                        <input type="radio" name="language" value="1" checked> C (gcc 4.8)
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="language" value="2"> C++ (g++ 4.3)
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="language" value="3"> Java (jre 1.7)
                    </label>
                </div>
            </div>

            <div id="code-field">
                <label class="problem-label">提交代码</label>
                <textarea id="code-editor"></textarea>
            </div>
            <hr>
            <div id="submit-code">
                <button type="button" class="btn btn-primary" id="submit-code-button">
                    提交代码
                </button>
                <img src="/static/img/loading.gif" id="loading-gif">

            </div>

            <div id="result">
            </div>
        <hr>
        </div>
    </div>
{% endblock %}
{% block js_block %}
    <script src="/static/js/app/oj/problem/problem.js"></script>
{% endblock %}