<!DOCTYPE html>
<html>
    <head>
	  <meta charset="utf-8">
	  <title>OpenJudge</title>
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="/static/normalize.css">
	  <link rel="stylesheet" href="/static/skeleton.css">
	  <link rel="stylesheet" href="/static/main.css">
	  <script src="/static/jquery.js"></script>
      <script src='/static/main.js'></script>
	</head>
    <body>
        <div class='container'>
            <div class='row'>
                <div class='twelve columns'>
                    <b>OpenJudge</b>  -- [
                    <a href='/'>Home</a> ] - [
                    <a href='#' id='submit_attempt'>Submit Attempt</a> ] - [
                    <a href='#' id='signup'>Signup</a> ] - [
                    <a href='#' id='login'>Login</a> ] - [
                    <a href='#' id='logout'>Logout</a> ] - [
                    <span id='user_name_display'>User Score: </span> <b id='score_display'>0</b> ]
                </div>
            </div>
        <hr>
        </div>
        <div class='container'>
            <div class='row' id='form_area'>
                <center><p>Fill in the required fields and click on the links at the top of this page to perform some action. You can click on the attempt ID below to update it's status. Clicking on your score displayed on the top right will also refresh it.</p></center>
                <div class='row'>
                    <input class='four columns' type='text' id='username' placeholder='User Name'/>
                    <input class='four columns' type='password' id='password' placeholder='********'/>
                    <select id='language' class='four columns'>
                        % for lang in languages:
                        <option value='{{lang}}'>{{lang}}</option>
                        % end
                    </select>
                </div>
                <div class='row'><center>
                    [Last attempt: <span id='attempt_status' class='checking_attempt'>No attempt Yet</span>] -- [<span id='attempt_message'></span>]
                </div></center>
                <div class='row'>
                    <textarea class='twelve columns' id='code' >print('Hello World')</textarea>
                </div>
                <hr>
            </div>
            <div class='row' id='intro_part'>
                <pre>{{intro}}</pre>
            </div>
            <div class='row' id='question_list'>
                % for qpk in questions:
                <button class='two columns question_button' id='q_{{qpk}}'>Question {{qpk}}</button>
                % end
            </div>
            <hr>
            <div class='row' id='question_area'>
                <b>Question <span id='question_number'></span> Statement</b>
                <p id='question_pre'></p>
            </div>
            <hr>
            <div class='container' id='leaderboard_area'>
                <center>
                    <button id='refresh_lb'>Refresh Leaderboard</button>
                    <table class='ten columns'>
                        <thead>
                            <tr><th>Name</th><th>Score</th></tr>
                        </thead>
                        <tbody id='leader_table'>
                        </tbody>
                    </table>
                </center>
            </div>
        </div>
    </body>
</html>
