{% extends "@WallabagCore/layout.html.twig" %}

{% block title %}{{ 'config.page_title'|trans }} > {{ 'config.otp.page_title'|trans }}{% endblock %}

{% block content %}
    <div class="row">
        <div class="col s12">
            <div class="card-panel settings">
                <div class="row">
                    <h5>{{ 'config.otp.page_title'|trans }}</h5>

                    <ol>
                        <li>
                            <p>{{ 'config.otp.app.two_factor_code_description_1'|trans }}</p>
                            <p>{{ 'config.otp.app.two_factor_code_description_2'|trans }}</p>

                            <p>
                                <img id="2faQrcode" class="hide-on-med-and-down" />
                                <script>
                                    document.getElementById('2faQrcode').src = jrQrcode.getQrBase64('{{ qr_code|raw }}');
                                </script>
                            </p>

                            <p>
                                {{ 'config.otp.app.two_factor_code_description_5'|trans }} <pre>{{ secret }}</pre>
                            </p>
                        </li>
                        <li>
                            <p>{{ 'config.otp.app.two_factor_code_description_3'|trans }}</p>

                            <p><pre>{{ backupCodes|join("\n") }}</pre></p>
                        </li>
                        <li>
                            <p>{{ 'config.otp.app.two_factor_code_description_4'|trans }}</p>

                            {% for flash_message in app.session.flashbag.get("two_factor") %}
                            <div class="card-panel red darken-1 black-text">
                                {{ flash_message|trans }}
                            </div>
                            {% endfor %}

                            <form class="form" action="{{ path("config_otp_app_check") }}" method="post">
                                <div class="card-content">
                                    <div class="row">
                                        <div class="input-field col s12">
                                            <label for="_auth_code">{{ "auth_code"|trans({}, 'SchebTwoFactorBundle') }}</label>
                                            <input id="_auth_code" type="text" autocomplete="off" name="_auth_code" />
                                        </div>
                                    </div>
                                </div>
                                <div class="card-action">
                                    <a href="{{ path('config_otp_app_cancel') }}" class="waves-effect waves-light grey btn">
                                        {{ 'config.otp.app.cancel'|trans }}
                                    </a>
                                    <button class="btn waves-effect waves-light" type="submit" name="send">
                                        {{ 'config.otp.app.enable'|trans }}
                                        <i class="material-icons right">send</i>
                                    </button>
                                </div>
                            </form>
                        </li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
{% endblock %}