{% extends 'oj_base.html' %}
{% block css_block %}
    <style>
        .CodeMirror {
            height: auto;
        }
    </style>
{% endblock %}
{% block body %}
    {% load submission %}
    <div class="container main">
        <ul class="nav nav-tabs nav-tabs-google">
            <li role="presentation">
                <a href="/problem/{{ problem.id }}/">题目</a></li>
            <li role="presentation" class="active"><a href="/problem/{{ problem.id }}/my_submissions/">我的提交</a></li>
        </ul>
        {% include "oj/problem/_problem_header.html" %}
        <div class="panel panel-default">
            <div class="panel-body">
                <h4>运行结果 : <span class="text-{{ submission.result|translate_result_class }}">
                    {{ submission.result|translate_result }}
                </span>
                </h4>
                {% ifequal submission.result 0 %}
                    <p>时间 : {{ submission.accepted_answer_time }}ms 语言 :
                        {{ submission.language|translate_language }}
                    </p>
                {% endifequal %}
                {% ifequal submission.result 4 %}
                    <p>{{ submission.info }}</p>
                {% endifequal %}
                <p>提交时间 : {{ submission.create_time }}</p>
            </div>
        </div>
        <div id="code-field">
            <textarea id="code-editor">{{ submission.code }}</textarea>
        </div>
    </div>

{% endblock %}
{% block js_block %}
    <script>
        require(["jquery", "codeMirror"], function ($, codeMirror) {
            {% ifequal submission.language 1 %}
                var language = "text/x-csrc";
            {% else %}
                {% ifequal submission.language 2 %}
                    var language = "text/x-c++src";
                {% else %}
                    var language = "text/x-java";
                {% endifequal %}
            {% endifequal %}
            var codeEditor = codeMirror($("#code-editor")[0], language);
            codeEditor.setOption("readOnly", true);
        });
    </script>
{% endblock %}