{{ template "headersMenu.html" . }}

<div class="container mt-20">
	<div id="PMJOURNAL" class="font-sans">
		<div class="p-1 mx-auto">
			<div class="overflow-hidden bg-white rounded-lg shadow-lg dark:bg-black">
				<div class="flex justify-between items-center px-6 py-4 bg-gray-50 border-b border-gray-200">
					<h1 id="articleCount" class="text-xl font-semibold text-black">0 Article</h1>
					<div class="flex space-x-2">
						<input type="text" id="searchInput" placeholder="Rechercher" class="px-3 py-2 text-black bg-white rounded-md border-2 border focus:outline-none focus:ring-2 focus:ring-green-600 dark:bg-black dark:text-white">
						<button id="categoriesBtn" class="px-4 py-2 text-white bg-black rounded-md transition duration-300 hover:bg-blue-600">Catégories</button>
						<button id="newArticleBtn" class="px-4 py-2 text-white bg-gray-800 rounded-md transition duration-300 hover:bg-gray-900">Nouvel article</button>
					</div>
				</div>
				<table class="w-full">
					<thead>
						<tr class="text-xs font-semibold tracking-wider text-left text-gray-600 uppercase bg-gray-50 dark:bg-gray-800">
							<th class="px-6 py-3">Titre d'article</th>
							<th class="px-6 py-3">Statut</th>
							<th class="px-6 py-3">Statistiques</th>
							<th class="px-6 py-3">Dernière mise à jour</th>
							<th class="px-6 py-3">Actions</th>
						</tr>
					</thead>
					<tbody id="articlesList" class="bg-white divide-y divide-gray-200 dark:bg-black">
						<!-- Articles will be dynamically inserted here -->
					</tbody>
				</table>
			</div>
		</div>

		<!-- Modal -->
		<div id="PMJOURNALmodal" class="hidden overflow-y-auto fixed inset-0 w-full h-full bg-gray-200 dark:bg-black" style="dar">
			<div class="relative top-20 p-5 mx-auto w-11/12 bg-gray-100 rounded-md border shadow-lg dark:bg-black md:w-3/4 lg:w-1/2">
				<div class="mt-3">
					<h3 class="text-2xl font-bold text-left text-black dark:text-white" id="modalTitle">Nouvel Article</h3>
					<div class="px-7 py-3 mt-2 text-center">
						<input id="articleTitle" type="text" placeholder="Titre de l'article" class="px-3 py-2 mb-3 w-full text-black bg-white rounded-md border-2 border focus:outline-none focus:ring-2 focus:ring-green-600 dark:bg-black dark:text-white">
						<select id="articleCategory" class="px-3 py-2 mb-3 w-full text-black bg-white rounded-md border-2 border focus:outline-none focus:ring-2 focus:ring-green-600 dark:bg-black dark:text-white">
							<!-- Categories will be dynamically populated -->
						</select>
						<input id="articleTags" type="text" placeholder="Tags (séparés par des virgules)" class="px-3 py-2 mb-3 w-full text-black bg-white rounded-md border-2 border focus:outline-none focus:ring-2 focus:ring-green-600 dark:bg-black dark:text-white">
						<select id="articleStatus" class="px-3 py-2 mb-3 w-full text-black bg-white rounded-md border-2 border focus:outline-none focus:ring-2 focus:ring-green-600 dark:bg-black dark:text-white">
							<option value="En ligne">En ligne</option>
							<option value="En brouillon">En brouillon</option>
						</select>
						<textarea class="px-3 py-2 w-full text-black bg-white rounded-md border-2 border focus:ring-2 focus:ring-green-600 dark:bg-black dark:text-white" id="editorContainer" style="text-align:left; height:calc(100vh - 480px); min-height:400px; font-family:monospace"></textarea>
					</div>
				</div>
				<div class="flex fixed right-0 bottom-0 left-0 justify-between items-center px-4 py-3 space-x-4 bg-white shadow-md dark:bg-black">
					<button id="cancelBtn" class="px-4 py-2 text-base font-medium text-gray-800 bg-gray-300 rounded-md shadow-sm hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300">
						Annuler
					</button>
					<button id="saveArticleBtn" class="px-4 py-2 text-base font-medium text-white bg-black rounded-md shadow-sm dark:text-black dark:bg-white focus:outline-none focus:ring-2 focus:ring-red-600">
						Enregistrer
					</button>
				</div>
			</div>
		</div>

		<!-- Categories Modal -->
		<div id="categoriesModal" class="hidden overflow-y-auto fixed inset-0 w-full h-full bg-gray-600 bg-opacity-50">
			<div class="fixed top-0 right-0 left-0 mx-auto bg-white dark:bg-black">
				<h3 class="mb-4 text-lg font-medium text-gray-900">Gérer les catégories</h3>
				<ul id="categoriesList" class="mb-4">
					<!-- Categories will be dynamically inserted here -->
				</ul>
				<input id="newCategoryInput" type="text" placeholder="Nouvelle catégorie" class="px-3 py-2 mb-3 w-full text-black bg-white rounded-md border-2 border focus:outline-none focus:ring-2 focus:ring-green-600 dark:bg-black dark:text-white">
				<button id="addCategoryBtn" class="px-4 py-2 text-white bg-black rounded-md transition duration-300 hover:bg-blue-600">Ajouter</button>
				<button id="closeCategoriesBtn" class="px-4 py-2 ml-2 text-gray-800 bg-gray-300 rounded-md transition duration-300 hover:bg-gray-400">Fermer</button>
			</div>
		</div>
	</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

{{ template "footer.html" . }}