{% extends "base.html" %}
{% load compress staticfiles %}

{% block title %}Account Settings - healthchecks.io{% endblock %}


{% block content %}
<div class="row">
    <div class="col-sm-12">
        <h1 id="settings-title">Settings</h1>
    </div>
    {% if messages %}
    <div class="col-sm-12">
        {% for message in messages %}
            <p class="alert alert-success">{{ message }}</p>
        {% endfor %}
    </div>
    {% endif %}
</div>

<div class="row">
    <div class="col-sm-6">
        <div class="panel panel-default">
            <div class="panel-body settings-block">
                <form method="post">
                    {% csrf_token %}
                    <h2>Monthly Reports</h2>
                    <label>
                        <input
                            name="reports_allowed"
                            type="checkbox"
                            {% if profile.reports_allowed %} checked {% endif %}>
                        Each month send me a summary of my checks
                    </label>
                    <button
                        name="update_reports_allowed"
                        type="submit"
                        class="btn btn-default pull-right">Save</button>
                </form>
            </div>
        </div>
    </div>

    <div class="col-sm-6">
        <div class="panel panel-default">
            <div class="panel-body settings-block">
                <form method="post">
                    {% csrf_token %}
                    <h2>Set Password</h2>
                    Attach a password to your healthchecks.io account
                    <button
                        type="submit"
                        value="set_password"
                        class="btn btn-default pull-right">Set Password</button>
                </form>
            </div>
        </div>
    </div>

    <div class="col-sm-6">
        <div class="panel panel-default">
            <div class="panel-body settings-block">
                <h2>API Access</h2>
                {% if profile.api_key %}
                    {% if show_api_key %}
                        API key: <code>{{ profile.api_key }}</code>
                        <button
                            data-toggle="modal"
                            data-target="#revoke-api-key-modal"
                            class="btn btn-danger pull-right">Revoke</button>

                    {% else %}
                        <span class="text-success glyphicon glyphicon-ok"></span>
                        API access is enabled.
                        <form method="post">
                            {% csrf_token %}

                            <button
                                type="submit"
                                name="show_api_key"
                                class="btn btn-default pull-right">Show API key</button>
                        </form>
                    {% endif %}
                {% else %}
                    <span class="glyphicon glyphicon-remove"></span>
                    API access is disabled.
                    <form method="post">
                        {% csrf_token %}
                        <button
                            type="submit"
                            name="create_api_key"
                            class="btn btn-default pull-right">Create API key</button>
                    </form>
                {% endif %}
            </div>
        </div>
    </div>

</div>

<div id="revoke-api-key-modal" class="modal">
    <div class="modal-dialog">
        <form id="revoke-api-key-form" method="post">
            {% csrf_token %}
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</span></button>
                    <h4 class="remove-check-title">Revoke API Key</h4>
                </div>
                <div class="modal-body">
                    <p>You are about to revoke the current API key.</p>
                    <p>Afterwards, you can create a new API key, but there will
                        be <strong>no way of getting the current API
                        key back</strong>.
                    </p>
                    <p>Are you sure?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button
                        type="submit"
                        name="revoke_api_key"
                        class="btn btn-danger">Revoke API Key</button>
                </div>
            </div>
        </form>
    </div>
</div>

{% endblock %}