{% extends "base.html" %}

{% block title %}Log in | Taguette{% endblock %}

{% block contents %}
<!-- Tab selector -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link{% if not register %} show active{% endif %}" id="log-in-tab" data-toggle="tab" href="#log-in" role="tab" aria-controls="log-in" aria-selected="{% if not register %}true{% else %}false{% endif %}">{% trans %}Log in{% endtrans %}</a>
  </li>
  <li class="nav-item">
    <a class="nav-link{% if not register_enabled %} disabled{% endif %}{% if register %} show active{% endif %}" id="register-tab" data-toggle="tab" href="#register" role="tab" aria-controls="register-tab" aria-selected="{% if register %}true{% else %}false{% endif %}">{% trans %}Register{% endtrans %}</a>
  </li>
</ul>

<div class="tab-content" id="myTabContent">

  <div class="tab-pane fade{% if not register %} show active{% endif %}" id="log-in" role="tabpanel" aria-labelledby="log-in-tab">
    <form action="{{ reverse_url('login') }}" method="post">
      {{ xsrf_form_html() }}
      {% if login_error %}
      <div class="alert alert-danger" role="alert">
        {{ login_error }}
      </div>
      {% endif %}
      <input type="hidden" name="next" value="{{ next }}" />
      <div class="form-group row">
        <label for="log-in-login" class="col-sm-2 col-form-label">{# TRANSLATORS: User name #}{% trans %}Login{% endtrans %}</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="log-in-login" name="login" required autocomplete="username" />
        </div>
      </div>
      <div class="form-group row">
        <label for="log-in-password" class="col-sm-2 col-form-label">{% trans %}Password{% endtrans %}</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="log-in-password" name="password" required autocomplete="current-password" />
        </div>
      </div>
      <div class="form-group row">
        <div class="col-sm-10 offset-sm-2">
          <button type="submit" name="log-in" class="btn btn-primary">{# TRANSLATORS: Submit button #}{% trans %}Log in{% endtrans %}</button>
          <a href="{{ reverse_url('reset_password') }}" class="btn btn-outline-secondary">{% trans %}Forgot password{% endtrans %}</a>
        </div>
      </div>
    </form>
  </div>

  {% if register_enabled %}
  <div class="tab-pane fade{% if register %} show active{% endif %}" id="register" role="tabpanel" aria-labelledby="register-tab">
    <form action="{{ reverse_url('register') }}" method="post">
      {{ xsrf_form_html() }}
      {% if register_error %}
      <div class="alert alert-danger" role="alert">
        {{ register_error }}
      </div>
      {% endif %}
      <input type="hidden" name="next" value="{{ next }}" />
      <div class="form-group row">
        <label for="register-login" class="col-sm-2 col-form-label">{# TRANSLATORS: User name #}{% trans %}Login{% endtrans %}</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="register-login" name="login" required autocomplete="username" />
        </div>
      </div>
      <div class="form-group row">
        <label for="register-password1" class="col-sm-2 col-form-label">{% trans %}Password{% endtrans %}</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="register-password1" name="password1" required autocomplete="new-password" minlength="5" maxlength="5120" />
        </div>
      </div>
      <div class="form-group row">
        <label for="register-password2" class="col-sm-2 col-form-label">{% trans %}Confirm password{% endtrans %}</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="register-password2" name="password2" required autocomplete="new-password" minlength="5" maxlength="5120" />
        </div>
      </div>
      <div class="form-group row">
        <label for="register-email" class="col-sm-2 col-form-label">{# TRANSLATORS: Email address #}{% trans %}Email{% endtrans %}</label>
        <div class="col-sm-10">
          <input type="email" class="form-control" id="register-email" name="email" autocomplete="email" />
          <small>{% trans %}Optional. <em>We will not share your email with anyone. This is only used in case you forget your password.</em>{% endtrans %}</small>
        </div>
      </div>
      {% if tos %}
      <div class="form-group row">
        <label for="register-tos" class="col-sm-2 col-form-label">{% trans %}Terms of service{% endtrans %}</label>
        <div class="col-sm-10">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" id="register-tos" name="tos" value="accepted" required>
            <label class="form-check-label" for="register-tos">{% trans url=reverse_url('tos') %}I accept the <a href="{{ url }}">terms of service</a>{% endtrans %}</label>
          </div>
        </div>
      </div>
      {% endif %}
      <div class="form-group row">
        <div class="col-sm-10 offset-sm-2">
          <button type="submit" name="register" class="btn btn-primary">{# TRANSLATORS: Submit button #}{% trans %}Register{% endtrans %}</button>
        </div>
      </div>
    </form>
  </div>
  {% endif %}

</div>

<script type="text/javascript">
// Adapted from https://stackoverflow.com/a/10787789
window.addEventListener('load', function() {
  // Change URI for tabs
  $('#log-in-tab').on('shown.bs.tab', function(e) {
    window.history.pushState({'tab': 'log-in'}, "Log in", '/login');
  });
  $('#register-tab').on('shown.bs.tab', function(e) {
    window.history.pushState({'tab': 'register'}, "Register", '/register');
  });

  window.onpopstate = function(e) {
    if(e.state) {
      if(e.state.tab !== undefined) {
        $('.nav-tabs a[href="#' + e.state.tab + '"]').tab('show');
      }
    }
  };
});
</script>
{% endblock %}
