<div class="row">
    <div class="col-md-5">
        <div class="table-fit">
            <table class="table">
                <thead>
                    <tr>
                        <th colspan="2">
                            <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_mfa_provider.xlf:edit.table.head"/>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_mfa_provider.xlf:edit.table.name"/>
                        </td>
                        <td>
                            <f:if condition="{name}">
                                <f:then>
                                    {name}
                                </f:then>
                                <f:else>
                                    <input type="text" id="name" name="name" value="" class="form-control" placeholder="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_mfa_provider.xlf:edit.table.nameInputPlaceholder')}"/>
                                </f:else>
                            </f:if>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_mfa_provider.xlf:edit.table.recoveryCodesLeft"/>
                        </td>
                        <td>
                            {amountOfCodesLeft}
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_mfa_provider.xlf:edit.table.lastUsed"/>
                        </td>
                        <td>
                            <f:if condition="{lastUsed}">
                                <f:then>{lastUsed}</f:then>
                                <f:else><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_mfa_provider.xlf:edit.table.lastUsed.default"/></f:else>
                            </f:if>
                        </td>
                    </tr>
                    <f:if condition="{updated}">
                        <tr>
                            <td>
                                <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_mfa_provider.xlf:edit.table.lastUpdated"/>
                            </td>
                            <td>
                                {updated}
                            </td>
                        </tr>
                    </f:if>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-5">
        <h3><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_mfa_provider.xlf:edit.regenerate"/></h3>
        <p><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_mfa_provider.xlf:edit.regenerate.description" arguments="{0: amountOfCodesLeft}"/></p>
        <f:comment>
            TODO: The following should be a button which directly triggers a form submit
            with the information to regenerate the recovery codes saved in some hidden field.
        </f:comment>
        <div class="mb-3">
            <div class="form-check">
                <input type="checkbox" name="regenerateCodes" id="regenerateCodes" class="form-check-input" value="1" />
                <label class="form-check-label" for="regenerateCodes">
                    <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_mfa_provider.xlf:edit.regenerate.inputLabel"/>
                </label>
            </div>
        </div>
    </div>
</div>
