@addTagHelper *, BundlerMinifier.TagHelpers
@using Microsoft.AspNetCore.Mvc.ModelBinding
@model WalletSendModel
@{
    Layout = "../Shared/_NavLayout.cshtml";
    ViewData["Title"] = "Manage wallet";
    ViewData.SetActivePageAndTitle(WalletsNavPages.Send);
}
@if (TempData.HasStatusMessage())
{
    <div class="row">
        <div class="col-md-10 text-center">
            <partial name="_StatusMessage" />
        </div>
    </div>
}
<partial name="WalletCameraScanner"/>
<div class="row">
   
    <div class="@(!Model.InputSelection && Model.Outputs.Count==1? "col-lg-6 transaction-output-form": "col-lg-8")">
        <form method="post">
            <input type="hidden" asp-for="InputSelection" />
            <input type="hidden" asp-for="Divisibility" />
            <input type="hidden" asp-for="NBXSeedAvailable" />
            <input type="hidden" asp-for="Fiat" />
            <input type="hidden" asp-for="Rate" />
            <input type="hidden" asp-for="CurrentBalance" />
            @for (int i = 0; i < Model.RecommendedSatoshiPerByte.Length; i++)
            {
                <input type="hidden" asp-for="RecommendedSatoshiPerByte[i]" />
            }
            <input type="hidden" asp-for="CryptoCode" />
            <input type="hidden" name="BIP21" id="BIP21" />
            <ul class="text-danger">
                @foreach (var errors in ViewData.ModelState.Where(pair => pair.Key == string.Empty && pair.Value.ValidationState == ModelValidationState.Invalid))
                {
                    foreach (var error in
                        errors.Value.Errors)
                    {
                        <li>@error.ErrorMessage</li>
                    }
                }
            </ul>

            @if (Model.InputSelection)
            {
                <div class="form-group hide-when-js">
                    <label asp-for="SelectedInputs"></label>
                    <select multiple="multiple" asp-for="SelectedInputs" class="form-control">
                        @foreach (var input in Model.InputsAvailable)
                        {
                            <option value="@input.Outpoint" class="text-truncate" asp-selected="@(Model.SelectedInputs?.Contains(input.Outpoint)??false)">(@input.Amount) @input.Outpoint</option>
                        }
                    </select>
                </div>
                <partial name="CoinSelection" />
                <br>
            }

            @if (Model.Outputs.Count == 1)
            {
                <div class="form-group">
                    <label asp-for="Outputs[0].DestinationAddress"></label>
                    <input asp-for="Outputs[0].DestinationAddress" class="form-control" />
                    <span asp-validation-for="Outputs[0].DestinationAddress" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="Outputs[0].Amount"></label>
                    <div class="input-group">
                        <input asp-for="Outputs[0].Amount" type="number" step="any" asp-format="{0}" class="form-control output-amount" />
                        <div class="input-group-prepend">
                            <span class="input-group-text fiat-value" style="display:none;"></span>
                        </div>
                    </div>
                    <span asp-validation-for="Outputs[0].Amount" class="text-danger"></span>
                    <p class="form-text text-muted crypto-info">
                        Your current balance is
                        <button type="button" class="crypto-balance-link btn btn-link p-0 align-baseline">@Model.CurrentBalance</button> <span>@Model.CryptoCode</span>.
                    </p>
                </div>
            }
            else
            {
                <div class="list-group-item ">
                    <h5 class="mb-1">Destinations</h5>
                </div>
                <div class="list-group mb-2">
                    @for (var index = 0; index < Model.Outputs.Count; index++)
                    {
                        <div class="list-group-item transaction-output-form p-0 pl-lg-2">
                            <div class="row">
                                <div class="col-sm-12 col-md-12 col-lg-10  py-2 ">
                                    <div class="form-group">
                                        <label asp-for="Outputs[index].DestinationAddress" class="control-label"></label>
                                        <input asp-for="Outputs[index].DestinationAddress" class="form-control" />
                                        <span asp-validation-for="Outputs[index].DestinationAddress" class="text-danger"></span>
                                    </div>
                                    <div class="form-group">
                                        <label asp-for="Outputs[index].Amount" class="control-label"></label>
                                        <div class="input-group">
                                            <input asp-for="Outputs[index].Amount" type="number" step="any" asp-format="{0}" class="form-control output-amount" />
                                            <div class="input-group-prepend">
                                                <span class="input-group-text fiat-value" style="display:none;"></span>
                                            </div>
                                        </div>
                                        <p class="form-text text-muted crypto-info">
                                            Your current balance is
                                            <button type="button" class="crypto-balance-link btn btn-link p-0 align-baseline">@Model.CurrentBalance</button> <span>@Model.CryptoCode</span>.
                                        </p>
                                        <span asp-validation-for="Outputs[index].Amount" class="text-danger"></span>
                                    </div>
                                    <div class="form-group">
                                        <div class="form-check">
                                            <input type="checkbox" asp-for="Outputs[index].SubtractFeesFromOutput" class="form-check-input subtract-fees" />
                                            <label asp-for="Outputs[index].SubtractFeesFromOutput" class="form-check-label"></label>
                                            <span asp-validation-for="Outputs[index].SubtractFeesFromOutput" class="text-danger"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-12 col-lg-2 pull-right">
                                    <button type="submit" title="Remove Destination" name="command" value="@($"remove-output:{index}")"
                                            class="d-block d-lg-none d-xl-none btn btn-danger mb-2 ml-2">
                                        Remove Destination
                                    </button>
                                    <button type="submit" title="Remove Destination" name="command" value="@($"remove-output:{index}")"
                                            class="d-none d-lg-block remove-destination-btn text-decoration-none h-100 align-middle btn text-danger btn-link fa fa-times rounded-0 pull-right"></button>
                                </div>
                            </div>
                        </div>
                    }
                </div>
            }
            <div class="form-group">
                <label asp-for="FeeSatoshiPerByte"></label>
                <input asp-for="FeeSatoshiPerByte" type="number" step="any" class="form-control" />
                <span asp-validation-for="FeeSatoshiPerByte" class="text-danger"></span>
                <span id="FeeRate-Error" class="text-danger"></span>
                <p class="form-text text-muted crypto-info">
                    Target confirmation in:
                    @for (int i = 0; i < Model.RecommendedSatoshiPerByte.Length; i++)
                    {
                        if (Model.RecommendedSatoshiPerByte[i] is null)
                            continue;
                    <span><button type="button" class="btn btn-link p-0 align-baseline crypto-fee-link" data-feerate="@Model.RecommendedSatoshiPerByte[i]">@Model.RecommendedSatoshiLabels[i]</button>.</span>
                    }
                </p>
            </div>
            @if (Model.Outputs.Count == 1)
            {
                <div class="form-group">
                    <div class="form-check">
                        <input type="checkbox" asp-for="Outputs[0].SubtractFeesFromOutput" class="form-check-input subtract-fees" />
                        <label asp-for="Outputs[0].SubtractFeesFromOutput" class="form-check-label"></label>
                        <span asp-validation-for="Outputs[0].SubtractFeesFromOutput" class="text-danger"></span>
                    </div>
                </div>
            }

            <div class="card">
                <button id="advancedSettings" class="btn btn-light collapsed" type="button" data-toggle="collapse" data-target="#accordian-advanced" aria-expanded="false" aria-controls="accordian-advanced">
                    Advanced settings
                </button>
                <div id="accordian-advanced" class="collapse" aria-labelledby="accordian-advanced-header" data-parent="#accordian-advanced">
                    <div class="card-body">
                        <div class="form-check">
                            <input asp-for="NoChange" class="form-check-input" />
                            <label asp-for="NoChange" class="form-check-label"></label>
                            <a href="https://docs.btcpayserver.org/features/wallet#make-sure-no-change-utxo-is-created-expert-mode" target="_blank">
                                <span class="fa fa-question-circle-o" title="More information..."></span>
                            </a>
                        </div>
                        @if (Model.SupportRBF)
                        {
                            <div class="form-check">
                                <input asp-for="DisableRBF" class="form-check-input" />
                                <label asp-for="DisableRBF" class="form-check-label"></label>
                                <a href="https://bitcoin.org/en/glossary/rbf" target="_blank">
                                    <span class="fa fa-question-circle-o" title="More information..."></span>
                                </a>
                            </div>
                        }
                        @if (!string.IsNullOrEmpty(Model.PayJoinEndpointUrl))
                        {
                            <div class="form-group">
                                <label asp-for="PayJoinEndpointUrl" class="control-label"></label>
                                <input asp-for="PayJoinEndpointUrl" class="form-control" />
                                <span asp-validation-for="PayJoinEndpointUrl" class="text-danger"></span>
                            </div>
                        }
                        <div class="form-group">
                            <button id="toggleInputSelection" type="submit" name="command" value="toggle-input-selection" class="btn btn-sm btn-secondary">Toggle coin selection</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group d-flex mt-2">
                <div class="dropdown">
                    <button class="btn btn-primary dropdown-toggle" type="button" id="SendMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Sign with...
                    </button>
                    <div class="dropdown-menu" aria-labelledby="SendMenu">
                        <button name="command" type="submit" class="dropdown-item" value="ledger">... your Ledger Wallet device</button>
                        <button name="command" type="submit" class="dropdown-item" value="seed">... an HD private key or mnemonic seed</button>
                        <button name="command" type="submit" class="dropdown-item" value="analyze-psbt">... a wallet supporting PSBT</button>
                        @if (Model.CryptoCode == "BTC")
                        {
                            <button name="command" type="submit" class="dropdown-item" value="vault">... the vault (preview)</button>
                        }
                        @if (Model.NBXSeedAvailable)
                        {
                            <button id="spendWithNBxplorer" name="command" type="submit" class="dropdown-item" value="nbx-seed">... the seed saved in NBXplorer</button>
                        }
                    </div>
                </div>
                <button type="submit" name="command" value="add-output" class="ml-1 btn btn-secondary">Add another destination</button>
                <button type="button" id="bip21parse" class="ml-1 btn btn-secondary" title="Paste BIP21/Address"><i class="fa fa-paste"></i></button>
                <button type="button" id="scanqrcode" class="ml-1 btn btn-secondary only-for-js" data-toggle="modal" data-target="#scanModal" title="Scan BIP21/Address with camera"><i class="fa fa-camera"></i></button>
            </div>
        </form>
    </div>
</div>

@section HeadScripts
{
    <bundle name="wwwroot/bundles/wallet-send-bundle.min.js" asp-append-version="true"></bundle>
    <style>
        .remove-destination-btn{
            font-size: 1.5rem;
            border-radius: 0;
        }
         .remove-destination-btn:hover{
                   background-color: #CCCCCC;
         }
    </style>
}