<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <script src="https://code.jquery.com/jquery-2.1.4.min.js" th:if="false"></script>
    <script src="http://blackpeppersoftware.github.io/thymeleaf-fragment.js/thymeleaf-fragment.js" defer="defer"
        th:if="false"></script>

    <div th:replace="fragments/head :: headFragment">
        <meta charset="UTF-8">
        <title id="pageTitle">Chat</title>
    </div>
    <script src="./../../javascript/bundle.js" th:src="@{'/js/' + ${@environment.getProperty('chat-bundle')}}"
        defer></script>
    <script src="./../../javascript/bundle.js" th:src="@{'/js/' + ${@environment.getProperty('chat-worker-bundle')}}"
        defer></script>
    <link rel="stylesheet" th:href="@{/css/chat.css}" href="../../resources/static/css/chat.css">

</head>

<body>
    <div th:include="fragments/navbar :: navbarFragment"></div>
    <header id="chat-section" hidden>
        <div class="dark-overlay">
            <div class="chat-inner container bg-primary">
                <div class="row">
                    <div class="col-sm d-lg-block">
                        <h1 class="display-4">Chat with your friends</h1>
                        <div class="d-flex">
                            <div class="p-4 align-self-start">

                            </div>
                            <div class="p-4 align-self-end">

                                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam dolorem nostrum
                                consequatur eos voluptates. Ipsam ullam quos illo qui. Quaerat corrupti nisi numquam
                                rerum quasi nesciunt deserunt fugit commodi consequatur!

                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </header>
    <div class="container-fluid h-100  mt-4 pt-4">
        <div class="row justify-content-center h-100 mt-3">
            <div class="col-md-4 col-xl-3 chat">
                <div class="card mb-sm-3 mb-md-0 contacts_card chat-height" id="contactsCard">
                    <div class="card-header">
                        <form action="#" id="user-search">
                            <div class="input-group">
                                <input type="text" placeholder="Search..." id="user-search-term"
                                    class="form-control search">
                                <button class="search-cancel" id="user-search-cancel" hidden><i
                                        class="fas fa-times"></i></button>
                                <div class="input-group-prepend">

                                    <button class="input-group-text search_btn"><i class="fas fa-search"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="card-body contacts_body">
                        <ui class="contacts" id="contacts-box">
                            <li class="text-center ">
                                <div class="spinner-grow spinner-grow-lg text-info "
                                    style="width: 100px; height: 100px;"></div>
                            </li>
                        </ui>
                    </div>
                    <div class="card-footer"></div>
                </div>
            </div>
            <div class="col-md-8 col-xl-6 chat">
                <div class="card chat-height" id="no-user-selected">
                    <div class="m-auto">
                        <div class="d-flex justify-content-center">
                            <div class="align-self-center">
                                <h2 class="display-4 no-user-selected-h2">Please select a user</h2>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card chat-height" id="chat-card" hidden>
                    <div class="card-header msg_head">
                        <div class="d-flex bd-highlight">
                            <div class="img_cont">
                                <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg"
                                    class="rounded-circle user_img">
                                <!-- <span class="online_icon"></span> -->
                            </div>
                            <div class="user_info">
                                <span id="user-name-span">Chat with Khalid</span>
                                <p id="num-messages-p"></p>
                            </div>
                        </div>
                        <span id="action_menu_btn"><i class="fas fa-ellipsis-v"></i></span>
                        <div class="action_menu">
                            <ul>
                                <li><i class="fas fa-user-circle"></i> View profile</li>
                                <li><i class="fas fa-users"></i> Add to close friends</li>
                                <li><i class="fas fa-plus"></i> Add to group</li>
                                <li><i class="fas fa-ban"></i> Block</li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body msg_card_body" id="chat-area-new">
                    </div>
                    <div class="card-footer">
                        <form action="#" th:object="${chatMessageDTO}" method="post" id="chatMessageForm"
                            class="needs-validation" novalidate>
                            <div class="input-group">
                                <div class="input-group-append">
                                    <span class="input-group-text attach_btn"><i class="fas fa-paperclip"
                                            hidden></i></span>
                                </div>
                                <textarea name="" id="chatInput" class="form-control type_msg"
                                    placeholder="Type your message..." required></textarea>
                                <div class="input-group-append">
                                    <button class="input-group-text send_btn"><i
                                            class="fas fa-location-arrow"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <th:block th:include="fragments/head :: footerFragment"></th:block>

    <template id="msg_container_template">
        <div class="d-flex justify-content-start mb-4">
            <div class="img_cont_msg">
                <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg"
                    class="rounded-circle user_img_msg">
            </div>
            <div class="msg msg_container">
                {{{message}}}
                <span class="msg_time">{{msgDateFormat messageTime}}</span>
            </div>
        </div>
    </template>

    <template id="msg_container_send_template">
        <div class="d-flex justify-content-end mb-4">
            <div class="msg msg_container_send">
                {{{message}}}
                <span class="msg_time_send">{{msgDateFormat messageTime}}</span>
            </div>
            <!-- <div class="img_cont_msg">
                    <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg"
                        class="rounded-circle user_img_msg">
                </div> -->
            {{{avatar}}}
        </div>
    </template>

    <template id="user-contact-online-template">
        <li name="user-box" class="user-box">
            <div class="d-flex bd-highlight">
                <div class="img_cont">
                    <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg"
                        class="rounded-circle user_img">
                    <span class="online_icon"></span>
                </div>
                <div class="user_info">
                    <span class="to-user-span">{{userName}}</span><span> {{{lockIcon unlocked}}}</span>
                    <p>{{userName}} is online</p>
                </div>
                <div class="d-flex flex-column ml-auto">
                    <div class="text-right">{{moment lastMessageTime "MMM DD"}}</div>
                    <div style="color: rgba(255,255,255,0.7);">{{lastMessageText}}</div>
                </div>
            </div>
        </li>
    </template>
    <template id="user-contact-offline-template">
        <li name="user-box" class="user-box">
            <div class="d-flex bd-highlight">
                <div class="img_cont">
                    <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg"
                        class="rounded-circle user_img">
                </div>
                <div class="user_info">
                    <span class="to-user-span">{{userName}}</span><span> {{{lockIcon unlocked}}}</span>
                    <p>Last active {{fromNow lastActive}}</p>
                </div>
                <div class="d-flex flex-column ml-auto">
                    <div class="text-right">{{moment lastMessageTime "MMM DD"}}</div>
                    <div style="color: rgba(255,255,255,0.7);">{{lastMessageText}}</div>
                </div>
            </div>
        </li>
    </template>

</body>
<script src="../static/js/chatStatic.js" th:if="false"></script>


</html>