@model DerivationSchemeViewModel
@{
    Layout = "../Shared/_NavLayout.cshtml";
    ViewData.SetActivePageAndTitle(StoreNavPages.Index, $"{Model.CryptoCode} Derivation scheme");
}

<partial name="_StatusMessage" for="StatusMessage" />
<h4>@ViewData["Title"]</h4>

<div class="row">
    <div class="col-md-6">
        <div asp-validation-summary="All" class="text-danger"></div>
    </div>
</div>
<div class="row">
    <div class="col-md-8">
        <form method="post">
            @if (!Model.Confirmation)
            {
                <div class="form-group">
                    <h5>Derivation Scheme</h5>
                    <span>The DerivationScheme represents the destination of the funds received by your invoice. It is generated by your wallet software. Please, verify that you are generating the right addresses by clicking on 'Check ExtPubKey'</span>
                </div>
                <input id="CryptoCurrency" asp-for="CryptoCode" type="hidden" />
                <input id="KeyPath" asp-for="KeyPath" type="hidden" />
                <div class="form-group">
                    <label asp-for="DerivationScheme"></label>
                    <input asp-for="DerivationScheme" class="form-control" />
                    <span asp-validation-for="DerivationScheme" class="text-danger"></span>
                    <div id="ledger-loading" class="form-text text-muted">
                        Checking if a ledger wallet is connected...
                    </div>
                    <div id="ledger-validate" class="form-text text-muted" style="display: none;">
                        Please validate access on your screen...
                    </div>
                    <p id="no-ledger-info" class="form-text text-muted" style="display: none;">
                        No ledger wallet detected. If you own one, use chrome, open the app, and refresh this page.
                    </p>
                    <div id="ledger-info" class="form-text text-muted" style="display: none;">
                        <span>A ledger wallet is detected, which account do you want to use? No need to paste manually xpub if your ledger device was detected. Just select derivation scheme from the list bellow and xpub will automatically populate.</span>
                        <div class="dropdown">
                            <button class="btn btn-primary dropdown-toggle" type="button" id="ledgerAccountsDropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Select ledger wallet account
                            </button>
                            <div class="dropdown-menu overflow-auto" style="max-height: 200px;" aria-labelledby="ledgerAccountsDropdownMenuButton">
                                @for (var i = 0; i < 20; i++)
                                {
                                    <a class="dropdown-item ledger-info-recommended" data-ledgerkeypath="@Model.RootKeyPath.Derive(i, true)" href="#">Account @i (<span>@Model.RootKeyPath.Derive(i, true)</span>)</a>
                                }
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <span>BTCPay format memo</span>
                    <table class="table table-sm table-responsive-md">
                        <thead>
                            <tr>
                                <th>Address type</th>
                                <th>Example</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>P2WPKH</td>
                                <td>xpub...</td>
                            </tr>
                            <tr>
                                <td>P2SH-P2WPKH</td>
                                <td>xpub...-[p2sh]</td>
                            </tr>
                            <tr>
                                <td>P2PKH</td>
                                <td>xpub...-[legacy]</td>
                            </tr>
                            <tr>
                                <td>Multi-sig P2WSH</td>
                                <td>2-of-xpub1...-xpub2...</td>
                            </tr>
                            <tr>
                                <td>Multi-sig P2SH-P2WSH</td>
                                <td>2-of-xpub1...-xpub2...-[p2sh]</td>
                            </tr>
                            <tr>
                                <td>Multi-sig P2SH</td>
                                <td>2-of-xpub1...-xpub2...-[legacy]</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="form-group">
                    <label asp-for="Enabled"></label>
                    <input asp-for="Enabled" type="checkbox" class="form-check" />
                </div>
                <button name="command" type="submit" class="btn btn-primary" value="save">Continue</button>
            }
            else
            {
                <div class="form-group">
                    <h5>Confirm the addresses (@Model.CryptoCode)</h5>
                    <span>Please check that your @Model.CryptoCode wallet is generating the same addresses as below.</span>
                </div>
                <input type="hidden" asp-for="Confirmation" />
                <input id="KeyPath" asp-for="KeyPath" type="hidden" />
                <input type="hidden" asp-for="DerivationScheme" />
                <input type="hidden" asp-for="Enabled" />
                <div class="form-group">
                    <table class="table table-sm table-responsive-md">
                        <thead>
                            <tr>
                                <th>Key path</th>
                                <th>Address</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var sample in Model.AddressSamples)
                            {
                                <tr>
                                    <td>@sample.KeyPath</td>
                                    <td>@sample.Address</td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>

                <div class="form-group">
                    <h5>Wrong addresses?</h5>
                    <span>Help us to find the correct settings by telling us the first address of your wallet</span>
                </div>
                <div class="form-group">
                    <label asp-for="HintAddress"></label>
                    <input asp-for="HintAddress" class="form-control" />
                    <span asp-validation-for="HintAddress" class="text-danger"></span>
                </div>
                <button name="command" type="submit" class="btn btn-primary" value="save">Confirm</button>
            }
        </form>
    </div>
</div>

@section Scripts {
    @await Html.PartialAsync("_ValidationScriptsPartial")
    <script src="~/js/ledgerwebsocket.js" type="text/javascript" defer="defer"></script>
    <script src="~/js/StoreAddDerivationScheme.js" type="text/javascript" defer="defer"></script>
}