{% extends "base.html" %}
{% load hc_extras %}

{% block content %}
<div class="row">
    <div class="col-sm-6 col-sm-offset-3">
        <div class="hc-dialog">
            <h1>Change Account's Email Address</h1>
            <div class="dialog-body">
                <p>
                    Your account's email address is used for sending
                    the sign-in links and monthly reports.

                    <strong>
                        Make sure you can receive emails at the new address.
                    </strong>

                    Otherwise, you may get locked out of
                    your {{ site_name }} account.
                </p>

                {% if request.user.credentials.exists or request.profile.totp %}
                <p class="alert alert-warning">
                    <strong>Two-factor authentication is active.</strong>
                    If you are handing this account over to somebody else,
                    consider disabling two-factor authentication first.
                </p>
                {% endif %}
            </div>

            <form method="post">
                {% csrf_token %}

                <div class="form-group">
                    <label class="control-label">Current Email</label>
                    <input
                        type="text"
                        class="form-control input-lg"
                        disabled
                        value="{{ request.user.email }}">
                </div>

                <div class="form-group {{ form.email.css_classes }}">
                    <label for="ce-email" class="control-label">New Email</label>
                    <input
                        type="email"
                        class="form-control input-lg"
                        id="ce-email"
                        name="email"
                        placeholder="you@example.org">
                        {% if form.email.errors %}
                        <div class="help-block">
                            {{ form.email.errors|join:"" }}
                        </div>
                        {% endif %}

                </div>

                <div class="clearfix">
                    <button type="submit" class="btn btn-lg btn-primary pull-right">
                        Change Email
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}