<!DOCTYPE html>
<html>
  <head>
    <title>Security 1</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/static/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">
    <link href="/static/css/style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/static/js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.base64.min.js"></script>
    <script type="text/javascript" src="/static/js/quiz.js"></script>
  </head>
  <body>
    <form method="POST" id="form-quiz">
      {% csrf_token %}

      <div class="row-fluid">
        <div class="well span3" id="menu">
          <p>Ingelogd als <strong>{{ user }}</strong>.</p>

          <h5>Security 1</h5>
          <ul>
            <li><a href="/sql">SQL Injection</a></li>
            <li><a href="/xss">Cross-site Scripting</a></li>
            <li><a href="/wachtwoorden">Wachtwoorden</a></li>
            <li><a href="/bonus">Bonus</a></li>
          </ul>

          <h5>Security 2</h5>
          <ul>
            <li><a href="/oauth">OAuth</a></li>
            <li><a href="/certificaten">Certificaten</a></li>
            <li><a href="/encryptie">Encryptie</a></li>
          </ul>

          Moeilijkheidsgraad:
          <select id="difficulty">
            <option value="easy">Makkelijk (hints zichtbaar)</option>
            <option value="normal">Normaal (hints optioneel)</option>
            <option value="hard">Moeilijk (geen hints)</option>
          </select>

          <a href="/logout" class="btn">Uitloggen</a>
          {% if CLOSED %}<br>Inzendingen kunnen niet meer worden ingezonden{% else %}<button class="btn-primary btn-disabled" type="submit" id="save-button">Opslaan</button>{% endif %}
          <div class="alert alert-info" id="js-message" style="display: none;"></div>
          <p>Deadline: woensdag 30 maart 23:59</p>
        </div>

        <div id="quiz" class="span8 offset3">
          {% if messages %}
            {% for message in messages %}
              <div class="alert alert-info">{{ message }}</div>
            {% endfor %}
          {% endif %}

        {% block content %}{% endblock %}

        </div>
      </div>
    </form>
  </body>
</html>
