{% extends "base/base_without_nav.html" %}

{% block header %}
  <style type="text/css">
    body {
      padding-top: 40px;
      padding-bottom: 40px;
      background-color: #f5f5f5;
    }

    .form-signin {
      max-width: 700px;
      padding: 19px 29px 29px;
      margin: 0 auto 20px;
      background-color: #fff;
      border: 1px solid #e5e5e5;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
      -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
      box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    }

    .form-signin .form-signin-heading,
    .form-signin .checkbox {
      margin-bottom: 10px;
    }

    .form-signin input[type="text"],
    .form-signin input[type="password"] {
      font-size: 16px;
      height: auto;
      margin-bottom: 15px;
      padding: 7px 9px;
    }

  </style>
{% endblock %}

{% block content %}


  <form class="form-signin" action="" method="post" name="login">
    <h2 class="form-signin-heading">Please sign in</h2>
    {{ form.hidden_tag() }}

    {% include "flashes.html" %}

    <div class="help-block">Click on your OpenID provider below:</div>
    <div class="control-group">
      {% for pr in providers %}
        <a href="javascript:set_openid('{{ pr.url }}', '{{ pr.name }}');"><img
           src="/static/img/{{ pr.name.lower() }}.png" class="img-polaroid" style="margin:2px;"/></a>
      {% endfor %}
    </div>
    <div class="control-group{% if form.errors.openid %} error{% endif %}">
      <label class="control-label" for="openid">Or enter your OpenID here:</label>

      <div class="controls">
        {{ form.openid(size = 80, class = "span4") }}
        {% for error in form.errors.openid %}
          <span class="help-inline">[{{ error }}]</span><br>
        {% endfor %}
      </div>
    </div>
    <div class="control-group">
      <div class="controls">
        <label class="checkbox" for="remember_me">
          {{ form.remember_me }} Remember Me
        </label>
      </div>
    </div>
    <div class="control-group">
      <div class="controls">
        <input class="btn btn-primary" type="submit" value="Sign In">
      </div>
    </div>
  </form>

  <script type="text/javascript">
    function set_openid(openid, pr) {
      u = openid.search('<username>')
      if (u != -1) {
        // openid requires username
        user = prompt('Enter your ' + pr + ' username:')
        openid = openid.substr(0, u) + user
      }
      form = document.forms['login'];
      form.elements['openid'].value = openid
      form.submit()
    }
  </script>
{% endblock %}