<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    <style>
      body {
        text-align:center;
      }
      #container {
        display: flex;
        flex-direction: column;
        margin: auto auto;
        height: 95vh;
        width: 75vw;
      }
      #container div {
        align-self: center;
        padding: 10px;
      }
    </style>
  </head>

  <body>
    <div id="container">
      {% with messages = get_flashed_messages() %}
      {% if messages %}
      <ul class="messages">
        {% for message in messages %}
        <li>{{ message }}</li>
        {% endfor %}
      </ul>
      {% endif %}
      {% endwith %}
      <form class="form-signin" method="POST" action="/post-surprise">
        <h2 class="form-signin-heading">Set surprise</h2>
        {% for v in enum %}
        <div>
          <input type="radio" name="surprise" id="{{ v }}" value="{{ v }}">
          <label for="{{ v }}">{{ v }}</label>
        </div>
        {% endfor %}
        <div>
          <input class="form-control" type="password" required name="password" placeholder="Password">
        </div>
        <div>
          <button class="btn btn-lg btn-primary btn-block" type="submit">Set surprise</button>
        </div>
      </form>
    </div>
  </body>
</html>


