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

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

{% block title %}{% trans "Confirm Password" %} | {{ block.super }}{% endblock %}

{% block wrapperclass %}{{block.super }} windowed-small{% endblock %}

{% block global_sidebar %}{% endblock %}
{% block header %}{% endblock %}

{% block scripts %}

  {{ block.super }}

  <script type="text/javascript">
    $(function() {
      setTimeout(function(){
          $("#id_password").focus();
      }, 0);
    });
  </script>
{% endblock %}

{% block content %}
    <div class="pattern-bg"></div>
    <div class="box box-modal">
        <div class="box-header">
          <a href="/">
            <span class="icon-sentry-logo-full"></span>
            <span class="back-to">{% trans "Back to organization" %}</span>
          </a>
        </div>
        <div class="box-content with-padding">
            <h4 class="m-b-1 p-b-1 b-b-1">
              {% blocktrans %}Help us keep your account safe by confirming your password.{% endblocktrans %}
            </h4>
            <form action="" method="post" autocomplete="off">
                {% csrf_token %}

                {% if form.password.errors %}
                    <div class="help-block error">{% trans "Your password was not valid." %}</div>
                {% endif %}

                <div class="form-group">
                    <label class="control-label" for="id_password">
                        Password:
                    </label>
                    <input type="password" name="password" placeholder="Password" id="id_password" class="form-control">
                    <p class="help-block">
                        <a href="{% url 'sentry-account-recover' %}">Forgot your password?</a>
                    </p>
                </div>

                {% if u2f_challenge %}
                    <div id="u2f-challenge"></div>
                    <script>
                      ReactDOM.render(React.createElement(Sentry.U2fSign, {
                        challengeData: {{ u2f_challenge|to_json|safe }},
                        displayMode: 'sudo'
                      }), document.getElementById('u2f-challenge'));
                    </script>
                {% endif %}

                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">{% trans "Continue" %}</button>
                </div>
            </form>
        </div>
    </div>
{% endblock %}
