{% extends 'home.html' %}

{% block container %}
  <div class="top-pad">
    <ul class="nav nav-tabs">
      <li class="active"><a href="#simple-form" data-toggle="tab">Old Style Login</a></li>
      <li><a href="#openid-form" data-toggle="tab">OpenID</a></li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active" id="simple-form">
        <form
            method="POST"
            action="{{ url_for('auth.login') }}"
            role="form">
          {{ form.csrf_token }}
          <div class="form-group">{{ form.username.label }}: {{ form.username() }}</div>
          <div class="form-group">{{ form.password.label }}: {{ form.password() }}</div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
      </div>
      <div class="tab-pane" id="openid-form">
        <form
            method="POST"
            action="{{ url_for('auth.login') }}"
            role="form">
          {{ openid_form.csrf_token }}
          <div class="form-group">{{ openid_form.openid.label }}: {{ openid_form.openid() }}</div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
      </div>
      <div class="tab-pane" id="social-logins">
        <a href="{{ url_for('auth.facebook_login', next=url_for('auth.home')) }}">Login via Facebook</a>
        <a href="{{ url_for('auth.google_login') }}">Login via Google</a>
        <a href="{{ url_for('auth.twitter_login', next=url_for('auth.home')) }}">Login via Twitter</a>
      </div>
    </div>
  </div>
{% endblock %}
