{% extends 'layout/content.html.twig' %}

{% block stylesheets %}
	{{ encore_entry_link_tags('calendar') }}
{% endblock %}

{% block javascripts %}
	{{ encore_entry_script_tags('calendar') }}
{% endblock %}

{% block breadcrumb %}
	<nav aria-label="breadcrumb">
		<ol class="breadcrumb bg-white px-3 py-2 rounded shadow-sm rounded-pill align-items-center">
			<li class="breadcrumb-item d-flex align-items-center">
				<a href="{{ url('app_dashboard') }}" class="text-primary">
					<i class="fa fa-home me-1"></i>
					Accueil
				</a>
			</li>
			<li class="breadcrumb-item active" aria-current="page">Calendrier</li>
		</ol>
	</nav>
{% endblock %}

{% set hasSidebar = false %}
{% block sidebar %}{% endblock %}

{% block content %}
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-body">
					<div id="calendar"
						{% if (project is defined) %}
							data-initial-view="listYear"
							data-event-source="{{ path('app_calendar_events') }}?projectId={{ project.id }}"
						{% else %}
							data-initial-view="dayGridMonth"
							data-event-source="{{ path('app_calendar_events') }}"
						{% endif %}
					></div>
				</div>
			</div>
		</div>
	</div>

	<div class="modal" id="eventModal" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="eventModalLabel">Ajouter/Modifier un événement</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
					<form id="eventForm">
						<input type="hidden" id="eventId">
						<input type="hidden" id="projectId">
						<div class="mb-3">
							<label for="eventName" class="form-label">Nom</label>
							<input type="text" class="form-control" id="eventName" required>
						</div>
						<div class="mb-3">
							<label for="eventDescription" class="form-label">Description</label>
							<textarea class="form-control" id="eventDescription" required></textarea>
						</div>
						<div class="mb-3">
							<label for="eventStart" class="form-label">Date de début</label>
							<input type="datetime-local" class="form-control" id="eventStart" required>
						</div>
						<div class="mb-">
							<label for="eventEnd" class="form-label">Date de fin</label>
							<input type="datetime-local" class="form-control" id="eventEnd" required>
						</div>
					</form>
				</div>
				<hr>
				<div class="px-2 pt-1 pb-3  row justify-content-center">
					<div class="col-auto me-auto">
						<button type="button" id="deleteEvent" class="btn btn-outline-danger border-0 rounded-pill fs-6">
							<i class="fa fa-trash-alt"></i>
						</button>
					</div>
					<div class="col-auto">
						<button type="button" class="btn btn-secondary waves-effect rounded-pill width-md fs-6" data-bs-dismiss="modal">Annuler</button>
						<button type="button" class="btn btn-primary waves-effect rounded-pill width-md fs-6" id="saveEvent">Enregistrer</button>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}