<!-- Message template -->
<template id="messageTemplate">
    <li class="message msg-item {{classList}}" id="{{messageId}}"> <!-- noreply notitle delevered start end self react -->
        <div class="seenBy"></div>
        <div class="messageContainer">
            <div class="replyIcon">
                <i class="fa-solid fa-reply"></i>
            </div>
            <div class="sent"><i class="fa-regular fa-paper-plane"></i></div>
            <div class="avatar"><img src="{{avatarSrc}}" width='30px' height='30px' alt='avatar'/></div>
            <div class="messageBody">
                <div class="messageTitle">{{{title}}}</div>
                <div class="messageReply" data-repid="{{repId}}" data-deleted>{{{replyMsg}}}</div>
                <div class="messageMain">
                    {{{message}}}
                    <div class="messageTime" >{{time}}</div>
                </div>
                <div class="reactsOfMessage">
                    <div class="reactsContainer"></div>
                    <div class="reactsCount"></div>
                </div>
            </div>
            
        </div>
    </li>
</template>

<template id="fileTemplate">
    <li class="message msg-item {{classList}}" id="{{messageId}}">
        <div class="seenBy"></div>
        <div class="messageContainer">
            <div class="replyIcon">
                <i class="fa-solid fa-reply"></i>
            </div>
            <div class="sent"><i class="fa-regular fa-paper-plane"></i></div>
            <div class="avatar"><img src="{{avatarSrc}}" width='30px' height='30px' alt='avatar'/></div>
            <div class="messageBody">
                <div class="messageTitle">{{{title}}}</div>
                <div class="messageReply" data-repid="{{repId}}" data-deleted>{{{replyMsg}}}</div>
                <div class="messageMain">
                    <div class="file msg">
                        <div class="fileIcon">
                            <i class="fa-regular fa-file-lines"></i>
                        </div>
                        <div class="fileInfo">
                            <div class="fileName">{{fileName}}</div>
                            <div class="filemeta">
                                <div class="progress"></div>
                                <div class="fileSize">{{fileSize}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="messageTime" >{{time}}</div>
                </div>
                <div class="reactsOfMessage">
                    <div class="reactsContainer"></div>
                    <div class="reactsCount"></div>
                </div>
            </div>
            
        </div>
    </li>
</template>


<template id="audioMessageTemplate">
    <li class="message msg-item {{classList}}" id="{{messageId}}"> <!-- noreply notitle delevered start end self react -->
        <div class="seenBy"></div>
        <div class="messageContainer">
            <div class="replyIcon">
                <i class="fa-solid fa-reply"></i>
            </div>
            <div class="sent"><i class="fa-regular fa-paper-plane"></i></div>
            <div class="avatar"><img src="{{avatarSrc}}" width='30px' height='30px' alt='avatar'/></div>
            <div class="messageBody">
                <div class="messageTitle">{{{title}}}</div>
                <div class="messageReply" data-repid="{{repId}}"data-deleted>{{{replyMsg}}}</div>
                <div class="messageMain">
                    <div class="msg audioMessage">
                        <div class="main-element">
                            <audio style="display: none;"></audio>
                            <div class="controls">
                                <div class="play-pause control"><i class="fa-solid fa-play"></i></div>
                                <div class="stop control"><i class="fa-solid fa-stop"></i></div>
                            </div>
                            <div class="progress">Uploading...</div>
                            <div class="time">{{length}}</div>
                        </div>
                    </div>
                    <div class="messageTime" >{{time}}</div>
                </div>
                <div class="reactsOfMessage">
                    <div class="reactsContainer"></div>
                    <div class="reactsCount"></div>
                </div>
            </div>
            
        </div>
    </li>
</template>

<template class="stickersKeyboardTemplate" id="stickersTemplate">
    <div class="stickerKeyboard">
        <div class="headers">
            <div class="prev navBtn"><i class="fa-solid fa-chevron-left"></i></div>
            <div class="stickersHeader">{{{heads}}}</div>
            <div class="next navBtn"><i class="fa-solid fa-chevron-right"></i></div>
        </div>
        <div class="stickersBody">
            {{{stickers}}}
        </div>
    </div>
</template>