@model WalletSetupViewModel
@addTagHelper *, BundlerMinifier.TagHelpers
@{
    Layout = "_LayoutWalletSetup";
    ViewData.SetActivePageAndTitle(StoreNavPages.Wallet, "Scan QR code", Context.GetStoreData().StoreName);
}

@section Navbar {
    <a asp-controller="Stores" asp-action="ImportWallet" asp-route-storeId="@Model.StoreId" asp-route-cryptoCode="@Model.CryptoCode" asp-route-method="">
        <vc:icon symbol="back" />
    </a>
}

<header class="text-center">
    <h1>@ViewData["Title"]</h1>
    <p class="lead text-secondary mt-3">Scan the extended public key, also called "xpub", shown on your wallet's display.</p>
</header>

@if (!ViewContext.ModelState.IsValid)
{
    <div asp-validation-summary="All" class="text-danger"></div>
}

<div class="my-5">
    <partial name="CameraScanner"/>
    <form id="qr-import-form" method="post">
        <input asp-for="WalletFileContent" type="hidden" />
    </form>
</div>

<p class="mt-5">
    Generate a QR code of the extended public key in your wallet (see instructions for supported wallets below).
    Allow the browser access to your camera and hold the code to the camera when the scan prompt appears.
</p>

<table class="table table-hover">
    <thead>
    <tr>
        <th>Wallet</th>
        <th>Instructions</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="text-nowrap">Cobo Vault</td>
        <td>Open Wallet Settings ❯ Show/Export XPUB</td>
    </tr>
    <tr>
        <td>BlueWallet</td>
        <td>Open Wallet Settings ❯ Show Wallet XPUB</td>
    </tr>
    <tr>
        <td>Passport</td>
        <td>Pair Wallet ❯ BTCPay ❯ QR Code</td>
    </tr>
    <tr>
        <td>Specter DIY</td>
        <td>Master public keys ❯ Select key ❯ Disable "Show derivation path"</td>
    </tr>
    </tbody>
</table>

@section PageHeadContent {
    <link href="~/vendor/vue-qrcode-reader/vue-qrcode-reader.css" rel="stylesheet" asp-append-version="true"/>
}

@section PageFootContent {
    <partial name="_ValidationScriptsPartial" />
    <bundle name="wwwroot/bundles/camera-bundle.min.js"></bundle>
    <script>
        window.coinName = "@Model.Network.DisplayName.ToLowerInvariant()";
        document.addEventListener("DOMContentLoaded", function () {
            initCameraScanningApp("Scan wallet QR", data => {
                document.getElementById("WalletFileContent").value = data;
                document.getElementById("qr-import-form").submit();
            });
        });
    </script>
}