@model WalletSetupViewModel

@inject Microsoft.Extensions.Localization.IStringLocalizer StringLocalizer

@inject BTCPayNetworkProvider BTCPayNetworkProvider
@{
	Layout = "_LayoutWalletSetup";
	var title = StringLocalizer["Import {0} Wallet", Model.CryptoCode];
	ViewData.SetActivePage(StoreNavPages.OnchainSettings, title, $"{Context.GetStoreData().Id}-{Model.CryptoCode}");
}

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

<header class="text-center">
    <h1 text-translate="true">Choose your import method</h1>
	<p class="lead text-secondary mt-3" text-translate="true">The following methods assume that you already have an existing&nbsp;wallet created and backed up.</p>
</header>
<style>
    .icon.icon-wallet-xpub,
    .icon.icon-scan-qr {
        --icon-size: 2.5rem !important;
    }
</style>
@if (BTCPayNetworkProvider.GetNetwork<BTCPayNetwork>(Model.CryptoCode).VaultSupported)
{
    <div class="mt-5">
        <div class="list-group">
            <a asp-controller="UIStores" asp-action="ImportWallet" asp-route-storeId="@Model.StoreId" asp-route-cryptoCode="@Model.CryptoCode" asp-route-method="hardware" id="ImportHardwareLink" class="list-group-item list-group-item-action only-for-js">
                <div class="image">
                    <vc:icon symbol="wallet-hardware"/>
                </div>
                <div class="content d-flex flex-column flex-lg-row align-items-lg-center justify-content-lg-between me-2">
                    <div>
						<h4 text-translate="true">Connect hardware&nbsp;wallet</h4>
						<p class="mb-0 text-secondary" text-translate="true">Import your public keys using our Vault application</p>
                    </div>
					<small class="d-block text-primary mt-2 mt-lg-0" text-translate="true">Recommended</small>
                </div>
                <vc:icon symbol="caret-right" />
            </a>
            <noscript>
                <div class="list-group-item disabled">
                    <div class="image">
                        <vc:icon symbol="wallet-hardware"/>
                    </div>
                    <div class="content d-flex flex-column flex-lg-row align-items-lg-center justify-content-lg-between me-2">
                        <div>
							<h4 text-translate="true">Connect hardware&nbsp;wallet</h4>
							<p class="mb-0" text-translate="true">Please enable JavaScript for this option to be available</p>
                        </div>
						<small class="d-block text-primary mt-2 mt-lg-0" text-translate="true">Recommended</small>
                    </div>
                </div>
            </noscript>
        </div>
    </div>
}

<div class="list-group mt-4">
    <a asp-controller="UIStores" asp-action="ImportWallet" asp-route-storeId="@Model.StoreId" asp-route-cryptoCode="@Model.CryptoCode" asp-route-method="file" id="ImportFileLink" class="list-group-item list-group-item-action">
        <div class="image">
            <vc:icon symbol="wallet-file"/>
        </div>
        <div class="content d-flex flex-column flex-lg-row align-items-lg-center justify-content-lg-between me-2">
            <div>
				<h4 text-translate="true">Import wallet file</h4>
				<p class="mb-0 text-secondary" text-translate="true">Upload a file exported from your wallet</p>
            </div>
			<small class="d-block text-primary mt-2 mt-lg-0" text-translate="true">Recommended</small>
        </div>
        <vc:icon symbol="caret-right" />
    </a>
</div>

<div class="list-group mt-4">
    <a asp-controller="UIStores" asp-action="ImportWallet" asp-route-storeId="@Model.StoreId" asp-route-cryptoCode="@Model.CryptoCode" asp-route-method="xpub" id="ImportXpubLink" class="list-group-item list-group-item-action">
        <div class="image">
            <vc:icon symbol="wallet-xpub"/>
        </div>
        <div class="content">
			<h4 text-translate="true">Enter extended public key</h4>
			<p class="mb-0 text-secondary" text-translate="true">Input the key string manually</p>
        </div>
        <vc:icon symbol="caret-right" />
    </a>
</div>

<div class="list-group mt-4">
    <a asp-controller="UIStores" asp-action="ImportWallet" asp-route-storeId="@Model.StoreId" asp-route-cryptoCode="@Model.CryptoCode" asp-route-method="scan" id="ImportScanLink" class="list-group-item list-group-item-action only-for-js">
        <div class="image">
            <vc:icon symbol="scan-qr"/>
        </div>
        <div class="content">
			<h4 text-translate="true">Scan wallet QR code</h4>
			<p class="mb-0 text-secondary" text-translate="true">Supported by BlueWallet, Cobo Vault, Passport and Specter DIY</p>
        </div>
        <vc:icon symbol="caret-right" />
    </a>
    <noscript>
        <div class="list-group-item list-group-item-action disabled hide-when-js">
            <div class="image">
                <vc:icon symbol="scan-qr"/>
            </div>
            <div class="content">
                <h4 text-translate="true">Scan wallet QR code</h4>
				<p class="mb-0" text-translate="true">Please enable JavaScript for this option to be available</p>
            </div>
        </div>
    </noscript>
</div>

<div class="list-group mt-4">
    <a asp-controller="UIStores" asp-action="ImportWallet" asp-route-storeId="@Model.StoreId" asp-route-cryptoCode="@Model.CryptoCode" asp-route-method="seed" id="ImportSeedLink" class="list-group-item list-group-item-action">
        <div class="image">
            <vc:icon symbol="wallet-seed"/>
        </div>
        <div class="content d-flex flex-column flex-lg-row align-items-lg-center justify-content-lg-between me-2">
            <div>
				<h4 text-translate="true">Enter wallet seed</h4>
				<p class="mb-0 text-secondary" text-translate="true">Provide the 12 or 24 word recovery seed</p>
            </div>
			@{
				var shouldNotTypeSeed = StringLocalizer["You really should not type your seed into a device that is connected to the internet."];
			}
			<small class="d-block text-danger mt-2 mt-lg-0" data-bs-toggle="tooltip" data-bs-placement="top" title="@shouldNotTypeSeed"><span text-translate="true">Not recommended</span> <vc:icon symbol="info" /></small>
        </div>
        <vc:icon symbol="caret-right" />
    </a>
</div>