{% extends 'backoffice/base.html.twig' %}

{% block title %}{{ parent() }}{{ 'Settings'|trans }}{% endblock %}

{% block breadcrumbs %}
    <nav aria-label="breadcrumb" class="mb-3">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ path('tvdt_backoffice_index') }}">{{ 'Home'|trans }}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ 'Settings'|trans }}</li>
        </ol>
    </nav>
{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-lg-6 col-12">
            <h2 class="mb-4">{{ 'Settings'|trans }}</h2>

            <section class="mb-5">
                <h4>{{ 'Language'|trans }}</h4>
                <form action="{{ path('tvdt_backoffice_settings_language') }}" method="POST">
                    <input type="hidden" name="_token" value="{{ csrf_token('settings_language') }}">
                    <div class="mb-3">
                        <label class="form-label" for="settings-language">{{ 'Language'|trans }}</label>
                        <select class="form-select" id="settings-language" name="language">
                            <option value="nl" selected>Nederlands</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">{{ 'Save'|trans }}</button>
                </form>
            </section>

            <section class="mb-5">
                <h4>{{ 'Change password'|trans }}</h4>
                {{ form(passwordForm, {action: path('tvdt_backoffice_settings_password')}) }}
            </section>

            <section class="mb-5">
                <h4>{{ 'Change email'|trans }}</h4>
                <p class="mb-1">
                    <strong>{{ 'Current email address:'|trans }}</strong> {{ app.user.userIdentifier }}
                    {% if app.user.isVerified %}
                        <span class="badge text-bg-success">{{ 'Confirmed'|trans }}</span>
                    {% else %}
                        <span class="badge text-bg-warning">{{ 'Not confirmed'|trans }}</span>
                        <form class="d-inline" action="{{ path('tvdt_backoffice_settings_resend_confirmation') }}" method="POST">
                            <input type="hidden" name="_token" value="{{ csrf_token('resend_confirmation') }}">
                            <button type="submit" class="btn btn-link btn-sm p-0 align-baseline">
                                {{ 'Resend confirmation email'|trans }}
                            </button>
                        </form>
                    {% endif %}
                </p>
                <p>{{ 'After changing your email address you will receive a new confirmation email.'|trans }}</p>
                {{ form(emailForm, {action: path('tvdt_backoffice_settings_email')}) }}
            </section>

            <section class="mb-5" data-controller="bo--popover">
                <h4>{{ 'Your data'|trans }}</h4>
                <span class="d-inline-block" tabindex="0"
                      data-bs-toggle="popover"
                      data-bs-trigger="hover focus"
                      data-bs-content="{{ 'Soon™'|trans }}">
                    <button type="button" class="btn btn-secondary pe-none" disabled>{{ 'Download data'|trans }}</button>
                </span>
            </section>

            <section class="mb-5">
                <h4 class="text-danger">{{ 'Danger zone'|trans }}</h4>
                <p>{{ 'Deleting your account also deletes every season you are the only owner of. This cannot be undone.'|trans }}</p>
                <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteAccountModal">
                    {{ 'Delete account...'|trans }}
                </button>
            </section>
        </div>
    </div>

    <div class="modal fade" id="deleteAccountModal" data-bs-backdrop="static"
         tabindex="-1"
         aria-labelledby="deleteAccountModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="{{ path('tvdt_backoffice_settings_delete') }}" method="POST">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="deleteAccountModalLabel">{{ 'Delete account'|trans }}</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p>{{ 'This deletes your account and every season you are the only owner of. Enter your password to confirm.'|trans }}</p>
                        <input type="hidden" name="_token" value="{{ csrf_token('delete_account') }}">
                        <label class="form-label" for="delete-account-password">{{ 'Current password'|trans }}</label>
                        <input type="password" class="form-control" id="delete-account-password"
                               name="password" required autocomplete="current-password">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'Cancel'|trans }}</button>
                        <button type="submit" class="btn btn-danger">{{ 'Delete account'|trans }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}