{% extends 'hexabox/elements/layouts/admin.html' %}
{% load static %}
        
{% block additional_css %}
{% endblock %}
        
{% block content %}
			<div class="container-fluid">
				
                <div class="row">

					<!-- Start - Calendar Events -->
                    <div class="col-xxl-3 col-xl-4">
                        <div class="card h-auto">
                            <div class="card-header d-block border-0 pb-0">
                                <h4 class="card-title">Calendar</h4>
								<p class="mb-0">Drag and drop your event or click in the calendar</p>
                            </div>
                            <div class="card-body">
								<div id="external-events">
									<button type="button" class="external-event justify-content-start mb-2 btn btn-primary light" data-class="bg-primary">
										<i class="fa-solid fa-circle"></i> New Theme Release
									</button>
									<button type="button" class="external-event justify-content-start mb-2 btn btn-warning light" data-class="bg-warning">
										<i class="fa-solid fa-circle"></i> My Event
									</button>
									<button type="button" class="external-event justify-content-start mb-2 btn btn-danger light" data-class="bg-danger">
										<i class="fa-solid fa-circle"></i> Meet Manager
									</button>
									<button type="button" class="external-event justify-content-start mb-2 btn btn-info light" data-class="bg-info">
										<i class="fa-solid fa-circle"></i> Create New theme
									</button>
									<button type="button" class="external-event justify-content-start mb-2 btn btn-dark light" data-class="bg-dark">
										<i class="fa-solid fa-circle"></i> Project Launch
									</button>
									<button type="button" class="external-event justify-content-start mb-2 btn btn-secondary light" data-class="bg-secondary">
										<i class="fa-solid fa-circle"></i> Meeting
									</button>
								</div>
								<div class="form-check checkbox-event my-4">
									<input class="form-check-input" type="checkbox" value="" id="drop-remove">
									<label class="form-check-label" for="drop-remove">Remove After Drop</label>
								</div>
								<a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#add-category" class="btn-event btn btn-primary w-100">
									<i class="fa fa-plus"></i> Create New
								</a>
                            </div>
                        </div>
                    </div>
					<!-- End - Calendar Events -->
					 
					<!-- Start - Calendar -->
                    <div class="col-xxl-9 col-xl-8">
                        <div class="card card-body">
							<div id="calendar" class="app-fullcalendar"></div>
                        </div>
                    </div>
					<!-- End - Calendar -->

                </div>
				
				<!-- Start - Add Category Modal -->
				<div class="modal fade" id="add-category">
					<div class="modal-dialog modal-dialog-centered">
						<div class="modal-content">
							<div class="modal-header">
								<h4 class="modal-title">Add a Category</h4>
								<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
							</div>
							<div class="modal-body">
								<form>
									<div class="row">
										<div class="col-md-12 mb-3">
											<label class="form-label">Category Name</label>
											<input class="form-control" type="text" name="category-name">
										</div>
										<div class="col-md-12 mb-3">
											<label class="form-label">Choose Category Color</label>
											<select class="selectpicker form-select" data-placeholder="Choose a color" name="category-color">
												<option value="success">Success</option>
												<option value="danger">Danger</option>
												<option value="info">Info</option>
												<option value="pink">Pink</option>
												<option value="primary">Primary</option>
												<option value="warning">Warning</option>
											</select>
										</div>
									</div>
								</form>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-danger light" data-bs-dismiss="modal">Close</button>
								<button type="button" class="btn btn-primary save-category" data-bs-toggle="modal">Save</button>
							</div>
						</div>
					</div>
				</div>
				<!-- End - Add Category Modal -->
				
            </div>
{% endblock %}