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

{% block title %}{% endblock %}

{% block stylesheets %}{% endblock %}

{% block javascripts %}{% 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_task_index') }}" class="text-primary">
					<i class="fa fa-home me-1"></i>
					Accueil
				</a>
			</li>
			<li class="breadcrumb-item">
				<a href="{{ url('app_general_settings') }}">Paramètres</a>
			</li>
			<li class="breadcrumb-item active" aria-current="page">
				<a href="#">Préférences Application</a>
			</li>
		</ol>
	</nav>
{% endblock %}

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

{% set containerType = 'container' %}
{% block content %}
	{% set colorScheme = app.user.userPreference ? app.user.userPreference.colorScheme : 'light' %}
	{% set width = app.user.userPreference ? app.user.userPreference.width : 'fluid' %}
	{% set menuPosition = app.user.userPreference ? app.user.userPreference.menuPosition : 'default' %}
	{% set leftSidebarColor = app.user.userPreference ? app.user.userPreference.leftSidebarColor : 'light' %}
	{% set leftSidebarSize = app.user.userPreference ? app.user.userPreference.leftSidebarSize : 'default' %}
	{% set topbar =  app.user.userPreference ? app.user.userPreference.topbar : 'light' %}

	<div class="row">
		<div class="col-12">
			<div class="card">
				<form method="post" id="preferencesForm">
					<div class="card-header border-bottom">
						<div class="d-flex flex-row-reverse">
							<div class="">
								<button type="submit" class="btn btn-primary rounded-pill width-xl">
									<i class="mdi mdi-content-save me-1"></i>
									Enregistrer
								</button>
							</div>
						</div>
					</div>
					<div class="card-body">


						<div class="mb-4">
							<label for="colorScheme" class="form-label">Schéma de couleurs :</label>
							<select class="form-select" id="colorScheme" name="color_scheme">
								<option {{ colorScheme == 'light' ? 'selected' : '' }} value="light">Mode Clair</option>
								<option {{ colorScheme == 'dark' ? 'selected' : '' }} value="dark">Mode Sombre</option>
							</select>
						</div>

						<!-- Largeur -->
						<div class="mb-4">
							<label for="width" class="form-label">Largeur :</label>
							<select class="form-select" id="width" name="width">
								<option {{ width == 'fluid' ? 'selected' : '' }} value="fluid">Fluide</option>
								<option {{ width == 'boxed' ? 'selected' : '' }} value="boxed">Encadrée</option>
							</select>
						</div>

						<!-- Position des menus (barre de gauche et barre supérieure) -->
						<div class="mb-4">
							<label for="menuPosition" class="form-label">Position des menus (barre de gauche et barre supérieure) :</label>
							<select class="form-select" id="menuPosition" name="menu_position">
								<option {{ menuPosition == 'fixed' ? 'selected' : ''}} value="fixed">Fixe</option>
								<option {{ menuPosition == 'scrollable' ? 'selected' : '' }} value="scrollable">Défilant</option>
							</select>
						</div>

						<!-- Couleur de la barre latérale gauche -->
						<div class="mb-4">
							<label for="leftSidebarColor" class="form-label">Couleur de la barre latérale gauche :</label>
							<select class="form-select" id="leftSidebarColor" name="left_sidebar_color">
								<option {{ leftSidebarColor == 'clair' ? 'selected' : ''}} value="light">Clair</option>
								<option {{ leftSidebarColor == 'dark' ? 'selected' : ''}} value="dark">Sombre</option>
								<option {{ leftSidebarColor == 'brand' ? 'selected' : ''}} value="brand">Marque</option>
								<option {{ leftSidebarColor == 'grandient' ? 'selected' : ''}} value="gradient">Dégradé</option>
							</select>
						</div>

						<!-- Taille de la barre latérale gauche -->
						<div class="mb-4">
							<label for="leftSidebarSize" class="form-label">Taille de la barre latérale gauche :</label>
							<select class="form-select" id="leftSidebarSize" name="left_sidebar_size">
								<option {{ leftSidebarSize == 'default' ? 'selected' : ''}} value="default">Par défaut</option>
								<option {{ leftSidebarSize == 'compact' ? 'selected' : ''}} value="compact">Compact (taille petite)</option>
								<option {{ leftSidebarSize == 'condensed' ? 'selected' : ''}} value="condensed">Condensé (taille extra petite)</option>
							</select>
						</div>

						<div class="mb-4">
							<label for="topbar" class="form-label">Barre supérieure :</label>
							<select class="form-select" id="topbar" name="topbar">
								<option {{ topbar == 'dark' ? 'selected' : ''}} value="dark">Sombre</option>
								<option {{ topbar == 'light' ? 'selected' : ''}} value="light">Clair</option>
							</select>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
{% endblock %}