{% extends 'base.html.twig' %}

{% block body %}
<div class="container1">

    <!--Section left  css 24 à 63-->

    <div class="chatbot1-show" id="chatbot1">

          <div class="chatbot-header1-show">
            <p class="titre-chat-ia" onclick="newChat()">
                Nouveau chat
            </p>
            <div class="chat-div">
              {% for chat in otherChats %}
              <div class="chat-titre-left" onclick="goChat({{chat.id}})">
                <p>{{chat.name}}</p>
                <img src="/img/delete.svg" alt="delete" onclick="deleteChat({{chat.id}})" />
              </div>
              {% endfor %}
          </div>
          </div>
       
    </div>
    <!-- fin Section left  css 24 à 63-->




    <!--  Section chatbot -->
    <div class="container" id="container">
            <!-- Header chat  css 78 à 100-->

            <div class="header">
               <img src="/img/Logo_Gennia.png" alt="GENNIA Logo" class="logo"  onclick="home()">
               <h3 onclick="editChat({{thisChat.id}})">{{thisChat.name}}</h3>

              <div class="logout">
                  <img id="lohout" src="/img/logout.svg" alt="logout" onclick="logout()"/>
              </div>
           </div>

            <div class="chat-container" id="chat-container">
                {% if thisChat.messages is defined %}
                <div class="chat-box" id="chat-box">      
                    {% for message in thisChat.messages %}
                        {% if message.userId != null %}
                            <div class="chat-box">
                                <div class="icon" id="user-icon">
                                    <i class="fa-regular fa-user"></i>
                                </div>
                                <div class="user">{{message.content}}</div>
                            </div>
                        {% else %}
                            <div class="chat-box">
                                <div class="iconBot" id="bot-icon">
                                    <img src="/img/Logo_Gennia.png" alt="logo GENNIA"/>
                                </div>
                                <div class="bot">{{message.content}}</div>
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>      
                {% else %}
                <div class="chat-box" id="chat-box">      
                    <div class="bot">
                        <img class="message-icon" src="/img/Logo_Gennia.png" alt="GENNIA Logo">
                        <p>Salut! 👋 Je suis Gennia, un chatbot d'intelligence artificielle développé par IOT START. Je peux répondre à vos questions sur n'importe quel sujet. Comment puis-je t'aider ?.</p>
                    </div> 
                </div> 
                {% endif %}

            </div>

           
           <!-- btn Envoyer CSS 176 A 266  -->
 
           <div class="input-container">
                <textarea id="user-input" placeholder="Message..."></textarea>
                <button id="send-button" class="send-button">
                    <div class="circle"></div>
                    <i class="fa-solid fa-paper-plane" id="button-icon"></i>
                    <span class="send">Envoyer</span>
                </button>
            </div>

    </div>
       
  
       <script src="/index.js"></script>
       
</div>
{% endblock %}