<div class="app-card-title mb-4">
	<anglo-title-component title="Basic"></anglo-title-component>
</div>
<div class="app-card card-wrapper basic-table-wrapper mb-3">
	<mat-card>
		<div class="card-title mb-3 p-2">
			<h3 class="title">{{'Basic Tables'|translate}}</h3>
		</div>
		<div class="card-content p-2">
			<p>Using the most basic table markup, here’s how .table-based tables look in Bootstrap.<code> All table styles are inherited in Bootstrap 4,</code> meaning any nested tables will be styled in the same manner as the parent.</p>
			<div class="overflow-hidden">
				<div class="table-responsive">
					<table class="table">
						<thead>
							<tr>
								<th>#</th>
								<th>First Name</th>
								<th>Last Name</th>
								<th>User Name</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<th>1</th>
								<td>Mark</td>
								<td>Otto</td>
								<td>@mdo</td>
							</tr>
							<tr>
								<th>2</th>
								<td>Jacob</td>
								<td>Thornton</td>
								<td>@fat</td>
							</tr>
							<tr>
								<th>3</th>
								<td>Larry</td>
								<td>the Bird</td>
								<td>@twitter</td>
							</tr>
						</tbody>
					</table>
				</div>	
			</div>
		</div>	
	</mat-card>
</div>

<div class="app-card card-wrapper mb-3  basic-table-wrapper">
	<mat-card>
		<div class="card-title mb-3 p-2">
			<h3 class="title">{{'Table Inverse'|translate}}</h3>
		</div>
		<div class="card-content p-2">
			<p>You can also invert the colors—with light text on dark backgrounds—with <code>.table-inverse.</code></p>
			<div class="table-responsive overflow-hidden">	
				<table class="table table-inverse">
					<thead>
						<tr>
							<th>#</th>
							<th>First Name</th>
							<th>Last Name</th>
							<th>User Name</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<th>1</th>
							<td>Mark</td>
							<td>Otto</td>
							<td>@mdo</td>
						</tr>
						<tr>
							<th>2</th>
							<td>Jacob</td>
							<td>Thornton</td>
							<td>@fat</td>
						</tr>
						<tr>
							<th>3</th>
							<td>Larry</td>
							<td>the Bird</td>
							<td>@twitter</td>
						</tr>
					</tbody>
				</table>
			</div>	
		</div>
	</mat-card>	
</div>

<div class="app-card card-wrapper mb-3  basic-table-wrapper">
	<mat-card>	
		<div class="card-title mb-3 p-2">
			<h3 class="title">{{'Table Head'|translate}}</h3>
		</div>
		<div class="card-content p-2">
			<p>Similar to default and inverse tables, use one of two modifier classes to make <code>&lt;thead&gt;</code>s appear light or dark gray. One is <code>.thead-default </code>and second is <code>.thead-inverse</code></p>
			<div class="table-responsive overflow-hidden">	
				<table class="table">
					<thead class="thead-default">
						<tr>
							<th>#</th>
							<th>First Name</th>
							<th>Last Name</th>
							<th>User Name</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<th>1</th>
							<td>Mark</td>
							<td>Otto</td>
							<td>@mdo</td>
						</tr>
						<tr>
							<th>2</th>
							<td>Jacob</td>
							<td>Thornton</td>
							<td>@fat</td>
						</tr>
						<tr>
							<th>3</th>
							<td>Larry</td>
							<td>the Bird</td>
							<td>@twitter</td>
						</tr>
					</tbody>
				</table>
			</div>	
		</div>
	</mat-card>	
</div>
<div class="app-card card-wrapper mb-3  basic-table-wrapper">
	<mat-card>	
		<div class="card-title mb-3 p-2">
			<h3 class="title">{{'Striped Rows'|translate}}</h3>
		</div>
		<div class="card-content p-2">
			<p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code></p>
			<div class="table-responsive overflow-hidden">	
				<table class="table table-striped">
					<thead>
						<tr>
							<th>#</th>
							<th>First Name</th>
							<th>Last Name</th>
							<th>User Name</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<th>1</th>
							<td>Mark</td>
							<td>Otto</td>
							<td>@mdo</td>
						</tr>
						<tr>
							<th>2</th>
							<td>Jacob</td>
							<td>Thornton</td>
							<td>@fat</td>
						</tr>
						<tr>
							<th>3</th>
							<td>Larry</td>
							<td>the Bird</td>
							<td>@twitter</td>
						</tr>
					</tbody>
				</table>
			</div>	
		</div>
	</mat-card>	
</div>
<div class="app-card card-wrapper mb-3  basic-table-wrapper">
	<mat-card>
		<div class="card-title mb-3 p-2">
			<h3 class="title">{{'Bordered Table'|translate}}</h3>
		</div>
		<div class="card-content p-2">
			<p>Add <code>.table-bordered</code> for borders on all sides of the table and cells.</p>
			<div class="table-responsive overflow-hidden">	
				<table class="table table-bordered">
					<thead>
						<tr>
							<th>#</th>
							<th>First Name</th>
							<th>Last Name</th>
							<th>User Name</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<th>1</th>
							<td>Mark</td>
							<td>Otto</td>
							<td>@mdo</td>
						</tr>
						<tr>
							<th>2</th>
							<td>Mark</td>
							<td>Otto</td>
							<td>@TwBootstrap</td>
						</tr>
						<tr>
							<th>3</th>
							<td>Jacob</td>
							<td>Thornton</td>
							<td>@fat</td>
						</tr>
						<tr>
							<th>4</th>
							<td colspan="2">Larry the Bird </td>
							<td>@twitter</td>
						</tr>
					</tbody>
				</table>
			</div>	
		</div>
	</mat-card>	
</div>
<div class="app-card card-wrapper mb-3  basic-table-wrapper">
	<mat-card>
		<div class="card-title mb-3 p-2">
			<h3 class="title">{{'Hoverable Table'|translate}}</h3>
		</div>
		<div class="card-content p-2">
			<p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
			<div class="table-responsive overflow-hidden">	
				<table class="table table-hover">
					<thead>
						<tr>
							<th>#</th>
							<th>First Name</th>
							<th>Last Name</th>
							<th>User Name</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<th>1</th>
							<td>Mark</td>
							<td>Otto</td>
							<td>@mdo</td>
						</tr>
						<tr>
							<th>2</th>
							<td>Jacob</td>
							<td>Thornton</td>
							<td>@fat</td>
						</tr>
						<tr>
							<th>3</th>
							<td>Larry</td>
							<td>the Bird</td>
							<td>@twitter</td>
						</tr>
					</tbody>
				</table>
			</div>	
		</div>
	</mat-card>	
</div>
<div class="app-card card-wrapper mb-3  basic-table-wrapper">
	<mat-card>
		<div class="card-title mb-3 p-2">
			<h3 class="title">{{'Contextual Table'|translate}}</h3>
		</div>
		<div class="card-content p-2">
			<div class="table-responsive overflow-hidden">	
				<table class="table table-inverse">
					<thead>
						<tr>
							<th>#</th>
							<th>Column heading</th>
							<th>Column heading</th>
							<th>Column heading</th>
						</tr>
					</thead>
					<tbody>
						<tr class="bg-primary">
							<th>1</th>
							<td>Column content</td>
							<td>Column content</td>
							<td>Column content</td>
						</tr>
						<tr>
							<th>2</th>
							<td>Column content</td>
							<td>Column content</td>
							<td>Column content</td>
						</tr>
						<tr class="bg-success">
							<th>3</th>
							<td>Column content</td>
							<td>Column content</td>
							<td>Column content</td>
						</tr>
						<tr>
							<th>4</th>
							<td>Column content</td>
							<td>Column content</td>
							<td>Column content</td>
						</tr>
						<tr class="bg-info">
							<th>5</th>
							<td>Column content</td>
							<td>Column content</td>
							<td>Column content</td>
						</tr>
						<tr>
							<th>6</th>
							<td>Column content</td>
							<td>Column content</td>
							<td>Column content</td>
						</tr>
						<tr class="bg-warning">
							<th>7</th>
							<td>Column content</td>
							<td>Column content</td>
							<td>Column content</td>
						</tr>
						<tr>
							<th>8</th>
							<td>Column content</td>
							<td>Column content</td>
							<td>Column content</td>
						</tr>
						<tr class="bg-danger">
							<th>9</th>
							<td>Column content</td>
							<td>Column content</td>
							<td>Column content</td>
						</tr>
					</tbody>
				</table>
			</div>	
		</div>
	</mat-card>	
</div>