<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="jakarta.faces.html"
      xmlns:f="jakarta.faces.core"
      xmlns:p="http://primefaces.org/ui">
<h:head>
    <h:outputStylesheet name="css/mycsslayout.css"/>
    <h:outputScript name="js/script.js" target="head"/>
    <title>Chat GPT</title>
</h:head>
<h:body>
    <f:view>
        <h:messages errorStyle="color: red" showDetail="true" showSummary="false"/>
        <h:form id="form">
            <p:outputLabel for="systemrole" value="Rôle de l'API : "/>
            <p:selectOneMenu id="systemrole" value="#{bb.systemRole}" editable="true">
                <f:selectItems value="#{bb.systemRoles}"/>
            </p:selectOneMenu>
            <h:panelGrid id="paneltotal" columns="2" columnClasses="topAligned,topAligned">
                <h:panelGrid id="panelgauche" columns="1">
                    <h:panelGrid id="questionetreponse" columns="1">
                        <h:panelGroup>
                            <h:outputText value="Question :"/>
                            <button onclick="copyToClipboard('question')">Copier question</button>
                            <button onclick="toutEffacer()">Effacer question et réponse</button>
                        </h:panelGroup>
                        <h:inputTextarea id="question" value="#{bb.question}" title="Question"
                                         cols="50" rows="5"/>
                        <h:commandButton value="Envoyer la question" action="#{bb.envoyer}"/>
                        <h:panelGroup>
                            <h:outputText value="Réponse :"/>
                            <button onclick="copyToClipboard('reponse')">Copier réponse</button>
                        </h:panelGroup>
                        <h:inputTextarea id="reponse" value="#{bb.reponse}" title="Réponse"
                                         cols="50" rows="15"/>
                    </h:panelGrid>

                </h:panelGrid>
                <h:panelGrid id="paneldroit" columns="1" style="vertical-align: top;">
                    <h:panelGroup>
                        <h:outputText value="Conversation :"/>
                        <button onclick="copyToClipboard('conversation')">Copier conversation</button>
                    </h:panelGroup>
                    <h:inputTextarea id="conversation" rows="30" cols="50" readonly="true"
                                     value="#{bb.conversation}" title="Conversation entière"/>
                </h:panelGrid>
            </h:panelGrid>
        </h:form>
    </f:view>
</h:body>
</html>