<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">
    
    <div class="layout-rightpanel">
        <div class="rightpanel-wrapper">
          <div class="rightpanel-section weather-section">
            <div class="section-header">
                <h6>Aujourd'hui</h6>
            </div>
            <div class="weather">
            <p:graphicImage name="images/rightpanel/icon-sun.svg" library="demo" />
            <div class="weather-info">
                <h6>Dakar, #{currentDate}</h6>
                <h1>28º</h1>
            </div>
            </div>
          </div>
          <div class="rightpanel-section tasks-section">
            <div class="section-header">
                <h6>Mes tâches</h6>
                <h:form>
                    <ui:include src="/templates/components/buttons/button-icon.xhtml">
                        <ui:param name="icon" value="pi pi-plus" />
                        <ui:param name="rounded" value="true" />
                        <ui:param name="text" value="false" />
                        <ui:param name="styleClass" value="ui-button-secondary ui-button-flat" />
                    </ui:include>
                </h:form>
            </div>
            <ul>
                <li>
                    <div class="task-info">
                        <h6>Traiter les demandes d'adhésion en attente</h6>
                        <span>-Vérifier les dossiers</span>
                        <span>-Valider les documents</span>
                    </div>
                </li>
                <li>   
                    <div class="task-info">
                        <h6>Préparer le rapport mensuel</h6>
                        <span>Statistiques des membres actifs</span>
                    </div>
                </li>
                <li class="done">   
                    <div class="task-info">
                        <h6>Relancer les cotisations en retard</h6>
                    </div>
                    <i class="pi pi-check"></i>
                </li>
                <li class="done">   
                    <div class="task-info">
                        <h6>Organiser la réunion mensuelle</h6>
                    </div>
                    <i class="pi pi-check"></i>
                </li>
            </ul>
          </div>

          <div class="rightpanel-section favorites-section">
            <div class="section-header">
                <h6>Raccourcis</h6>
            </div>
            <div class="favorite-items">
                <a href="#" class="favorite-item" title="Membres">
                    <i class="pi pi-users" style="font-size: 1.5rem; color: #007ad9;"></i>
                </a>
                <a href="#" class="favorite-item" title="Cotisations">
                    <i class="pi pi-dollar" style="font-size: 1.5rem; color: #28a745;"></i>
                </a>
                <a href="#" class="favorite-item" title="Aides">
                    <i class="pi pi-heart" style="font-size: 1.5rem; color: #dc3545;"></i>
                </a>
                <a href="#" class="favorite-item" title="Événements">
                    <i class="pi pi-calendar" style="font-size: 1.5rem; color: #6f42c1;"></i>
                </a>
                <a href="#" class="favorite-item" title="Rapports">
                    <i class="pi pi-chart-bar" style="font-size: 1.5rem; color: #fd7e14;"></i>
                </a>
                <a href="#" class="add-item">
                  <i class="pi pi-plus"></i>
                </a>
            </div>
          </div>

          <div class="rightpanel-section chat-section chat">
            <h:form>
                <p:tabView>
                    <p:tab>
                        <f:facet name="title">
                            <p:graphicImage name="images/rightpanel/profile-1.png" library="demo" />
                            <span class="ui-badge">2</span>
                        </f:facet>
                        <div class="chat">
                            <span class="fade"></span>
                            <div class="chat-content">
                                <div class="chat-message send">
                                    <span class="name">Vous</span>
                                    <div class="message">
                                        <p>Bonjour, j'ai besoin de votre validation pour les nouvelles adhésions.</p>
                                        <span>Il y a 10 min</span>
                                    </div>
                                    <div class="message">
                                        <p>Merci de vérifier les dossiers 🙏</p>
                                        <span>Il y a 5 min</span>
                                    </div>
                                </div>
                                <div class="chat-message">
                                    <span class="name">Admin</span>
                                    <div class="message">
                                        <p>Parfait, je m'en occupe dans l'heure qui suit.</p>
                                        <span>Il y a 2 min</span>
                                    </div>
                                </div>
                                <div class="chat-message send">
                                    <span class="name">Vous</span>
                                    <div class="message">
                                        <p>Excellent, merci beaucoup !</p>
                                        <span>Il y a 1 min</span>
                                    </div>
                                </div>
                            </div>
                            <div class="chat-input">
                                <p:inputText placeholder="Écrivez votre message..." />
                            </div>
                        </div>
                    </p:tab>
                    <p:tab>
                        <f:facet name="title">
                            <p:graphicImage name="images/rightpanel/profile-2.png" library="demo" />
                        </f:facet>
                        <div class="chat">
                            <div class="chat-content no-message">
                                <h4>Aucun message de l'équipe support</h4>
                            </div>
                            <div class="chat-input">
                                <p:inputText placeholder="Écrivez votre message..." />
                            </div>
                        </div>
                    </p:tab>
                    <p:tab>
                        <f:facet name="title">
                            <i class="pi pi-plus"></i>
                        </f:facet>
                        <div class="chat">
                            <span class="fade"></span>
                            <div class="contacts">
                                <ul>
                                    <li>
                                        <p:graphicImage name="images/rightpanel/profile-1.png" library="demo" />
                                        <div class="contact-info">
                                            <h6>Administrateur</h6>
                                            <span>En ligne</span>
                                        </div>
                                    </li>
                                    <li>
                                        <p:graphicImage name="images/rightpanel/profile-2.png" library="demo" />
                                        <div class="contact-info">
                                            <h6>Support Technique</h6>
                                            <span>Absent</span>
                                        </div>
                                    </li>
                                    <li>
                                        <p:graphicImage name="images/rightpanel/profile-3.png" library="demo" />
                                        <div class="contact-info">
                                            <h6>Secrétaire</h6>
                                            <span>En ligne</span>
                                        </div>
                                    </li>
                                    <li>
                                        <p:graphicImage name="images/rightpanel/profile-4.png" library="demo" />
                                        <div class="contact-info">
                                            <h6>Trésorier</h6>
                                            <span>En ligne</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="chat-input">
                                <p:inputText placeholder="Rechercher une personne" />
                            </div>
                        </div>
                    </p:tab>
                </p:tabView>
            </h:form>
          </div>
        </div>
    </div>

</ui:composition>