<img id="cross-profil" src="/static/img/profilPage/back.svg"></img>
<div id="profil">
    <div class="container">
        <!-- Profile Section -->
        <div class="background-card"></div>
        <div class="profile-section">
            <div class="profile-image"></div>
            <div class="profile-info">
                <h2>Username <span class="online-status"></span></h2>
                <p id="player-elo">??? Elo</p>
            </div>
            <div class="rightButtonDiv">
                <img id="github" src="/static/img/profilPage/github.png">
                <img id="discord" src="/static/img/profilPage/discord.webp">
                <img id="newConv" src="/static/img/profilPage/addConv.svg">
                <img id="invite" src="/static/img/profilPage/invite.svg">
            </div>
        </div>

        <!-- Dashboard and History Section -->
        <div class="content">
            <div class="dashboard">
                <div style="display: flex; justify-content: space-between; position: absolute; width: calc(100% - 40px);">
                    <button class="button-dashboard" id="leftArrowDashboard"><</button>
                    <button class="button-dashboard" id="rightArrowDashboard">></button>
                </div>
                <h3>Dashboard</h3>
                <div class="contentStats">
                </div>
            </div>
            <div class="history" id="history">
                <h3 style="margin-top: 20px;">History</h3>
                <div id="scroll-match"></div>
            </div>
        </div>
    </div>
</div>
<div id="chatButton">
    <span class="notification-badge"></span>
    <img src="/static/img/homePage/bulle.png">
</div>
<div id="chatDiv">
    <div id="topChatHome">
        <h1>Chat</h1>
        <div id="topChatCross"><span>&times;</span></div>
    </div>
    <div id="messageListChatHome">
        <p id="infoChat">You are not connected to the chat</p>
    </div>
</div>
<div id="divNotification">
</div>