{# @var user \App\Entity\UserSystem\User #}

<div class="card mt-4">
    <div class="card-header">
        <i class="fa fa-shield-alt fa-fw" aria-hidden="true"></i>
        {% trans %}user.settings.2fa_settings{% endtrans %}
    </div>
    <div class="card-body">

        <ul class="nav nav-tabs" id="tfa-tabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="google-tab" data-toggle="tab" href="#tfa-google" role="tab"
                   aria-controls="home" aria-selected="true">{% trans %}tfa.settings.google.tab{% endtrans %}</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="backup-tab" data-toggle="tab" href="#tfa-backup" role="tab"
                   aria-controls="profile" aria-selected="false">{% trans %}tfa.settings.bakup.tab{% endtrans %}</a>
            </li>
        </ul>
        <div class="tab-content mt-3 mb-3" id="tfa-tabs-content">
            <div class="tab-pane fade show active" id="tfa-google" role="tabpanel" aria-labelledby="google-tab">
                {{ form_start(google_form) }}
                {% if not tfa_google.enabled %}
                    <div class="offset-3">
                        <h6>{% trans %}tfa_google.disabled_message{% endtrans %}</h6>
                    </div>

                    <div class="offset-3 row">
                        <div class="col-3">
                            <canvas class="qrcode" data-content="{{ tfa_google.qrContent }}"></canvas>
                        </div>
                        <div class="col-9 my-auto">
                            <ol class="">
                                <li>{% trans %}tfa_google.step.download{% endtrans %}</li>
                                <li>{% trans %}tfa_google.step.scan{% endtrans %}</li>
                                <li>{% trans %}tfa_google.step.input_code{% endtrans %}</li>
                                <li>{% trans %}tfa_google.step.download_backup{% endtrans %}</li>
                            </ol>
                        </div>
                    </div>

                    <div class="offset-3">
                        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#manualSetupCollapse" aria-expanded="false" aria-controls="manualSetupCollapse">
                            {% trans %}tfa_google.manual_setup{% endtrans %}
                        </button>
                        <div class="collapse" id="manualSetupCollapse">
                            <div class="card card-body mb-2">
                                <p><b>{% trans %}tfa_google.manual_setup.type</b>{% endtrans %}: TOTP</p>
                                <p><b>{% trans %}tfa_google.manual_setup.username</b>{% endtrans %}: {{ tfa_google.username }}</p>
                                <p><b>{% trans %}tfa_google.manual_setup.secret</b>{% endtrans %}: {{ tfa_google.secret }}</p>
                                <p><b>{% trans %}tfa_google.manual_setup.digit_count</b>{% endtrans %}: 6</p>

                            </div>
                        </div>
                    </div>

                    {{ form_row(google_form.google_confirmation) }}
                {% else %}
                    <div class="offset-3">
                        <h6>{% trans %}tfa_google.enabled_message{% endtrans %}</h6>
                    </div>
                {% endif %}
                {{ form_row(google_form.submit) }}
                {{ form_end(google_form) }}
            </div>
            <div class="tab-pane fade" id="tfa-backup" role="tabpanel" aria-labelledby="backup-tab">
                {% if user.backupCodes is empty %}
                    <div class="offset-3">
                        <h6>{% trans %}tfa_backup.disabled{% endtrans %}</h6>
                        <span>{% trans %}tfa_backup.explanation{% endtrans %}</span>
                    </div>
                {% else %}
                    {{ form_start(backup_form) }}
                    <div class="offset-3">
                        <h6>{% trans %}tfa_backup.enabled{% endtrans %}</h6>
                        <span>{% trans %}tfa_backup.explanation{% endtrans %}</span>
                    </div>
                    <div class="offset-3 mt-2">
                        <p class="mb-0"><b>{% trans %}tfa_backup.remaining_tokens{% endtrans %}:</b> {{ user.backupCodes | length }}</p>
                        <p><b>{% trans %}tfa_backup.generation_date{% endtrans %}:</b> {{ user.backupCodesGenerationDate | format_datetime }}</p>
                    </div>
                    <div class="offset-3">
                        <a href="{{ url('show_backup_codes') }}" target="_blank" data-no-ajax class="btn btn-primary">{% trans %}tfa_backup.show_codes{% endtrans %}</a>
                    </div>

                    <div class="offset-3 mt-2">
                        {{ form_widget(backup_form.reset_codes) }}
                    </div>
                    {{ form_end(backup_form) }}

                {% endif %}
            </div>
        </div>


    </div>
</div>