@model RecoverySeedBackupViewModel
@{
    Layout = "_LayoutSimple";
    ViewData["Title"] = "Your recovery phrase";
}

@section PageHeadContent {
    <style>
        @@media (min-width: 476px) { ol#RecoveryPhrase {max-height:16em;} }
        @@media (min-width: 768px) { ol#RecoveryPhrase {max-height:12em;} }
        @@media (min-width: 1200px) { ol#RecoveryPhrase {max-height:8em;} }
        form#RecoveryConfirmation button { position: absolute; bottom:0; left:50%; width:200px; margin-left:-100px; }
        form#RecoveryConfirmation button:not([disabled]) { display: none; }
        form#RecoveryConfirmation input:checked ~ button[disabled] { display: none; }
        form#RecoveryConfirmation input:checked + button:not([disabled]) { display: inline-block; }
    </style>
}

@section PageFootContent {
    <partial name="_ValidationScriptsPartial" />
}

<div class="row justify-content-md-center">
    <div class="col-lg-10 text-center">
        <partial name="_StatusMessage" />

        <div class="d-flex flex-column align-items-center justify-content-center">
            <span class="fa fa-info-circle align-self-center p-3" style="font-size:4em;"></span>

            <h1 class="text-center text-primary mb-5">Secure your recovery&nbsp;phrase</h1>
        </div>
        <div class="lead text-center">
            <p>
                <span class="d-sm-block">The words below are called your recovery phrase.</span>
                <span class="d-sm-block"><strong>Write them down on a piece of paper in the exact order.</strong></span>
            </p>
        </div>
        <ol id="RecoveryPhrase" data-mnemonic="@Model.Mnemonic" class="my-5 d-flex flex-column flex-wrap justify-content-center align-items-center text-start p-0">
            @foreach (var word in Model.Words)
            {
                <li class="ms-4 px-3 py-2 text-secondary" style="flex: 0 1;min-width:10em;">
                    <span class="text-dark h5">@word</span>
                </li>
            }
        </ol>
        <div class="lead text-center" style="max-width:36em;margin-left:auto;margin-right:auto;">
            @if (Model.IsStored)
            {
                <p>
                    The recovery phrase is a backup that allows you to restore your wallet in case of a server crash.
                    If you lose it or write it down incorrectly, you may permanently lose access to your funds.
                    Do not photograph it. Do not store it digitally.
                </p>
                <p>
                    <strong>The recovery phrase will also be stored on the server as a hot wallet.</strong>
                </p>
            }
            else
            {
                <p>
                    The recovery phrase allows you to access and restore your wallet.
                    If you lose it or write it down incorrectly, you will permanently lose access to your funds.
                    Do not photograph the recovery phrase and do not store it digitally.
                </p>
                <p>
                    <strong>The recovery phrase will permanently be erased from the server.</strong>
                </p>
            }
            @if (!string.IsNullOrEmpty(Model.Passphrase))
            {
                <p class="mt-3 mb-0">Please make sure to also write down your passphrase.</p>
            }
        </div>
        @if (Model.RequireConfirm)
        {
            <form id="RecoveryConfirmation" action="@Model.ReturnUrl" class="position-relative d-flex align-items-start justify-content-center" style="margin-top:4rem;padding-bottom: 80px" rel="noreferrer noopener">
                <label class="form-check-label lead order-2" for="confirm">I have written down my recovery phrase and stored it in a secure location</label>
                <input type="checkbox" class="mt-2 me-3 order-1 form-check-input" id="confirm">
                <button type="submit" class="btn btn-primary btn-lg px-5 order-3" id="submit">Done</button>
                <button type="submit" class="btn btn-primary btn-lg px-5 order-3" disabled>Done</button>
            </form>
        }
        else
        {
            <a href="@Model.ReturnUrl" class="btn btn-primary btn-lg mt-3 px-5 order-3" id="proceed" rel="noreferrer noopener">Done</a>
        }
    </div>
</div>