@model Model_System
@inject SaxLocaliser Localiser
@{
	ViewData["Title"] = "System - Database";
}

<div class="sax-panel DatabaseTables">

	<script type="text/javascript">
	</script>

	<div class="sax-panel-data sax-flex">

		@* Filter form - wrap header to include paging controls. *@
		@using (@Html.BeginForm(FormMethod.Post, new { @id = "frmDbTableFilter", @class = "sax-form", @onSubmit = "return false;" }))
		{

			@* Header - Page caption, paging controls, actions. *@
			<div class="sax-panel-header">
				<div class="row">
					<div class="col"><div class="sax-panel-caption">@Localiser["system.caption.database"]</div></div>
					<div class="fixed row">
						<div class="sax-action sax-results-refresh"><img src="~/img/action/refresh24.png" alt="@(Localiser["label.refresh"])" title="@(Localiser["label.refresh"])" /></div>
					</div>
				</div>
			</div>

			@* Filter Panel *@
			<div class="sax-panel-filter">
				<div class="row">
					<div class="col-sm-5 col-md-3 sax-label text-left text-sm-right">@Localiser["label.instance"]</div>
					<div class="col-sm-7 col-md-3 mb-sm-1 mb-md-0">@Html.DropDownListFor(model => model.DatabaseFilter.Instance, Model.GetDatabases(), new { @id = "cbDatabaseFilterInstance", @class = "DatabaseFilterInstance" })</div>
					<div class="col-sm-5 col-md-3 sax-label text-left text-sm-right">@Localiser["label.search"]</div>
					<div class="col-sm-7 col-md-3">@Html.TextBoxFor(model => model.DatabaseFilter.Search, new { @id = "ifDatabaseFilterSearch", @class = "DatabaseFilterSearch", @maxlength = "32" })</div>
				</div>
			</div>
		}

		@* Item list *@
		<div class="sax-panel-item-table sax-flex">
			<table class="sax-item-list">
				<thead>
					<tr>
						<th class="width50pc pl-2">@Localiser["label.table"]</th>
						<th class="width15pc center">@Localiser["label.rows"]</th>
						<th class="width15pc center">@Localiser["label.columns"]</th>
						<th class="width15pc center">@Localiser["label.indices"]</th>
						<th class="width5pc center"></th>
					</tr>
					<tr><td colspan="6"><div class="sax-panel-messages"></div></td></tr>
				</thead>
				<tbody></tbody>
			</table>
		</div>

	</div>


	@* Element templates *@
	<div class="sax-panel-item-template">

		@* Item row template - table is ignored. *@
		<table>
			<tr class="sax-row-item DatabaseTable">
				<td class="TableName pl-1"></td>
				<td class="RowCount center"></td>
				<td class="ColumnCount center"></td>
				<td class="IndexCount center"></td>
				<td class="Actions">
					<div class="right">
						@* Burger menu *@
						<ul class="nav navbar-nav navbar-light navbar-right sax-burger">
							<li class="dropdown-toggle caret-off">
								<a href="#" class="dropdown" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="sax-ellipsis-dot"></span><span class="sax-ellipsis-dot"></span><span class="sax-ellipsis-dot"></span></a>
								<ul class="dropdown-menu dropdown-menu-right sax-dropdown-menu">@* Menu items will be inserted here. *@</ul>
							</li>
						</ul>
					</div>
				</td>
			</tr>
		</table>

		@* Item burger dropdown template - ul is ignored *@
		<ul class="sax-dropdown-menu DatabaseTable">
			<li class="sax-dropdown-item sax-action"><div class="sax-label">XXX</div></li>
		</ul>
	</div>

</div>


@using (@Html.BeginForm(FormMethod.Post, new { @id = "frmDbTableName", @onSubmit = "return false;" }))
{
	@Html.HiddenFor(model => model.DatabaseTable.Instance, new { @class = "DatabaseTableInstance" })
	@Html.HiddenFor(model => model.DatabaseTable.Name, new { @class = "DatabaseTableName" })
}

<style>
	#dlgDbTable tr.sax-heading td
	{
		color: #606060;
		background-color: #f0f0f0;
		border-top: 1px solid #808080;
		border-bottom: 1px solid #808080;
	}
</style>
<div id="dlgDbTable" class="sax-panel-item-template">
	<div class="">
		@using (@Html.BeginForm(FormMethod.Post, new { @id = "frmDbTable", @onSubmit = "return false;" }))
		{
			@Html.HiddenFor(model => model.DatabaseTable.Instance, new { @class = "DatabaseTableInstance" })
			@Html.HiddenFor(model => model.DatabaseTable.Name, new { @class = "DatabaseTableName" })
		}
		<table class="fullwidth">
			<tr>
				<td class="right pt2 pr8">Properties:</td>
				<td>
					<table class="sax-striped TableProperties">
					</table>
				</td>
			</tr>
			<tr>
				<td class="right pt2 pr8">Columns:</td>
				<td>
					<table class="sax-striped TableColumns fullwidth">
						<tr class="sax-heading">
							<td class="width10pc right pl8 pr8">Pos</td>
							<td class="width50pc pl8 pr8">Name</td>
							<td class="width50pc center">Format</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td class="right pt2 pr8">Indices:</td>
				<td>
					<table class="sax-striped TableIndices fullwidth">
						<tr class="sax-heading">
							<td class="width50pc pl8 pr8">Name</td>
							<td class="width20pc center pl8 pr8">Unique</td>
							<td class="width20pc pl8 pr8">Columns</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</div>
	<div class="sax-panel-item-template">
		<table>
			<tr class="TableProperty">
				<td class="sax-label Label right pl8 pr8"></td>
				<td class="Value pl8 pr8"></td>
			</tr>
			<tr class="TableColumn">
				<td class="Pos right pl8 pr8"></td>
				<td class="Name pl8 pr8"></td>
				<td class="Format center pl8 pr8"></td>
			</tr>
			<tr class="TableIndex">
				<td class="Name pl8 pr16"></td>
				<td class="Unique center"></td>
				<td class="Columns pl8 pr8"></td>
			</tr>
		</table>
	</div>
</div>