{% 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>
            <li><a href="{% url 'hc-appearance' %}">Appearance</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>
        </ul>
    </div>

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

                        <a
                            href="{% url 'hc-change-email' %}"
                            class="btn btn-default pull-right">Change Email</a>
                    </p>
                    <p class="clearfix"></p>
                    {% if request.user.has_usable_password %}
                    <p class="settings-bar">
                        Password authentication is enabled.
                        <a
                            href="{% url 'hc-set-password' %}"
                            class="btn btn-default pull-right">Change Password</a>
                    </p>
                    {% else %}
                    <p class="settings-bar">
                        Attach a password to your {{ site_name }} account.
                        <a
                            href="{% url 'hc-set-password' %}"
                            class="btn btn-default pull-right">Set Password</a>
                    </p>
                    {% endif %}
                </form>
            </div>
            {% if changed_password %}
            <div class="panel-footer">
                Your new password has been set!
            </div>
            {% endif %}
        </div>

        <div class="panel panel-{{ 2fa_status }}">
            <div class="panel-body settings-block">
                <form method="post">
                    {% csrf_token %}
                    <h2>Two-factor Authentication</h2>

                    <table id="my-keys" class="table">
                        {% if use_webauthn %}
                        <tr>
                            <th>Security keys</th>
                            <th></th>
                        </tr>
                        {% for credential in credentials %}
                        <tr>
                            <td>
                                {{ credential.name|default:"unnamed" }}
                                <span class="text-muted">
                                – registered on {{ credential.created|date:"M j, Y" }}
                                </span>
                            </td>
                            <td class="text-right">
                                <a href="{% url 'hc-remove-credential' credential.code  %}">Remove</a>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td class="missing" colspan="2">No registered security keys</td>
                        </tr>
                        {% endfor %}
                        {% endif %}

                        <tr>
                            <th>Authenticator app</th>
                            <th></th>
                        </tr>
                        {% if profile.totp %}
                        <tr>
                            <td>
                                Enabled
                                <span class="text-muted">
                                – configured on {{ profile.totp_created|date:"M j, Y" }}
                                </span>
                            </td>
                            <td class="text-right">
                                <a href="{% url 'hc-remove-totp' %}">Remove</a>
                            </td>
                        </tr>
                        {% else %}
                        <tr>
                            <td class="missing" colspan="2">Not configured</td>
                        </tr>
                        {% endif %}
                    </table>

                    {% if credentials|length == 1 %}
                    <p class="alert alert-info">
                        <strong>Tip: add a second security key!</strong>
                        It is a good practice to register at least two security keys
                        and store them separately.
                    </p>
                    {% endif %}

                    {% if not credentials and not profile.totp %}
                    <p class="alert alert-info">
                    Two-factor authentication is currently <strong>inactive</strong>.
                    Your account does not have any configured two-factor authentication
                    methods.
                    </p>
                    {% endif %}

                    <div class="pull-right">
                        {% if not profile.totp %}
                        <a
                            href="{% url 'hc-add-totp' %}"
                            class="btn btn-default">
                            Set Up Authenticator App
                        </a>
                        {% endif %}
                        {% if use_webauthn %}
                        <a
                            href="{% url 'hc-add-webauthn' %}"
                            class="btn btn-default">
                            Add Security Key
                        </a>
                        {% endif %}
                    </div>
                </form>
            </div>

            {% if added_credential_name %}
            <div class="panel-footer">
                Added security key <strong>{{ added_credential_name }}</strong>.
            </div>
            {% endif %}

            {% if removed_credential_name %}
            <div class="panel-footer">
                Removed security key <strong>{{ removed_credential_name }}</strong>.
            </div>
            {% endif %}

            {% if enabled_totp %}
            <div class="panel-footer">
                Successfully set up the Authenticator app.
            </div>
            {% endif %}

            {% if disabled_totp %}
            <div class="panel-footer">
                Disabled the authenticator app.
            </div>
            {% endif %}
        </div>

        <div class="panel panel-{{ my_projects_status }}">
            <div class="panel-body settings-block">
                    {% csrf_token %}
                    <h2>My Projects</h2>

                    {% if profile.projects.exists %}
                    <table id="my-projects" class="table">
                        <tr>
                            <th>Project</th>
                            <th>My role</th>
                            <th></th>
                        </tr>
                        {% for project in request.user.project_set.all %}
                        <tr>
                            <td>
                                <div class="name">
                                    <a href="{% url 'hc-checks' project.code %}">
                                        {{ project }}
                                    </a>
                                </div>
                            </td>
                            <td>Owner</td>
                            <td>
                                <a
                                    href="{% url 'hc-project-settings' project.code %}"
                                    class="pull-right">Settings</a>
                            </td>
                        </tr>
                        {% endfor %}

                        {% for m in request.user.memberships.all %}
                        <tr>
                            <td>
                                <div class="name">
                                    <a href="{% url 'hc-checks' m.project.code %}">
                                        {{ m.project }}
                                    </a>
                                </div>
                            </td>
                            <td>{{ m.get_role_display }}</td>
                            <td>
                                <a
                                    href="#"
                                    data-name="{{ m.project }}"
                                    data-code="{{ m.project.code }}"
                                    class="pull-right leave-project">Leave</a>
                            </td>
                        </tr>
                        {% endfor %}
                    </table>
                    {% else %}
                        <p>You do not have any projects. Create one!</p>
                    {% endif %}

                    <a
                        id="create-project"
                        href="#"
                        class="btn btn-default pull-right"
                        data-toggle="modal"
                        data-target="#add-project-modal">Create a New Project</a>
            </div>

            {% if left_project %}
            <div class="panel-footer">
                Left project <strong>{{ left_project }}</strong>.
            </div>
            {% endif %}
        </div>

        <div class="panel panel-default">
            <div class="panel-body settings-block">
                    {% csrf_token %}
                    <h2>Close Account</h2>
                    <p>This will permanently remove your {{ site_name }} account.</p>
                    <div class="text-right">
                        <a
                            id="close-account"
                            href="{% url 'hc-close' %}"
                            class="btn btn-default">Close Account</a>
                    </div>
            </div>
        </div>
    </div>
</div>

<div id="leave-project-modal" class="modal">
    <div class="modal-dialog">
        <form id="leave-project-form" method="post">
            {% csrf_token %}
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4>Leave This Project?</h4>
                </div>
                <div class="modal-body">
                    <p>
                        You are about to leave the project <strong id="leave-project-name"></strong>.
                        You will lose access to its checks and integrations.
                    </p>
                    <p>Are you sure?</p>
                    <input
                        type="hidden"
                        name="code"
                        id="leave-project-code" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button
                        type="submit"
                        name="leave_project"
                        class="btn btn-danger">Leave Project</button>
                </div>
            </div>
        </form>
    </div>
</div>

{% include "accounts/add_project_modal.html" %}

{% endblock %}

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