<?php
$this->layout('main', ['title' => __('Enable Two-Factor Authentication'), 'manual' => true]);

/** @var \App\Assets $assets */
$assets
    ->load('clipboard')
?>

<div class="row">
    <div class="col-8">
        <div class="card">
            <div class="card-header bg-primary-dark">
                <h2 class="card-title"><?=__('Enable Two-Factor Authentication') ?></h2>
            </div>
            <div class="card-body">
                <h3 class="card-title mt-2"><?=__('Step 1: Scan QR Code') ?></h3>

                <p class="card-text"><?=__('From your smartphone, scan the code to the right using an authentication app of your choice (FreeOTP, Authy, etc).') ?></p>

                <h3 class="card-title mt-0"><?=__('Step 2: Verify Generated Code') ?></h3>

                <p class="card-text"><?=__('To verify that the code was set up correctly, enter the 6-digit code the app shows you.') ?></p>

                <?=$this->fetch('system/form_edit', ['form' => $form]) ?>
            </div>
        </div>
    </div>
    <div class="col-4">
        <div class="card">
            <div class="card-header bg-primary-dark">
                <h2 class="card-title"><?=__('QR-Code') ?></h2>
            </div>
            <div class="card-body">
                <figure>
                    <?=$qr_code?>
                </figure>

                <div class="d-flex">
                    <div class="flex-fill" style="max-width: 80%">
                        <code id="totp_uri" class="d-inline-block text-truncate" style="width: 100%;"><?=$totp_uri?></code>
                    </div>
                    <div class="flex-shrink-0">
                        <button class="btn btn-copy btn-link btn-xs py-1 px-2" data-clipboard-target="#totp_uri">
                            <i class="material-icons sm">file_copy</i><span class="sr-only"><?=__(
                                    'Copy to Clipboard'
                                )?></span></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
