<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<jsp:include page="Header.jsp">
	<jsp:param name="titre" value="Page" />
</jsp:include>


		<div class="columns">
		
		  <!-- La colonne pour le menu des pages -->
		  <div class="column is-one-fifth">
			<jsp:include page="MenuPages.jsp" />
		  </div>
		  
		  <!-- La colonne pour la page choisie -->
		  <div class="column is-half">
		  <c:choose>
			  <c:when test="${not empty page.titre}">
			  	<div class="is-flex is-justify-content-space-between is-align-items mb-4">
				  	<h2 class="block">
				  		<c:forEach var="entry" items="${hierarchie}">
				  			<a href="AfficherPage?id=${entry.key}">${entry.value}</a> > 
				  		</c:forEach>
				  		${page.titre}
				  	</h2>
				  	<div>
						<div class="dropdown is-right is-inline-flex mr-2 is-hoverable">
						  <div class="dropdown-trigger">
						    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu3">
						      <span><i class="fa-solid fa-file-export"></i></span>
						      <span class="icon is-small">
						        <i class="fas fa-angle-down" aria-hidden="true"></i>
						      </span>
						    </button>
						  </div>
						  <div class="dropdown-menu" id="dropdown-menu3" role="menu">
						    <div class="dropdown-content">
								<a href="Export?id=${page.id}&type=latex" class="dropdown-item">Latex</a>
								<a href="Export?id=${page.id}&type=markdown" class="dropdown-item">Markdown</a>
								<a href="Export?id=${page.id}&type=html" class="dropdown-item">HTLM</a>
						    </div>
						  </div>
						</div>
						<div class="dropdown is-right is-inline-flex is-hoverable">
						  <div class="dropdown-trigger">
						    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu3">
						      <span><i class="fa-solid fa-share-nodes"></i></span>
						      <span class="icon is-small">
						        <i class="fas fa-angle-down" aria-hidden="true"></i>
						      </span>
						    </button>
						  </div>
						  <div class="dropdown-menu" id="dropdown-menu3" role="menu">
						    <div class="dropdown-content">
						      <c:forEach var="u" items="${listeUtilisateurs}">
						          <c:if test="${u.id != utilisateur.id}">
								    <a href="Partage?idP=${u.id}&idPage=${page.id}" class="dropdown-item">${u.login}</a>
								  </c:if>
						      </c:forEach>
						    </div>
						  </div>
						</div>
					</div>
				</div>
			  	<div class="block" id="md">
					<c:forEach var="bloc" items="${page.listeBlocs}">
					  <div class="field is-grouped is-align-items-flex-start bloc-container" draggable="true">
					    <div class="control is-expanded">
					      <div
					        class="is-primary editor"
					        contenteditable="true"
					        data-id="${bloc.id}"
					        data-ordre="${bloc.ordre}"
					        data-type="${bloc.type}"
					        data-metadata='${bloc.metadata}'
					      >${bloc.contenu}</div>
					    </div>
					    <c:if test="${ page.auteur_id eq utilisateur.id}">
						    <div class="control">
						      <button class="delete is-danger delete-bloc-btn" data-id="${bloc.id}"></button>
						    </div>
					    </c:if>
					  </div>
					</c:forEach>
				</div>
			  </c:when>
			<c:otherwise>
		        <p>Pas encore de page choisie.</p>
		    </c:otherwise>
		  </c:choose>
		  </div>
		  
		  <!-- La colonne pour le Tchat -->
		  <div class="column is-one-quarter">
			<jsp:include page="Tchat.jsp" />
		  </div>
		</div>

<jsp:include page="Footer.jsp" />

