{% 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</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-{{ api_status }}">
            <div class="panel-body settings-block">
                <h2>API Access</h2>
                {% if profile.api_key %}
                    {% if show_api_keys %}
                        <p>
                            API key: <br />
                            <code>{{ profile.api_key }}</code>
                        </p>
                        {% if profile.api_key_readonly %}
                        <p>
                            API key (read-only): <br />
                            <code>{{ profile.api_key_readonly }}</code>
                        </p>
                        {% endif %}
                        <button
                            data-toggle="modal"
                            data-target="#revoke-api-key-modal"
                            class="btn btn-danger pull-right">Revoke</button>

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

                            <button
                                type="submit"
                                name="show_api_keys"
                                class="btn btn-default pull-right">Show API keys</button>
                        </form>
                    {% endif %}
                {% else %}
                    <span class="icon-cancel"></span>
                    API access is disabled.
                    <form method="post">
                        {% csrf_token %}
                        <button
                            type="submit"
                            name="create_api_keys"
                            class="btn btn-default pull-right">Create API keys</button>
                    </form>
                {% endif %}
            </div>

            {% if api_keys_created %}
            <div class="panel-footer">
                API keys created
            </div>
            {% endif %}

           {% if api_keys_revoked %}
            <div class="panel-footer">
                API keys revoked
            </div>
            {% endif %}
        </div>

        <div class="panel panel-{{ team_status }}">
            <div class="panel-body settings-block">
                <h2>Team Access</h2>
                {% if profile.member_set.count %}
                    <table class="table">
                        <tr>
                            <td>{{ profile.user.email }}</td>
                            <td>Owner</td>
                            <td></td>
                        </tr>
                        {% for member in profile.member_set.all %}
                        <tr>
                            <td>{{ member.user.email }} </td>
                            <td>Member</td>
                            <td>
                                <a
                                    href="#"
                                    data-email="{{ member.user.email }}"
                                    class="pull-right member-remove">Remove</a>
                            </td>
                        </tr>
                        {% endfor %}
                    </table>
                {% else %}
                    <p>
                        <strong>Invite team members to your account.</strong>
                    </p>
                    <p>
                        Share access to your checks and configured integrations
                        without having to share a login.
                    </p>
                {% endif %}

                <br />

                {% if not profile.can_invite %}
                <div class="alert alert-info">
                    <strong>Team size limit reached.</strong>
                    To invite more members to your team, please
                    <a href="{% url 'hc-pricing' %}">upgrade your account!</a>
                </div>
                {% endif %}

                <a
                    href="#"
                    class="btn btn-default"
                    data-toggle="modal"
                    data-target="#set-team-name-modal">Set Team Name</a>

                {% if profile.can_invite %}
                <a
                    href="#"
                    class="btn btn-primary pull-right"
                    data-toggle="modal"
                    data-target="#invite-team-member-modal">Invite a Team Member</a>
                {% endif %}
            </div>

           {% if team_member_invited %}
            <div class="panel-footer">
                {{ team_member_invited }} invited to team
            </div>
            {% endif %}

           {% if team_member_removed %}
            <div class="panel-footer">
                {{ team_member_removed }} removed from team
            </div>
            {% endif %}

           {% if team_name_updated %}
            <div class="panel-footer">
                Team name updated
            </div>
            {% endif %}
        </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="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;</button>
                    <h4 class="remove-check-title">Revoke API Keys?</h4>
                </div>
                <div class="modal-body">
                    <p>You are about to revoke your current API keys.</p>
                    <p>Afterwards, you can create new API keys, but there will
                        be <strong>no way of getting the current API
                        keys 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_keys"
                        class="btn btn-danger">Revoke API Keys</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div id="remove-team-member-modal" class="modal">
    <div class="modal-dialog">
        <form id="remove-team-member-form" method="post">
            {% 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">Remove Team Member</h4>
                </div>
                <div class="modal-body">
                    <p>You are about to remove <span id="rtm-email"></span> from the team.</p>
                    <p>Are you sure?</p>
                    <input
                        type="hidden"
                        name="email"
                        id="remove-team-member-email" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button
                        type="submit"
                        name="remove_team_member"
                        class="btn btn-danger">Remove Member from Team</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div id="invite-team-member-modal" class="modal">
    <div class="modal-dialog">
        <form method="post" class="form-horizontal">
            {% 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">Invite a Team Member</h4>
                </div>
                <div class="modal-body">
                    <ul>
                        <li>Team Members can create and manage Checks and Integrations</li>
                        <li>Only the team owner (you) can view and edit billing settings</li>
                    </ul>
                    <div class="form-group">
                        <label for="itm-email" class="col-sm-2 control-label">Email</label>
                        <div class="col-sm-9">
                            <input
                                type="email"
                                class="form-control"
                                id="itm-email"
                                name="email"
                                placeholder="friend@example.org">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button
                        type="submit"
                        name="invite_team_member"
                        class="btn btn-primary">Send Invite</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div id="set-team-name-modal" class="modal">
    <div class="modal-dialog">
        <form method="post" class="form-horizontal">
            {% 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">Set Team Name</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="team-name" class="col-sm-4 control-label">Team Name</label>
                        <div class="col-sm-7">
                            <input
                                type="text"
                                class="form-control"
                                id="team-name"
                                name="team_name"
                                value="{{ profile }}">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button
                        type="submit"
                        name="set_team_name"
                        class="btn btn-primary">Set Team Name</button>
                </div>
            </div>
        </form>
    </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>{{ profile }}</strong> and all
                    of its associated 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 %}

{% block scripts %}
{% compress js %}
<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/profile.js' %}"></script>
{% endcompress %}
{% endblock %}