{% include "headitem.html.twig" with {title: "GENERAL_ADMIN_TITLE"|translate} %}
{% include "@d3totp/admin/inc/bootstrap.html.twig" %}

{% set totp = edit.d3GetSessionedTotp() %}
{% set userid = edit.getId() %}
{{ totp.loadByUserId(userid) }}

{% if readonly %}
    {% set readonly = "readonly disabled" %}
{% else %}
    {% set readonly = "" %}
{% endif %}

<style>
    td.edittext {
        white-space: normal;
    }
    .hero {
        display: inline-block;
    }
    .hero > h1 {
        padding: 0.3em 0;
    }
    .hero > div {
        text-align: right;
        color: #6c7c98;
    }
    .container-fluid {
        font-size: 13px;
    }
</style>

{% if force2FA %}
    <div class="hero">
        <h1>{{ translate({ ident: "D3_TOTP_FORCE2FATITLE" }) }}</h1>
        <div>{{ translate({ ident: "D3_TOTP_FORCE2FASUB" }) }}</div>
    </div>
{% endif %}

<form name="transfer" id="transfer" action="{{ oViewConf.getSelfLink()|raw }}" method="post">
    {{ oViewConf.getHiddenSid()|raw }}
    <input type="hidden" name="oxid" value="{{ oxid }}">
    <input type="hidden" name="cl" value="{{ oViewConf.getActiveClassName() }}">
</form>

<form name="myedit" id="myedit" action="{{ oViewConf.getSelfLink()|raw }}" method="post" style="padding: 0;margin: 0;height:0;">
    {{ oViewConf.getHiddenSid()|raw }}
    <input type="hidden" name="cl" value="{{ oViewConf.getActiveClassName() }}">
    <input type="hidden" name="fnc" value="">
    <input type="hidden" name="oxid" value="{{ oxid }}">
    <input type="hidden" name="editval[d3totp__oxid]" value="{{ totp.getId() }}">
    <input type="hidden" name="editval[d3totp__oxuserid]" value="{{ oxid }}">

    {% if sSaveError %}
        <table style="padding:0; border:0; width:98%;">
            <tr>
                <td></td>
                <td class="errorbox">{{ translate({ ident: sSaveError }) }}</td>
            </tr>
        </table>
    {% endif %}

    {% if oxid and oxid != ' - 1' %}
        <div class="container-fluid">
            <div class="row">
                <div class="col-6">
                    <div class="card">
                        {% block user_d3user_totp_form1 %}
                            {% if false == totp.getId() %}
                                <div class="card-header">
                                    {{ translate({ ident: "D3_TOTP_REGISTERNEW" }) }}
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-4">
                                            {{ translate({ ident: "D3_TOTP_QRCODE", suffix: "COLON" }) }}
                                        </div>
                                        <div class="col-8">
                                            {{ totp.getQrCodeElement()|raw }}
                                            {% include "inputhelp.html.twig" with {'sHelpId': help_id("D3_TOTP_QRCODE_HELP"), 'sHelpText': help_text("D3_TOTP_QRCODE_HELP")} %}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-4">
                                            <label for="secret">{{ translate({ ident: "D3_TOTP_SECRET", suffix: "COLON" }) }}</label>
                                        </div>
                                        <div class="col-8">
                                            <textarea rows="3" cols="50" id="secret" name="secret" class="editinput" readonly="readonly">{{ totp.getSecret() }}</textarea>
                                            {% include "inputhelp.html.twig" with {'sHelpId': help_id("D3_TOTP_SECRET_HELP"), 'sHelpText': help_text("D3_TOTP_SECRET_HELP")} %}
                                        </div>
                                    </div>
                                </div>
                            {% elseif force2FA %}
                                <div class="card-header">
                                    {{ translate({ ident: "D3_TOTP_ADMINBACKEND" }) }}
                                </div>
                                <div class="card-body">
                                    <input
                                        type="submit" class="edittext" id="oLockButton" name="delete"
                                        value="{{ translate({ ident: "D3_TOTP_ADMINCONTINUE" }) }}"
                                        onClick="document.myedit.fnc.value='';document.myedit.cl.value='admin_start'"
                                    >
                                </div>
                            {% else %}
                                <div class="card-header">
                                    {{ translate({ ident: "D3_TOTP_REGISTEREXIST" }) }}
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-12">
                                            {{ translate({ ident: "D3_TOTP_REGISTERDELETE_DESC" }) }}
                                            <br>
                                            <br>
                                            <button type="submit" {{ readonly }} class="btn btn-outline-danger btn-sm" onClick="document.myedit.fnc.value='delete'">
                                                {{ translate({ ident: "D3_TOTP_REGISTERDELETE" }) }}
                                            </button>
                                        </div>
                                    </div>
                                    <br>
                                </div>
                            {% endif %}
                        {% endblock %}
                    </div>
                </div>
                <div class="col-6">
                    <div class="card">
                        {% block user_d3user_totp_form2 %}
                            {% if false == totp.getId() %}
                                <div class="card-header">
                                    {{ translate({ ident: "D3_TOTP_CONFIRMATION" }) }}
                                </div>
                                <div class="card-body">
                                    <div class="row" style="margin-top: 20px;">
                                        <div class="col-4">
                                            <label for="otp">{{ translate({ ident: "D3_TOTP_CURROTP" }) }}</label>
                                        </div>
                                        <div class="col-8">
                                            <input type="text" class="editinput" size="6" maxlength="6" id="otp" name="otp" value="" autofocus="autofocus" {{ readonly }}>
                                            {% include "inputhelp.html.twig" with {'sHelpId': help_id("D3_TOTP_CURROTP_HELP"), 'sHelpText': help_text("D3_TOTP_CURROTP_HELP")} %}
                                        </div>
                                    </div>
                                    <div class="row" style="margin-top: 20px;">
                                        <div class="col-4"></div>
                                        <div class="col-8">
                                            <button type="submit" {{ readonly }} class="btn btn-primary btn-success btn-sm" onClick="document.myedit.fnc.value='save'">
                                                {{ translate({ ident: "D3_TOTP_SAVE" }) }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            {% else %}
                                <div class="card-header">
                                    {{ translate({ ident: "D3_TOTP_BACKUPCODES" }) }}
                                </div>
                                <div class="card-body">
                                    {% if oView.getBackupCodes() %}
                                        <div class="row">
                                            <div class="col-6">
                                                <label for="backupcodes">{{ translate({ ident: "D3_TOTP_BACKUPCODES_DESC" }) }}</label>
                                            </div>
                                            <div class="col-6">
                                                <textarea id="backupcodes" rows="10" cols="20">{{ oView.getBackupCodes() }}</textarea>
                                            </div>
                                        </div>
                                    {% else %}
                                        <div class="row">
                                            <div class="col-12">
                                                {{ translate({ ident: "D3_TOTP_AVAILBACKUPCODECOUNT", args: oView.getAvailableBackupCodeCount() }) }}
                                                <br>
                                                <br>
                                                {{ translate({ ident: "D3_TOTP_AVAILBACKUPCODECOUNT_DESC" }) }}
                                            </div>
                                        </div>
                                    {% endif %}
                                </div>
                            {% endif %}
                        {% endblock %}
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
</form>

{% if not force2FA %}
    {% include "bottomnaviitem.html.twig" %}
    {% include "bottomitem.html.twig" %}
{% endif %}