{% extends "sentry/bases/auth.html" %}

{% load crispy_forms_tags %}
{% load i18n %}

{% block title %}{% trans "Login" %} | {{ block.super }}{% endblock %}

{% block auth_main %}
  <ul class="nav nav-tabs auth-toggle">
    <li{% if op == "login" %} class="active"{% endif %}>
      <a href="#login" data-toggle="tab">{% trans "Login" %}</a>
    </li>
    {% if CAN_REGISTER %}
      <li{% if op == "register" %} class="active"{% endif %}>
        <a href="#register" data-toggle="tab">{% trans "Register" %}</a>
      </li>
    {% endif %}
    <li{% if op == "sso" %} class="active"{% endif %}>
      <a href="#sso" data-toggle="tab">{% trans "Single Sign-On" %}</a>
    </li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane{% if op == "login" %} active{% endif %}" id="login">
      <form class="form-stacked" action="" method="post" autocomplete="off">
        {% csrf_token %}

        <input type="hidden" name="op" value="login" />

        {{ login_form|as_crispy_errors }}

        {% for field in login_form %}
          {{ field|as_crispy_field }}
        {% endfor %}

        <fieldset class="form-actions">
          <button type="submit" class="btn btn-primary">{% trans "Login" %}</button> <a class="pull-right" style="margin-top: 9px" href="{% url 'sentry-account-recover' %}">{% trans "Lost your password?" %}</a>
        </fieldset>
      </form>
    </div>
    <div class="tab-pane{% if op == "register" %} active{% endif %}" id="register">
      <form class="form-stacked" action="" method="post" autocomplete="off">
        {% csrf_token %}

        <input type="hidden" name="op" value="register" />

        {{ register_form|as_crispy_errors }}

        {% for field in register_form %}
          {{ field|as_crispy_field }}
        {% endfor %}

        <fieldset class="form-actions">
          <button type="submit" class="btn btn-primary">{% trans "Register" %}</button>
        </fieldset>
      </form>
    </div>
    <div class="tab-pane{% if op == "sso" %} active{% endif %}" id="sso">
      <form class="form-stacked" method="post">
        {% csrf_token %}

        <input type="hidden" name="op" value="sso" />

        <div class="control-group">
          <div class="controls">
            <label style="display: block">SSO URL</label>
            <span style="padding: 7px 0; font-size: 15px">app.getsentry.com/</span> <input style="width: 240px; margin: 0 0 4px; padding: 5px 8px; display: inline" type="text" class="form-control" name="organization" placeholder="acme">
            <p class="help-block">Enter your organization's ID and we'll get things started.</p>
          </div>
        </div>
        <div class="form-actions" style="margin-top: 25px">
          <button class="btn btn-primary">Sign in</button>
        </div>
      </form>
    </div>
  </div>
{% endblock %}