{% extends 'layouts/base.html' %}
{% load static %}
{% block sidebar_class %}
	sidebar sidebar-style-2
{% endblock sidebar_class %}
{% block content %}
	<div class="content">
		<div class="page-inner">
			<div class="page-header">
				<h4 class="page-title">Alert</h4>
				<ul class="breadcrumbs">
					<li class="nav-home">
						<a href="#">
							<i class="flaticon-home"></i>
						</a>
					</li>
					<li class="separator">
						<i class="flaticon-right-arrow"></i>
					</li>
					<li class="nav-item">
						<a href="#">Base</a>
					</li>
					<li class="separator">
						<i class="flaticon-right-arrow"></i>
					</li>
					<li class="nav-item">
						<a href="#">Sweet Alert</a>
					</li>
				</ul>
			</div>
			<div class="row">
				<div class="col-md-12">
					<div class="card">
						<div class="card-header">
							<div class="card-title">Sweet Alert</div>
							<div class="card-category"><a href="https://sweetalert.js.org/">SweetAlert</a> makes popup messages easy and pretty.</div>
						</div>
						<div class="card-body">
							<table class="table table-bordered">
								<tbody><tr>
									<td style="width: 40%; vertical-align: middle;">Basic alert</td>
									<td>
										<button type="button" class="btn btn-info" id="alert_demo_1"> Show me</button>		
									</td>
								</tr>
								<tr>
									<td style="width: 40%; vertical-align: middle;">Alert title and text</td>
									<td>
										<button type="button" class="btn btn-focus" id="alert_demo_2"> Show me</button>		
									</td>
								</tr>
								<tr>
									<td style="width: 40%; vertical-align: middle;">Enable <code>warning</code>, <code>error</code>, <code>success</code>, and <code>info</code> state icons</td>
									<td>
										<button type="button" class="btn btn-warning" id="alert_demo_3_1"> Warning</button>		
										<button type="button" class="btn btn-danger" id="alert_demo_3_2"> Error</button>		
										<button type="button" class="btn btn-success" id="alert_demo_3_3"> Success</button>		
										<button type="button" class="btn btn-info" id="alert_demo_3_4"> Info</button>	
									</td>
								</tr>
								<tr>
									<td style="width: 40%; vertical-align: middle;">Change confirm button text and class</td>
									<td>
										<button type="button" class="btn btn-success " id="alert_demo_4"> Show me</button>		
									</td>
								</tr>
								<tr>
									<td style="width: 40%; vertical-align: middle;">Modal window with input field</td>
									<td>
										<button type="button" class="btn btn-warning " id="alert_demo_5"> Show me</button>		
									</td>
								</tr>
								<tr>
									<td style="width: 40%; vertical-align: middle;">Closes the modal after a certain amount of time (specified in ms)</td>
									<td>
										<button type="button" class="btn btn-primary" id="alert_demo_6">Show me</button>		
									</td>
								</tr>
								<tr>
									<td style="width: 40%; vertical-align: middle;">A warning message, with a function attached to the "Confirm" Button</td>
									<td>
										<button type="button" class="btn btn-success" id="alert_demo_7">Show me</button>		
									</td>
								</tr>
								<tr>
									<td style="width: 40%; vertical-align: middle;">By passing a parameter, you can execute something else for cancel</td>
									<td>
										<button type="button" class="btn btn-danger" id="alert_demo_8">Show me</button>		
									</td>
								</tr>
							</tbody></table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock content %}

