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

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

{% block title %}{% trans "Sign In" %} | {{ block.super }}{% endblock %}

{% block auth_container %}
  {% if banner %}
    <h2 class="m-t-1 m-l-1 m-b-0">{{ banner }}</h2>
  {% endif %}

  <div class="auth-container p-t-1 border-bottom">
    <h3>{% trans "Sign in to continue" %}</h3>
    <ul class="nav nav-tabs auth-toggle m-b-0">
      <li{% if op == "login" %} class="active"{% endif %}>
        <a href="#login" data-toggle="tab">{% trans "Sign In" %}</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>
  <div class="tab-content">
    <div class="tab-pane{% if op == "login" %} active{% endif %}" id="login">
      <div class="auth-container">
        <div class="auth-form-column">
          <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 %}

            <div class="auth-footer m-t-1">
              <button type="submit" class="btn btn-primary">{% trans "Continue" %}</button>
              <a class="secondary" href="{% url 'sentry-account-recover' %}">{% trans "Lost your password?" %}</a>
            </div>
          </form>
        </div>
        {% if github_login_link or vsts_login_link or google_login_link %}
          <div class="auth-provider-column">
            {% if google_login_link %}
              <p>
                <a class="btn btn-default btn-login-google" href="{{ google_login_link }}" style="display: block">
                  <span class="provider-logo google"></span> Sign in with Google
                </a>
              </p>
            {% endif %}

            {% if github_login_link %}
              <p>
                <a class="btn btn-default btn-login-github" href="{{ github_login_link }}" style="display: block">
                  <span class="provider-logo github"></span> Sign in with GitHub
                </a>
              </p>
            {% endif %}

            {% if vsts_login_link %}
              <p>
                <a class="btn btn-default btn-login-vsts" href="{{ vsts_login_link }}" style="display: block">
                  <span class="provider-logo vsts"></span> Sign in with Azure DevOps
                </a>
              </p>
            {% endif %}
          </div>
        {% endif %}
      </div>
    </div>
    <div class="tab-pane{% if op == "register" %} active{% endif %}" id="register">
      <div class="auth-container">
        <div class="auth-form-column">
          <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 %}
              {% if not field.name == 'subscribe' %}
                {{ field|as_crispy_field }}
              {% endif %}
            {% endfor %}

            {% if register_form.subscribe %}
              {% with register_form.subscribe as field %}
                <fieldset class="{% if field.errors %}is-invalid{% endif %} boolean-radio-select">
                  <label> {{ field.label }}</label>
                  <div class="help-block">{{ field.help_text }}</div>
                  <div class="inputs-list radio">
                    {{ field }}
                    {% if field.errors %}
                      {% for error in field.errors %}
                        <p class="form-text"><small>{{ error }}</small></p>
                      {% endfor %}
                    {% endif %}
                  </div>
                </fieldset>
              {% endwith %}
            {% endif %}

            <div class="auth-footer m-t-1">
              <button type="submit" class="btn btn-primary">{% trans "Continue" %}</button>
              <a class="secondary" href="https://sentry.io/privacy/" target="_blank">
                {% trans "Privacy Policy" %}
              </a>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="tab-pane{% if op == "sso" %} active{% endif %}" id="sso">
      <div class="auth-container">
        <div class="auth-form-column">
          <form class="form-stacked" method="post">
            {% csrf_token %}

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

            <div class="control-group required">
              <div class="controls">
                <label class="control-label">{% trans "Organization ID" %}</label>
                <input type="text" class="form-control" name="organization" placeholder="acme" required>
                <p class="help-block">Your ID is the slug either before or after the hostname. For example, <code><strong>acme</strong></code> is the slug in either <code>{{ server_hostname }}/<strong>acme</strong>/</code> or <code><strong>acme</strong>.{{ server_hostname }}/</code>.</p>
              </div>
            </div>
            <div class="auth-footer m-t-1">
              <button class="btn btn-primary">{% trans "Continue" %}</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
{% endblock %}
