<%@ 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-center mb-4">
		  	<h2 class="block">${page.titre}</h2>
			<div class="dropdown is-right">
			  <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 class="block" id="md">
			<c:forEach var="bloc" items="${page.listeBlocs}">
			  <div class="field is-grouped is-align-items-flex-start bloc-container">
			    <div class="control is-expanded">
			      <div
			        class="textarea is-primary editor"
			        contenteditable="true"
			        rows="1"
			        data-id="${bloc.id}"
			        data-ordre="${bloc.ordre}"
			        data-type="${bloc.type}"
			        metadata="${bloc.metadata}"
			      >${bloc.contenu}</div>
			    </div>
			    <div class="control">
			      <button class="delete is-danger delete-bloc-btn" data-id="${bloc.id}"></button>
			    </div>
			  </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" />

