@typeparam CFile

<div class="filesWithEditor">

	<div class="filterFiles">
		<div class="field">
			<div class="control has-icons-left is-expanded">
				<input formnovalidate @oninput="e => SearchInputChanged(e.Value.ToString())" @bind-value="SearchInput" class="input is-rounded is-small neoInput" type="text" placeholder="Search...">
				<span class="icon is-small is-left has-text-dark">
					<i class="mdi mdi-file-search"></i>
				</span>
			</div>
		</div>
	</div>

	<div class="fileTitle">
		@if (IsAnyFileSelected)
		{
			<div class="field is-grouped">
				<div class="control is-expanded borderRBig neomorphXSmall has-icons-left has-text-centered">
					<span>@SelectedFile.Name</span>
				</div>
				<p class="control @(IsDraftMode ? "is-hidden" : null)">
					<button class="button is-small is-rounded neoBtnSmall" @onclick="OnFileRenameClick" title="Rename configuration">
						<span class="icon is-medium">
							<i class="mdi mdi-pencil"></i>
						</span>
					</button>
				</p>
				<p class="control">
					<button class="button is-small is-rounded neoBtnSmall" @onclick="OnFileCloseClick" title="Close">
						<span class="icon is-medium">
							<i class="mdi mdi-close"></i>
						</span>
					</button>
				</p>
			</div>
		}
		else
		{
			<div class="field">
				<div class="control is-expanded borderRBig neomorphXSmall has-text-centered"><span>···</span></div>
			</div>
		}
	</div>

	<div class="files neomorphInsetXSmall borderR">
		<div class="filesList">
			@foreach (var file in Files)
			{
				<div @onclick="async e => await OnFileClick(e,file)" title="@file.FullPath" @key="file" class="confFile borderRSmall isFinger neoFile @file.IsVisible @file.IsSelected">
					<p class="has-text-weight-bold ellipsis"><span class="icon @(file.CanBeDeleted ? null : "has-text-danger")"><i class="mdi mdi-file-cog"></i></span> @file.Name</p>
				</div>
			}
		</div>
	</div>

	<div class="codeEditor neomorphXSmall borderR">
		<pre id="editor" class="borderR @(IsAnyFileSelected ? string.Empty : "is-hidden")">
		</pre>
		<div class="stripe borderR @(IsAnyFileSelected ? "is-hidden" : string.Empty)">
			<div class="stripe_inner"><span class="icon"><i class="mdi mdi-chevron-double-left"></i></span> Select a configuration</div>
		</div>
	</div>

	<div class="filesActions">
		<div class="buttons is-centered">
			<button class="button is-rounded neoBtnSmall is-small noBottomMargin" @onclick="OnAddDialog">
				<span class="icon is-small has-text-success">
					<i class="mdi mdi-plus"></i>
				</span>
				<span>Add</span>
			</button>
			<button class="button is-rounded neoBtnSmall is-small noBottomMargin @IsSelectedFileDeletable" @onclick="OnDeleteDialog">
				<span class="icon is-small has-text-danger">
					<i class="mdi mdi-minus"></i>
				</span>
				<span>Delete</span>
			</button>
		</div>
	</div>

	<div class="editorActions">
		@if (IsAnyFileSelected)
		{
			<div class="level">
				<div class="level-left">
					<div class="level-item">
						<div class="button is-rounded is-small noStyle isNoFinger">
							<div class="field">
								<input @onchange="OnDraftModeSwitch" id="switchRoundedOutlinedWarning" type="checkbox" name="switchRoundedOutlinedWarning" class="switch is-rounded is-outlined is-danger" checked="@IsDraftMode">
								<label for="switchRoundedOutlinedWarning">Draft mode @DraftMode</label>
							</div>
						</div>
					</div>
				</div>
				<div class="level-right">
					<div class="level-item">
						<div class="buttons">
							<button @onclick="OnUndoChanges" class="button is-rounded neoBtnSmall is-small has-icon-left noBottomMargin"><span class="icon is-left has-text-dark"><i class="mdi mdi-undo-variant"></i></span> <span>Undo changes</span></button>
							<button @onclick="OnTest" class="button is-rounded neoBtnSmall is-small has-icon-left noBottomMargin @(HasTesting && !IsDraftMode ? null : "is-hidden")"><span class="icon is-left has-text-danger"><i class="mdi mdi-alert"></i></span> <span>Test</span></button>
							<button @onclick="OnSaveDraft" class="button is-rounded neoBtnSmall is-small has-icon-left noBottomMargin @(IsDraftMode ? null : "is-hidden")"><span class="icon is-left has-text-light"><i class="mdi mdi-content-save"></i></span> <span>@(string.IsNullOrEmpty(SelectedFile.DraftBody) ? "Create" : "Save") draft</span></button>
							<button @onclick="OnSave" class="button is-rounded neoBtnSmall is-small has-icon-left noBottomMargin @(IsDraftMode ? "is-hidden"  : null)"><span class="icon is-left has-text-success"><i class="mdi mdi-content-save-all"></i></span> <span>Save</span></button>
						</div>
					</div>
				</div>
			</div>
		}
		else
		{
			<span></span>
		}
	</div>

</div>