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

{% block title %}Account Settings - {% site_name %}{% endblock %}


{% block content %}
<div class="row">
    <div class="col-sm-12">
        <h1 class="settings-title">
            Settings
            <small>{{ request.user.email }}</small>
        </h1>
    </div>
    {% if messages %}
    <div class="col-sm-12">
        {% for message in messages %}
            <p class="alert alert-{{ message.tags }}">{{ message }}</p>
        {% endfor %}
    </div>
    {% endif %}
</div>

<div class="row">
    <div class="col-sm-3">
        <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="{% url 'hc-profile' %}">Account</a></li>
            {% if show_pricing %}
            <li><a href="{% url 'hc-billing' %}">Billing</a></li>
            {% endif %}
            <li><a href="{% url 'hc-notifications' %}">Email Reports</a></li>
            <li><a href="{% url 'hc-badges' %}">Badges</a></li>
        </ul>
    </div>

    <div class="col-sm-9 col-md-6">
        <div class="panel panel-default">
            <div class="panel-body settings-block">
                <form method="post">
                    {% csrf_token %}
                    <h2>Email and Password</h2>
                    <p>
                        Your account's email address is
                        <code>{{ request.user.email }}</code>

                        <button
                            type="submit"
                            name="change_email"
                            class="btn btn-default pull-right">Change Email</button>
                    </p>
                    <p class="clearfix"></p>
                    <p>
                        Attach a password to your {% site_name %} account
                        <button
                            type="submit"
                            name="set_password"
                            class="btn btn-default pull-right">Set Password</button>
                    </p>
                </form>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-body settings-block">
                    {% csrf_token %}
                    <h2>Close Account</h2>
                    <a
                        id="close-account"
                        href="#"
                        class="btn btn-default pull-right"
                        data-toggle="modal"
                        data-target="#close-account-modal">Close Account</a>
                    This will permanently remove your {% site_name %} account
                <form action="{% url 'hc-close' %}" method="post">
                </form>
            </div>
        </div>
    </div>
</div>

<div id="close-account-modal" class="modal">
    <div class="modal-dialog">
        <form id="close-account-form" method="post" action="{% url 'hc-close' %}">
            {% csrf_token %}
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="remove-check-title">Close Account?</h4>
                </div>
                <div class="modal-body">
                    <p></p>
                    <p>You are about to permanently remove
                    the account <strong>{{ request.user.email }}</strong> and all
                    of its associated projects, checks and integrations. Are you sure?
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button
                        type="submit"
                        class="btn btn-danger">Close Account</button>
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock %}