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

{% import "helper.twig" as helper %}

<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-bs-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-bs-toggle="tab" href="#tfa-backup" role="tab"
                   aria-controls="profile" aria-selected="false">{% trans %}tfa.settings.bakup.tab{% endtrans %}</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="u2f-tab" data-bs-toggle="tab" href="#tfa-u2f" role="tab"
                   aria-controls="profile" aria-selected="false">{% trans %}tfa.settings.u2f.tab{% endtrans %}</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="trustedDevices-tab" data-bs-toggle="tab" href="#tfa-trustedDevices" role="tab"
                   aria-controls="profile" aria-selected="false">{% trans %}tfa.settings.trustedDevices.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">
                {% set google_form_attr = {}  %}
                {% if tfa_google.enabled %}
                    {% set google_form_attr = { 'data-delete-form': true, 'data-controller': 'elements--delete-btn', 'data-action': 'submit->elements--delete-btn#submit',
                        'data-delete-title': 'tfa_google.disable.confirm_title' | trans, 'data-delete-message': 'tfa_google.disable.confirm_message'|trans} %}
                {% endif %}

                {{ form_start(google_form, { 'attr': google_form_attr}) }}
                {% if not tfa_google.enabled %}
                    <div class="offset-sm-3">
                        <h6>{% trans %}tfa_google.disabled_message{% endtrans %}</h6>
                    </div>

                    <div class="offset-sm-3 row">
                        <div class="col-sm-3">
                            <img width="100%" class="img-fluid bg-white p-2" alt="{{ tfa_google.qrContent }}" src="{{ barcode_svg(tfa_google.qrContent) | data_uri("image/svg+xml") }}">
                        </div>
                        <div class="col-sm-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-sm-3">
                        <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-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{% endtrans %}</b>: TOTP</p>
                                <p><b>{% trans %}tfa_google.manual_setup.username{% endtrans %}</b>: {{ tfa_google.username }}</p>
                                <p><b>{% trans %}tfa_google.manual_setup.secret{% endtrans %}</b>: {{ tfa_google.secret }}</p>
                                <p><b>{% trans %}tfa_google.manual_setup.digit_count{% endtrans %}</b>: 6</p>

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

                    {{ form_row(google_form.google_confirmation) }}
                {% else %}
                    <div class="offset-sm-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-sm-3">
                        <h6>{% trans %}tfa_backup.disabled{% endtrans %}</h6>
                        <span>{% trans %}tfa_backup.explanation{% endtrans %}</span>
                    </div>
                {% else %}
                    {% set backup_form_attr = { 'data-delete-form': true, 'data-controller': 'elements--delete-btn', 'data-action': 'submit->elements--delete-btn#submit',
                        'data-delete-title': 'tfa_backup.reset_codes.confirm_title' | trans, 'data-delete-message': 'tfa_backup.reset_codes.confirm_message' | trans} %}
                    {{ form_start(backup_form, { 'attr': backup_form_attr}) }}
                    <div class="offset-sm-3">
                        <h6>{% trans %}tfa_backup.enabled{% endtrans %}</h6>
                        <span>{% trans %}tfa_backup.explanation{% endtrans %}</span>
                    </div>
                    <div class="offset-sm-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-sm-3">
                        <a href="{{ path('show_backup_codes') }}" target="_blank" data-turbo="false" class="btn btn-primary">{% trans %}tfa_backup.show_codes{% endtrans %}</a>
                    </div>

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

                {% endif %}
            </div>

            <div class="tab-pane fade" id="tfa-u2f" role="tabpanel" aria-labelledby="u2f-tab">
                <p>{% trans %}tfa_u2f.explanation{% endtrans %}</p>

                {% if user.legacyU2FKeys is not empty or user.webauthnKeys is not empty %}
                    <b>{% trans %}tfa_u2f.table_caption{% endtrans %}:</b>
                    <form action="{{ path('u2f_delete') }}" method="post"
                            {{ stimulus_controller('elements/delete_btn') }} {{ stimulus_action('elements/delete_btn', "submit", "submit") }}
                          data-delete-title="{% trans %}tfa_u2f.delete_u2f.confirm_title{% endtrans %}"
                          data-delete-message="{% trans %}tfa_u2f.delete_u2f.confirm_message{% endtrans %}">
                        <input type="hidden" name="_method" value="DELETE">
                        <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ user.id) }}">
                        <table class="table table-striped table-bordered table-sm mt-2">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>{% trans %}tfa_u2f.keys.name{% endtrans %}</th>
                                <th>{% trans %}tfa_u2f.keys.added_date{% endtrans %}</th>
                                <th>{% trans %}api_tokens.last_time_used{% endtrans %}</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for key in user.legacyU2FKeys %}
                                <tr>
                                    <td>{{ loop.index }} <b>(U2F)</b></td>
                                    <td>{{ key.name }}</td>
                                    <td>{{ key.addedDate | format_datetime }}</td>
                                    <td></td> {# For legacy keys no last time use date is saved #}
                                    <td><button type="submit" class="btn btn-danger btn-sm" name="key_id" value="{{ key.id }}"><i class="fas fa-trash-alt fa-fw"></i> {% trans %}tfa_u2f.key_delete{% endtrans %}</button></td>
                                </tr>
                            {% endfor %}
                            {% for key in user.webauthnKeys %}
                                <tr>
                                    <td>{{ loop.index }} <b>(WebAuthn)</b></td>
                                    <td>{{ key.name }}</td>
                                    <td>{{ key.addedDate | format_datetime }}</td>
                                    <td>{{ helper.format_date_nullable(key.lastTimeUsed) }}</td>
                                    <td><button type="submit" class="btn btn-danger btn-sm" name="webauthn_key_id" value="{{ key.id }}"><i class="fas fa-trash-alt fa-fw"></i> {% trans %}tfa_u2f.key_delete{% endtrans %}</button></td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </form>
                {% else %}
                    <p><b>{% trans %}tfa_u2f.no_keys_registered{% endtrans %}</b></p>
                {% endif %}

                {% if not user.samlUser %}
                    <a href="{{ path('webauthn_register') }}" class="btn btn-success" ><i class="fas fa-plus-square fa-fw"></i> {% trans %}tfa_u2f.add_new_key{% endtrans %}</a>
                {% endif %}
            </div>

            <div class="tab-pane fade" id="tfa-trustedDevices" role="tabpanel" aria-labelledby="trustedDevices-tab-tab">
                <p>{% trans %}tfa_trustedDevices.explanation{% endtrans %}</p>
                <form action="{{ path('tfa_trustedDevices_invalidate') }}" method="post"
                        {{ stimulus_controller('elements/delete_btn') }} {{ stimulus_action('elements/delete_btn', "submit", "submit") }}
                      data-delete-title="{% trans %}tfa_trustedDevices.invalidate.confirm_title{% endtrans %}"
                      data-delete-message="{% trans %}tfa_trustedDevices.invalidate.confirm_message{% endtrans %}">
                    <input type="hidden" name="_method" value="DELETE">
                    <input type="hidden" name="_token" value="{{ csrf_token('devices_reset' ~ user.id) }}">

                    <button class="btn btn-danger" type="submit" {% if user.samlUser %}disabled{% endif %}>{% trans %}tfa_trustedDevices.invalidate.btn{% endtrans %}</button>
                </form>
            </div>

        </div>


    </div>
</div>