@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">
    
        <div class="modal fade" id="coldcardimport" tabindex="-1" role="dialog" aria-labelledby="coldcardimport" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <form class="modal-content" form method="post" enctype="multipart/form-data">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Import Coldcard Wallet</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>You may import your Coldcard wallet by exporting the public details from <kbd>Advanced->MicroSD Card->Electrum Wallet</kbd> and uploading it here.</p>
                        <div class="form-group">
                            <label asp-for="ColdcardPublicFile"></label>
                            
                            <input type="file" class="form-control-file"  asp-for="ColdcardPublicFile" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                    
                </form>
            </div>
        </div>
    
        <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" />
                <input id="Source" asp-for="Source" type="hidden" />
                <input id="RootFingerprint" asp-for="RootFingerprint" type="hidden" />
                <input id="AccountKey" asp-for="AccountKey" type="hidden" />
                <input id="Config" asp-for="Config" 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 display-when-ledger-connected">
                        <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>
                    <div class="d-flex">
                        <button type="button" class="btn btn-primary mr-2 " data-toggle="modal" data-target="#coldcardimport">
                            Import Coldcard wallet
                        </button>
                        <div class="dropdown display-when-ledger-connected">
                            <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" id="Continue">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 id="Source" asp-for="Source" type="hidden" />
                <input id="RootFingerprint" asp-for="RootFingerprint" type="hidden" />
                <input id="AccountKey" asp-for="AccountKey" type="hidden" />
                <input type="hidden" asp-for="DerivationScheme" />
                <input type="hidden" asp-for="Enabled" />
                <input id="Config" asp-for="Config" type="hidden" />
                <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" id="Confirm">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>
}