{% extends 'hexabox/elements/layouts/admin.html' %}

        
{% block additional_css %}
{% endblock %}
		
{% block content %}
			<div class="container-fluid">
				<div class="row">
					<div class="col-xl-12">
						<div class="row">

							<!-- Start - Blog Category Add -->
							<div class="col-xl-4">
								<div class="card card-collapse">
									<div class="card-header">
										<h4 class="card-title">Add Blog Category</h4>
										<a class="collapse-indicator" data-bs-toggle="collapse" href="#collapseFilter" role="button" aria-expanded="false" aria-controls="collapseFilter">
											<i class="fa fa-angle-down"></i>
										</a>
									</div>
									<div class="collapsed collapse show" id="collapseFilter">
										<div class="card-body">
											<div class="mb-3">
												<label class="form-label">Name</label>
												<input type="text" class="form-control">
											</div>
											<div class="mb-3">
												<label class="form-label">Slug</label>
												<input type="text" class="form-control">
											</div>
											<div class="mb-3">
												<label for="exampleFormControlTextarea1" class="form-label">Type Message</label>
												<textarea class="form-control" id="exampleFormControlTextarea1" rows="5"></textarea>
											</div>
											<div class="clearfix">
												<button type="button" class="btn btn-primary">Save</button>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- End - Blog Category Add -->
							
							<!-- Start - Blog Category Table -->
							<div class="col-xl-8">
								<div class="card card-collapse">
									<div class="card-header">
										<h4 class="card-title"><i class="fa-solid fa-file-lines me-1 text-primary"></i>Blog Category</h4>
										<a class="collapse-indicator" data-bs-toggle="collapse" href="#collapseContactList" role="button" aria-expanded="false" aria-controls="collapseContactList">
											<i class="fa fa-angle-down"></i>
										</a>
									</div>
									<div class="collapsed collapse show" id="collapseContactList">
										<div class="card-body ">
											<div class="table-responsive">
												<table class="table table-bordered table-striped verticle-middle table-responsive-sm">
													<thead>
														<tr>
															<th scope="col" class="mw-80">S.No</th>
															<th scope="col" class="mw-150">Name</th>
															<th scope="col" class="mw-250 text-end">Actions</th>
														</tr>
													</thead>
													<tbody>
														<tr>
															<td>1</td>
															<td>Beauty</td>
															<td class="text-end">
																<a href="javascript:void(0);">Edit</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-success">Up</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-warning">Down</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-danger">Delete</a>
															</td>
														</tr>
														<tr>
															<td>2</td>
															<td>Fashion</td>
															<td class="text-end">
																<a href="javascript:void(0);">Edit</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-success">Up</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-warning">Down</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-danger">Delete</a>
															</td>
														</tr>
														<tr>
															<td>3</td>
															<td>Lifestyle</td>
															<td class="text-end">
																<a href="javascript:void(0);">Edit</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-success">Up</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-warning">Down</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-danger">Delete</a>
															</td>
														</tr>
														<tr>
															<td>4</td>
															<td>Food</td>
															<td class="text-end">
																<a href="javascript:void(0);">Edit</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-success">Up</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-warning">Down</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-danger">Delete</a>
															</td>
														</tr>
														<tr>
															<td>5</td>
															<td>Beauty</td>
															<td class="text-end">
																<a href="javascript:void(0);">Edit</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-success">Up</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-warning">Down</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-danger">Delete</a>
															</td>
														</tr>
														<tr>
															<td>6</td>
															<td>Fashion</td>
															<td class="text-end">
																<a href="javascript:void(0);">Edit</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-success">Up</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-warning">Down</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-danger">Delete</a>
															</td>
														</tr>
														<tr>
															<td>7</td>
															<td>Lifestyle</td>
															<td class="text-end">
																<a href="javascript:void(0);">Edit</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-success">Up</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-warning">Down</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-danger">Delete</a>
															</td>
														</tr>
														<tr>
															<td>8</td>
															<td>Food</td>
															<td class="text-end">
																<a href="javascript:void(0);">Edit</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-success">Up</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-warning">Down</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-danger">Delete</a>
															</td>
														</tr>
														<tr>
															<td>9</td>
															<td>Lifestyle</td>
															<td class="text-end">
																<a href="javascript:void(0);">Edit</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-success">Up</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-warning">Down</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-danger">Delete</a>
															</td>
														</tr>
														<tr>
															<td>10</td>
															<td>Food</td>
															<td class="text-end">
																<a href="javascript:void(0);">Edit</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-success">Up</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-warning">Down</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-danger">Delete</a>
															</td>
														</tr>
														<tr>
															<td>11</td>
															<td>Fashion</td>
															<td class="text-end">
																<a href="javascript:void(0);">Edit</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-success">Up</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-warning">Down</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-danger">Delete</a>
															</td>
														</tr>
														<tr>
															<td>12</td>
															<td>Lifestyle</td>
															<td class="text-end">
																<a href="javascript:void(0);">Edit</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-success">Up</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-warning">Down</a>
																<span class="opacity-50 mx-1">|</span>
																<a href="javascript:void(0);" class="text-danger">Delete</a>
															</td>
														</tr>
													</tbody>
												</table>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- End - Blog Category Table -->

						</div>
					</div>
				</div>
			</div>

{% endblock %}
{% block additional_js %}

{% endblock %}