@typeparam CFile

<div class="filesWithEditor">

	<div class="files">

		<div class="field has-addons sameMarginBottom">
			<div class="control has-icons-left is-expanded">
				<input formnovalidate @oninput="e => SearchInputChanged(e.Value.ToString())" class="input is-rounded is-small" type="text" placeholder="Search...">
				<span class="icon is-small is-left">
					<i class="mdi mdi-search-web"></i>
				</span>
			</div>
			<div class="control has-icons-left">
				<div class="select is-small is-rounded">
					<select @onchange="e => OnFilterClick(e.Value.ToString())">
						@foreach (var filter in Filters)
						{
							<option value="@filter">@filter</option>
						}
					</select>
				</div>
				<span class="icon is-small is-left">
					<i class="mdi mdi-folder-cog-outline"></i>
				</span>
			</div>
		</div>

		<div class="filesList neomorphInsetSmall borderRSmall sameMarginBottom">
			<aside class="menu">
				<ul class="menu-list">
					@foreach (var file in Files)
					{
						<li @onclick="e => OnFileClick(e,file)" @key="file" class="@file.IsVisible">
							<FileItem File="file" @key="file"></FileItem>
						</li>
					}
				</ul>
			</aside>
		</div>

		<div class="buttons are-small">
			<button class="button is-rounded is-primary" @onclick="OnAddDialog">
				<span class="icon is-small">
					<i class="mdi mdi-plus-box-outline"></i>
				</span>
				<span>Add</span>
			</button>
			<button class="button is-rounded is-warning" @onclick="OnUpdateDialog">
				<span class="icon is-small">
					<i class="mdi mdi-pencil-box-outline"></i>
				</span>
				<span>Update</span>
			</button>
			<button class="button is-rounded is-danger" @onclick="OnDeleteDialog">
				<span class="icon is-small">
					<i class="mdi mdi-minus-box-outline"></i>
				</span>
				<span>Delete</span>
			</button>
		</div>

	</div>

	<div class="tile is-parent is-vertical">
		@if (IsAnyFileSelected)
		{

			<nav class="level">

				<div class="level-left">
					<div class="level-item">
						<p class="subtitle is-5">
							@SelectedFile.Name
						</p>
					</div>
				</div>

				<div class="level-right">
					<div class="level-item">
						<div class="buttons has-addons-right">
							<button class="button is-rounded is-light is-small has-icon-left"><span class="icon is-small is-left"><i class="mdi mdi-content-save-alert-outline"></i></span> <span>Save draft</span></button>
							<button class="button is-rounded is-dark is-small has-icon-left"><span class="icon is-small is-left"><i class="mdi mdi-undo-variant"></i></span> <span>Undo changes</span></button>
							<button class="button is-rounded is-success is-small has-icon-left"><span class="icon is-small is-left"><i class="mdi mdi-content-save-all-outline"></i></span> <span>Save</span></button>
							<button class="button is-rounded is-warning is-small has-icon-left"><span class="icon is-small is-left"><i class="mdi mdi-alert-outline"></i></span> <span>Test</span></button>
						</div>
					</div>
				</div>

			</nav>
			<div class="content">
				<textarea class="textarea" placeholder="Uhu" rows="20" @bind="SelectedFile.OriginalBody"></textarea>
			</div>
		}
		else
		{
			<p class="title">Select any file to start editing...</p>
		}
	</div>



</div>