{% capture append = "oxidBlock_content" %}

<div class="container-xxl py-5">
    <div class="row">
        <h1 class="h3 page-header col pl-0 ml-3">
            {{ translate({ ident: "D3_TOTP_ACCOUNT" }) }}
        </h1>
        <div class="col-12 col-sm-3 button-col">
            {% include "page/account/inc/account_menu.html.twig" with {active_link: "d3totp"} %}
        </div>
    </div>

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

    <style>
        .registerNew {
            display: none;
        }
        dt, dd {
            width: 50%;
            float: left;
            margin-bottom: 10px;
        }
        dd textarea {
            max-width: 98%;
        }
        dt label {
            font-weight: bold;
        }
        {% if false == totp.getId() %}
            .submitBtn {
                display: none;
            }
        {% endif %}
    </style>

    <script type="text/javascript">
        function toggle(id) {
            let div1 = document.getElementById(id);
            if(document.getElementById('totp_use').checked) {
                div1.style.display = 'block';
            } else {
                div1.style.display = 'none';
            }
        }
    </script>

    <div class="card card-lg">
        <div class="card-body">
            {% block d3_account_totp %}
                <form action="{{ oViewConf.getSelfActionLink() }}" name="d3totpform" class="form-horizontal" method="post">
                    <div class="hidden">
                        {{ oViewConf.getHiddenSid()|raw }}
                        {{ oViewConf.getNavFormParams()|raw }}
                        <input type="hidden" id="fncname" name="fnc" value="">
                        <input type="hidden" name="cl" value="{{ oViewConf.getActiveClassName() }}">
                    </div>

                    <div class="{# apex #} card">
                        <h2 class="{# apex #} h5 card-header">
                            {{ translate({ ident: "D3_TOTP_STATUS" }) }}
                        </h2>
                        <div class="{# apex #} card-body">
                            <input id="totp_use" value="1" type="checkbox" name="totp_use" {% if totp.getId() %} checked{% endif %} {% if false == totp.getId() %}onclick="toggle('registerNew'); toggle('submitBtn');"{% endif %}>
                            <label for="totp_use">{{ translate({ ident: "D3_TOTP_ACCOUNT_USE" }) }}</label>
                        </div>
                    </div>

                    {% if false == totp.getId() %}
                        <div class="registerNew {# apex #} card" id="registerNew">
                            <h2 class="{# apex #} h5 card-header">
                                {{ translate({ ident: "D3_TOTP_REGISTERNEW" }) }}
                            </h2>
                            <div class="{# apex #} card-body">
                                <dl>
                                    <dt>
                                        {{ translate({ ident: "D3_TOTP_QRCODE" }) }}&nbsp;
                                    </dt>
                                    <dd>
                                        {{ totp.getQrCodeElement()|raw }}
                                    </dd>
                                </dl>
                                <p>
                                    {{ translate({ ident: "D3_TOTP_QRCODE_HELP" }) }}
                                </p>

                                <hr>

                                <dl>
                                    <dt>
                                        <label for="secret">{{ translate({ ident: "D3_TOTP_SECRET" }) }}</label>
                                    </dt>
                                    <dd>
                                        <textarea rows="3" cols="50" id="secret" name="secret" class="editinput" readonly="readonly">{{ totp.getSecret() }}</textarea>
                                    </dd>
                                </dl>
                                <p>
                                    {{ translate({ ident: "D3_TOTP_SECRET_HELP" }) }}
                                </p>

                                <hr>

                                <dl>
                                    <dt>
                                        <label for="otp">{{ translate({ ident: "D3_TOTP_CURROTP" }) }}</label>
                                    </dt>
                                    <dd>
                                        <input type="text" class="editinput" size="6" maxlength="6" id="otp" name="otp" value="" {{ readonly }}>
                                    </dd>
                                </dl>
                                <p>
                                    {{ translate({ ident: "D3_TOTP_CURROTP_HELP" }) }}
                                </p>
                            </div>
                        </div>
                    {% endif %}

                    {% if totp.getId() %}
                        {% block d3_account_totp_deletenotes %}
                            <div class="{# apex #} card">
                                <h2 class="{# apex #} h5 card-header">
                                    {{ translate({ ident: "D3_TOTP_REGISTEREXIST" }) }}
                                </h2>
                                <div class="{# apex #} card-body">
                                    {{ translate({ ident: "D3_TOTP_REGISTERDELETE_DESC" }) }}
                                </div>
                            </div>
                        {% endblock %}

                        {% block d3_account_totp_backupcodes %}
                            <div class="{# apex #} card">
                                <h2 class="{# apex #} h5 card-header">
                                    {{ translate({ ident: "D3_TOTP_BACKUPCODES" }) }}
                                </h2>
                                <div class="{# apex #} card-body">
                                    {% if oView.getBackupCodes() %}
                                        {% block d3_account_totp_backupcodes_list %}
                                            <label for="backupcodes">{{ translate({ ident: "D3_TOTP_BACKUPCODES_DESC" }) }}</label>
                                            <textarea id="backupcodes" rows="10" cols="20">{{ oView.getBackupCodes() }}</textarea>
                                        {% endblock %}
                                    {% else %}
                                        {% block d3_account_totp_backupcodes_info %}
                                            {{ translate({ ident: "D3_TOTP_AVAILBACKUPCODECOUNT", args: oView.getAvailableBackupCodeCount() }) }}<br>
                                            {{ translate({ ident: "D3_TOTP_AVAILBACKUPCODECOUNT_DESC" }) }}
                                        {% endblock %}
                                    {% endif %}
                                </div>
                            </div>
                        {% endblock %}
                    {% endif %}

                    <div class="mb-3 submitBtn" id="submitBtn">
                        <button type="submit" class="btn btn-primary"
                            {% if totp.getId() %}
                                onclick="
                                    if(false === document.getElementById('totp_use').checked && false === confirm('{{ translate({ ident: "D3_TOTP_REGISTERDELETE_CONFIRM" }) }}')) {return false;}
                                    document.getElementById('fncname').value = 'delete';
                                "
                            {% else %}
                                onclick="document.getElementById('fncname').value = 'create';"
                            {% endif %}
                        >
                            {{ translate({ ident: "D3_TOTP_ACCOUNT_SAVE" }) }}
                        </button>
                    </div>
                </form>
            {% endblock %}
        </div>
    </div>
</div>
{% endcapture %}

{% include "layout/page.html.twig" with {sidebar: "Left"} %}