<div class="twofas-backup-codes-box-tutorial{% if modal %} twofas-backup-codes-box-tutorial-modal{% endif %}">
    <h6>{{ esc_html__('How to use backup codes:', '2fas-light') }}</h6>

    <div class="twofas-backup-codes-box-tutorial-content">
        <div class="twofas-backup-codes-box-tutorial-content-step">
            <div class="twofas-backup-codes-box-tutorial-content-step-line"></div>
            <div class="twofas-backup-codes-box-tutorial-content-step-content">
                <img src="{{ twofas_light_plugin_path ~ 'assets/img/paper.svg' }}" alt="{{ esc_attr__('Wrote down your backup codes', '2fas-light') }}" />
                <p>{{ esc_html__('Find your file or a piece of paper with printed backup codes.', '2fas-light') }}</p>
            </div>
        </div>
        <div class="twofas-backup-codes-box-tutorial-content-step">
            <div class="twofas-backup-codes-box-tutorial-content-step-line"></div>
            <div class="twofas-backup-codes-box-tutorial-content-step-content">
                <img src="{{ twofas_light_plugin_path ~ 'assets/img/mobile-phone.svg' }}" alt="{{ esc_attr__('Type a backup code', '2fas-light') }}" />
                <p>{{ esc_html__("Type the code during logging in when you're asked to use the 2FAS application token.", '2fas-light')|raw }}</p>
            </div>
        </div>
        <div class="twofas-backup-codes-box-tutorial-content-step">
            <div class="twofas-backup-codes-box-tutorial-content-step-line"></div>
            <div class="twofas-backup-codes-box-tutorial-content-step-content">
                <img src="{{ twofas_light_plugin_path ~ 'assets/img/vault.svg' }}" alt="{{ esc_attr__('Keep your backup codes in a safe place', '2fas-light') }}" />
                <p>{{ esc_html__('Remember to keep your backup codes in a safe place.', '2fas-light') }}</p>
            </div>
        </div>
    </div>
</div>
