@model BTCPayServer.Models.StoreViewModels.CreateStoreViewModel
@{
    ViewData.SetActivePage(StoreNavPages.Create, Model.IsFirstStore ? "Create your first store" : "Create a new store");
}

@section PageFootContent {
    <partial name="_ValidationScriptsPartial" />
    <script>
	  const exchanges = @Safe.Json(StoreBlob.RecommendedExchanges);
	  const recommended = document.querySelector("#PreferredExchange option[value='']")
	  const updateRecommended = currency => {
		  const source = exchanges[currency] || 'coingecko'
		  const name = source.charAt(0).toUpperCase() + source.slice(1)
		  recommended.innerText = `${name} (Recommended)`
	  }
	  updateRecommended(@Safe.Json(Model.DefaultCurrency))
	  delegate('change', '#DefaultCurrency', e => updateRecommended(e.target.value))
	</script>
}

<partial name="_StatusMessage" />

@if (Model.IsFirstStore)
{
    <h2>@ViewData["Title"]</h2>
    <p class="lead text-secondary">To start accepting payments, set up a store.</p>
}
else
{
    <h2 class="mt-1 mb-4">@ViewData["Title"]</h2>
}
<div class="row">
    <div class="col-xl-8 col-xxl-constrain">
        <form asp-action="CreateStore">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Name" class="form-label" data-required></label>
                <input asp-for="Name" class="form-control w-300px" required />
                <span asp-validation-for="Name" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="DefaultCurrency" class="form-label" data-required></label>
                <input asp-for="DefaultCurrency" class="form-control w-300px" currency-selection />
                <span asp-validation-for="DefaultCurrency" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="PreferredExchange" class="form-label" data-required></label>
                <select asp-for="PreferredExchange" asp-items="Model.Exchanges" class="form-select w-300px"></select>
                <div class="form-text mt-2 only-for-js">The recommended price source gets chosen based on the default currency.</div>
                <span asp-validation-for="PreferredExchange" class="text-danger"></span>
            </div>

            <div class="form-group mt-4">
                <input type="submit" value="Create" class="btn btn-primary" id="Create" />
            </div>
        </form>
    </div>
</div>