@inherits NginxBase
@page "/nginx"
<FilesWithEditor CFile="ConfigFile" Filters="Filters" Files="ConfigFiles" FilterFolder="FilterFolder"
								 SelectedFile="SelectedFile" SelectedFileChanged="SelectedFileChanged"
								 TestConfiguration="TestConfiguration" TestResult="TestResult"
								 DeleteFileModal="DeleteNotificationModal" AddFileModal="ShowAddFileModal">
</FilesWithEditor>
<Modal @ref="AddFileModal">
	<ModalBackdrop />
	<ModalContent Class="neomorph">
		<ModalHeader>
			<ModalTitle Class="has-text-centered">Add a new configuration for a service</ModalTitle>
		</ModalHeader>
		<ModalBody>
			<div class="field">
				<label class="label">Template</label>
				<div class="control has-icons-left">
					<div class="select is-small is-rounded neoSelect fullwidth">
						<select class="fullwidth" @bind="NewFileForm.SelectedTemplate">
							<option value="0">No template</option>
							@foreach (var template in NewFileForm.Templates)
							{
								<option value="@template.Name">@($"{template.Name.First().ToString().ToUpper()}{template.Name.Substring(1)}")</option>
							}
						</select>
					</div>
					<span class="icon is-small is-left has-text-dark">
						<i class="mdi mdi-puzzle-outline"></i>
					</span>
				</div>
				<p class="help">Any template to quick setup the configuration</p>
			</div>

			<div class="field">
				<label class="label">Configuration file name</label>
				<div class="control has-icons-left has-icons-right">
					<input class="input is-rounded is-small neoInput" type="text" @bind="NewFileForm.Name" placeholder="Name" />
					<span class="icon is-small is-left has-text-dark">
						<i class="mdi mdi-file-code-outline"></i>
					</span>
				</div>
				<p class="help">Name it the same as the service which is going to run behind</p>
			</div>
		</ModalBody>
		<ModalFooter>
			<div class="level fullwidth">
				<div class="level-left">
					<div class="level-item">
						<Blazorise.Bulma.Button Clicked="e => CloseModal(AddFileModal)"
																		Class="is-rounded neoBtnSmall is-small has-text-dark">
							<span class="icon is-small">
								<i class="mdi mdi-close"></i>
							</span>
							<span>Close</span>
						</Blazorise.Bulma.Button>
					</div>
				</div>
				<div class="level-right">
					<div class="level-item">
						<Blazorise.Bulma.Button Color="Color.Primary" Clicked="AddFileAsync"
																		Class="is-rounded neoBtnSmall is-small has-text-dark" Type="ButtonType.Submit">
							<span class="icon is-small has-text-success">
								<i class="mdi mdi-plus"></i>
							</span>
							<span>Add</span>
						</Blazorise.Bulma.Button>
					</div>
				</div>
			</div>
		</ModalFooter>
	</ModalContent>
</Modal>
<GeneralNotificationModal PopupCallback="DeleteFile"></GeneralNotificationModal>
@*<GeneralNotificationModal ></GeneralNotificationModal>*@