<div class="modal-header">
	<h4 class="modal-title" id="event-modal-label">New event</h4>
	<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>

<div class="modal-body">
	<form>
		<div class="mb-4">
			<label class="form-label" for="event-title">Title</label>
			<input class="form-control" id="event-title" type="text" placeholder="Event title">
		</div>
		<div class="mb-4">
			<label class="form-label" for="event-description">Description</label>
			<textarea class="form-control" id="event-description" rows="3" placeholder="Event description"></textarea>
		</div>
		<div class="row">
			<div class="col">
				<div class="mb-4">
					<label class="form-label" for="event-start">Start</label>
					{% include "ui/datepicker.html" layout="icon" id="event-start" %}
				</div>
			</div>
			<div class="col">
				<div class="mb-4">
					<label class="form-label" for="event-end">End</label>
					{% include "ui/datepicker.html" layout="icon" id="event-end" %}
				</div>
			</div>
		</div>
		{% include "ui/button.html" type="submit" text="Create event" color="primary" block=true class="mt-4" %}
	</form>
</div>

