{% extends 'layouts/base.njk' %}
{% import 'macros.njk' as macros %}

{% set title = 'Account' %}
{% set decription = 'Manage your account settings and data.' %}

{% block body %}
    <div class="container">
        <div class="panel">
            <h2><i data-feather="user"></i> Personal information</h2>

            {% if display_email_warning and emails | length <= 0 %}
                {{ macros.message('warning', 'To avoid losing access to your account, please add an email address.') }}
            {% endif %}

            {% for field in user.getPersonalInfoFields() %}
                <p>{{ field.name }}: {{ field.value }}</p>
            {% endfor %}

            {% if main_email.email | length > 0 %}
                <p>Contact email: {{ main_email.email }} <a href="#emails">More...</a></p>
            {% endif %}
        </div>

        {% if has_name_component %}
            {% include './name_panel.njk' %}
        {% endif %}

        {% if has_password_component %}
            {% include './password_panel.njk' %}
        {% endif %}

        <section class="panel">
            <h2 id="emails"><i data-feather="shield"></i> Email addresses</h2>

            <table class="data-table">
                <thead>
                <tr>
                    <th>Type</th>
                    <th>Address</th>
                    <th>Actions</th>
                </tr>
                </thead>

                <tbody>
                {% for email in emails %}
                    {% if email.id == user.main_email_id %}
                        <tr>
                            <td>Main</td>
                            <td>{{ email.email }}</td>
                            <td></td>
                        </tr>
                    {% endif %}
                {% endfor %}
                {% for email in emails %}
                    {% if email.id != user.main_email_id %}
                        <tr>
                            <td>Secondary</td>
                            <td>{{ email.email }}</td>
                            <td class="actions">
                                <form action="{{ route('set-main-email') }}" method="POST">
                                    <input type="hidden" name="id" value="{{ email.id }}">

                                    <button class="warning"
                                            onclick="return confirm('Are you sure you want to set {{ email.email }} as your main address?');">
                                        <i data-feather="refresh-ccw"></i> <span class="tip">Set as main address</span>
                                    </button>
                                    {{ macros.csrf(getCsrfToken) }}
                                </form>

                                <form action="{{ route('remove-email') }}" method="POST">
                                    <input type="hidden" name="id" value="{{ email.id }}">

                                    <button class="danger"
                                            onclick="return confirm('Are you sure you want to delete {{ email.email }}?');">
                                        <i data-feather="trash"></i> <span class="tip">Remove</span>
                                    </button>
                                    {{ macros.csrf(getCsrfToken) }}
                                </form>
                            </td>
                        </tr>
                    {% endif %}
                {% endfor %}
                </tbody>
            </table>

            <form action="{{ route('add-email') }}" method="POST" class="sub-panel">
                <h3>Add an email address:</h3>

                {{ macros.field(_locals, 'email', 'email', null, 'Choose a safe email address', 'An email address we can use to identify you in case you lose access to your account', 'required') }}

                <button><i data-feather="plus"></i> Add email address</button>

                {{ macros.csrf(getCsrfToken) }}
            </form>
        </section>
    </div>
{% endblock %}