{% extends "base.twig" %}

{% block head %}
    <script src="/js/jquery.min.js" nonce="{{ site.csp.nonce }}"></script>
    <script src="/js/script.js" nonce="{{ site.csp.nonce }}"></script>
    <script src="/js/account.js" nonce="{{ site.csp.nonce }}"></script>
    <link rel="stylesheet" href="/css/bootstrap.min.css" nonce="{{ site.csp.nonce }}">
    <script src="/js/bootstrap.bundle.min.js" nonce="{{ site.csp.nonce }}"></script>
    <link rel="stylesheet" href="/css/fontawesome.min.css" nonce="{{ site.csp.nonce }}">
    <link rel="stylesheet" href="/css/account.css" nonce="{{ site.csp.nonce }}">
    <title>{{ L("account.title")}} - {{ L(view_title) }}</title>
    {% if site.captcha.enabled %}
        <script nonce="{{ site.csp.nonce }}">
            window.captchaProvider = {{ site.captcha|json_encode()|raw }};
        </script>
        {% if site.captcha.provider == 'recaptcha' %}
            <script src="https://www.google.com/recaptcha/api.js?render={{ site.captcha.site_key }}" nonce="{{ site.csp.nonce }}"></script>
        {% elseif site.captcha.provider == 'hcaptcha' %}
            <script src="https://js.hcaptcha.com/1/api.js" nonce="{{ site.csp.nonce }}"></script>
        {% endif %}
    {% endif %}
{% endblock %}

{% block body %}
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-3 py-5 bg-primary text-white text-center" style='border-top-left-radius:.4em;border-bottom-left-radius:.4em;margin-left: auto'>
                <div class="card-body">
                    <i class="fas fa-{{ view_icon }} fa-3x"></i>
                    <h2 class="py-3">{{ L(view_title) }}</h2>
                    <p>{{ L(view_description) }}</p>
                </div>
            </div>
            <div class="col-md-5 pt-5 pb-2 border border-info" style='border-top-right-radius:.4em;border-bottom-right-radius:.4em;margin-right:auto'>
                {% block view_content %}{% endblock %}
                <div class='alert mt-2' style='display:none' id='alertMessage'></div>
            </div>
        </div>
    </div>
{% endblock %}