<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
  <title>Prototype</title>
  <link href="./fontawesome/css/all.css" rel="stylesheet">
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/lightbox.min.css">
  <link rel="stylesheet" href="./css/chat.css">
  <link rel="stylesheet" href="./css/font-awesome.css">
  <script>
    String.prototype.replaceAll = function(org, dest) {
      return this.split(org).join(dest);
    }

    let CHAT_SERVER_URL = '';
    let CMS_SERVER_URL = '';
    let ASSET_PATH = './';
    let PLATFORM = '';
    let IS_MOBILE = true;
    let IS_ONLINE = false;


  </script>
</head>
<body>
  <!-- coview share -->
  <div class="coview_share_area">
    <div class="coview_share_title">
        <div class="coview_share_title_left_area col-3 coview_share_title_name" href="#">LIVE</div>
        <div class="coview_share_title_left_area">
            <p id="coview_time">00:00</p>
        </div>
        <div class="coview_share_title_right_area">
            <button class="btn coview_share_title_btn" type="button" id="coviewChangeTypeButton">
                <img class="" src="./icon/ic_collaboration_type.png" alt="">
            </button>
        </div>
        <div class="coview_share_title_right_area">
            <button class="btn coview_share_title_btn" type="button" id="coviewAddMemberButton">
                <img class="" src="./icon/ic_collaboration_add_member.png" alt="">
            </button>
        </div>
        <div class="coview_share_title_right_area">
            <button class="btn coview_share_title_btn" type="button" id="coviewMemberButton">
                <img class="" src="./icon/ic_collaboration_member.png" alt="">
            </button>
        </div>
        <div class="coview_share_title_right_area">
            <button class="btn coview_share_title_btn" type="button" id="coviewShareCloseButton">
                <img class="" src="./icon/ic_collaboration_close.png" alt="">
            </button>
        </div>
    </div>
    <div class="coview_share_body" id="coviewShare">
    </div>
    <div class="coview_type_area" id="coviewTypeArea">
    </div>
    <div class="coview_add_member_area">
        <input type="radio" name="tab_name" id="tab1" checked>
        <label class="tab_class" for="tab1" id="collaborationMyGroup">myGroup</label>
        <div class="content_class">
            <div class="separator">
                <label id="collaborationFavorite">favorite</label>
            </div>
            <ul class="p-0 coview_favorite_list" id="coviewFavoriteList">
            </ul>
            <div class="separator">
                <label id="collaborationSeparatorMyGroup">myGroup</label>
            </div>
            <ul class="p-0 coview_group_list" id="coviewGroupList">
            </ul>
        </div>
        <input type="radio" name="tab_name" id="tab2" >
        <label class="tab_class" for="tab2" id="collaborationAllGroup">allGroup</label>
        <div class="content_class">
            <p>タブ2のコンテンツを表示します</p>
        </div>
    </div>
    <div class="coview_member_area" id="coviewMemberArea">
    </div>
    <div class="tool_area_switcher" id="toolAreaSwitcher">
        <button class="tool_hide_btn" id="toolHideBtn">
            <img class="" src="./icon/ic_collaboration_tool_hide.png" alt="">
        </button>
        <button class="tool_show_btn" id="toolShowBtn">
            <img class="" src="./icon/ic_collaboration_tool_show.png" alt="">
        </button>
    </div>
    <div class="coview_tool_area" id="coviewToolArea">
        <div class="coview_tool_area_left">
            <button class="coview_tool_btn" id="penBtn">
                <img class="" src="./icon/ic_collaboration_tool_pen.png" alt="">
            </button>
            <button class="coview_tool_btn" id="pointerBtn">
                <img class="" src="./icon/ic_collaboration_tool_pointer.png" alt="">
            </button>
            <button class="coview_tool_btn" id="clearBtn">
                <img class="" src="./icon/ic_collaboration_tool_clear.png" alt="">
            </button>
        </div>
        <div class="coview_tool_area_right">
            <button class="coview_tool_btn" id="pageBackBtn">
                <img class="" src="./icon/ic_collaboration_tool_back.png" alt="">
            </button>
            <button class="coview_tool_btn" id="pageForwardBtn">
                <img class="" src="./icon/ic_collaboration_tool_forward.png" alt="">
            </button>
        </div>
    </div>
    <div class="coview_bottom_area">
        <div class="bottom_area">
            <button class="bottom_btn" id="coviewMicBtn">
                <img class="" src="./icon/ic_collaboration_mic_off.png" alt="">
            </button>
            <button class="bottom_btn" id="coviewRecBtn">
               <img class="" src="./icon/ic_collaboration_record.png" alt="">
            </button>
            <button class="bottom_btn" style="background: red" id="coviewLeaveRoomBtn">
                <img class="" src="./icon/ic_collaboration_disconnect.png" alt="">
            </button>
        </div>
    </div>
  </div>

  <nav class="navbar navbar-expand navbar-dark bg-primary fixed-top flex-md-nowrap p-2 shadow">
    <ul class="navbar-nav col-3" id="navbarLeft">
      <button class="btn btn-primary" type="button" id="backButton">
        <i class="fa fa-arrow-left"></i>
      </button>
      <button class="btn btn-primary" type="button" id="homeButton">
        <i class="fa fa-home" style="font-size: 1.6rem;"></i>
      </button>
    </ul>
    <a class="navbar-brand col-6 mr-0 text-truncate titleRoomName text-center" href="#">Chat</a>
    <ul class="navbar-nav col-3" id="navbarRight">
      <!-- Chat Room Icons -->
      <li class="nav-item">
        <button type="button" id="sidebarCollapse" class="btn btn-primary chatRoomIcon">
          <i class="fas fa-bars"></i>
        </button>
      </li>
      <li class="nav-item">
        <button type="button" id="userSelectionDeleteBtn" class="btn btn-primary">
          <i class="fa fa-trash"></i>
        </button>
      </li>
      <li class="nav-item">
        <button type="button" id="userSelectionConfirmBtn" class="btn btn-primary chatRoomIcon">
          <span id="userSelectionLength" class="badge badge-light"></span>
          <i class="fas fa-check"></i>
        </button>
        <!-- Alert Dialog -->
        <div id="confirm" class="modal fade">
          <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-body" id="userSelectionTitle">
                Are you sure?
              </div>
              <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn" id="yesTitle">OK</button>
              </div>
            </div>
          </div>
        </div>

      </li>
    </ul>
  </nav>

  <!-- Sidebar -->
  <nav id="sidebar">
    <div id="dismiss">
      <i class="fas fa-arrow-right"></i>
    </div>
    <div class="sidebar-header">
      <h4 id="participants">Participants</h4>
    </div>
    <div id="users">
    </div>
    <footer class="sidebar-footer text-right">
      <a class="btn text-light" role="button" id="exitRoom">
        Exit <i class="fas fa-door-open"></i>
      </a>
      <!-- Confirm Dialog -->
      <div id="exitRoomConfirm" class="modal fade">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-body" id="exitRoomTitle">
              Are you sure?
            </div>
            <div class="modal-footer">
              <button type="button" data-dismiss="modal" class="btn btn-primary" id="exitRoomOk">Ok</button>
              <button type="button" data-dismiss="modal" class="btn" id="noExit">Cancel</button>
            </div>
          </div>
        </div>
      </div>

    </footer>
  </nav>
  <!-- Dark Overlay element -->
  <div class="overlay active"></div>
  <!-- loadingIndicator -->
  <div id="loadingIndicator">
    <div class="spinner-border text-primary loader" role="status">
      <span class="sr-only">Loading...</span>
    </div>
  </div>

  <!-- Error Alert Dialog -->
  <div id="customAlert" class="modal fade">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-body" id="customAlertTitle">
          Are you sure?
        </div>
        <div class="modal-footer">
          <button type="button" data-dismiss="modal" class="btn btn-primary" id="customAlertOk">Ok</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Confirm Dialog -->
  <div id="customConfirm" class="modal fade">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-body" id="customConfirmTitle">
          Are you sure?
        </div>
        <div class="modal-footer">
          <button type="button" data-dismiss="modal" class="btn btn-primary" id="customConfirmOk">Ok</button>
          <button type="button" data-dismiss="modal" class="btn" id="customAlertCancel">Cancel</button>
        </div>
      </div>
    </div>
  </div>

  <div class="tab-content" id="pills-tabContent">

    <div class="tab-pane fade show active" id="pills-chatlist" role="tabpanel" aria-labelledby="pills-chatlist-tab">
      <div class="search-group">
        <div class="input-group search-bar-fixed">
          <input style="font-family:Arial, FontAwesome !important;" id="room-search" type="text" class="write_msg form-control" name="message" placeholder="&#xF002;" autocomplete="off">
        </div>
      </div>
      <div class="text-center">
        <button type="button" class="btn btn-primary chat-list-type-btn" id="dmBtn"></button>
        <button type="button" class="btn btn-primary chat-list-type-btn" id="groupBtn"></button>
      </div>
      <div class="inbox_people">
        <div id="room_list" class="inbox_chat row">
        </div>
        <a id="createChatRoom" href="#" class="floating_plus_btn">
          <i class="fa fa-plus my-float"></i>
        </a>
      </div>
    </div>

    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
      ...
    </div>
    <div class="tab-pane fade" id="pills-communication" role="tabpanel" aria-labelledby="pills-communication-tab">
      ...
    </div>
    <div class="tab-pane fade" id="pills-setting" role="tabpanel" aria-labelledby="pills-setting-tab">
      ...
    </div>
    <!-- invisible tabs -->
    <div class="tab-pane fade" id="pills-chat" role="tabpanel" aria-labelledby="pills-chat-tab">
      <div class="input-group search-bar-fixed">
        <input style="font-family:Arial, FontAwesome" id="message-search" type="text" class="write_msg form-control" placeholder="&#xF002;" name="message" autocomplete="off">
        <div class="input-group-append">
          <button type="button" class="btn input-group-text dropdown-toggle-split" id="pre-search" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-arrow-up"></i>
          </button>
        </div>
      </div>
      <div class="mesgs">
        <div class="msg_history" id="messages">
        </div>
        <div class="type_msg">
          <div class="row">
            <div class="msg_notification" id="messageNotification">
            </div>
          </div>
          <div class="input_msg_write">
            <div class="input-group">
              <div class="input-group-prepend">
                <button class="btn input-group-text dropdown-toggle" data-toggle="dropdown" type="button"><i class="fa fa-camera"></i></button>
                  <!-- Video Upload -->
                  <div class="dropdown-menu">
                    <a class="dropdown-item" id="fileUploadButton" href="#">Photo
                      <a href="#">
                        <form id="image-form">
                        <input class="d-none" type="file" name="image" id="imageInputTag" accept="image/x-png,image/jpeg">
                        </form>
                      </a>
                    </a>
                    <a class="dropdown-item" id="fileUploadButton2" href="#">Video
                      <a href="#">
                        <form id="image-form2">
                        <input class="d-none" type="file" name="image" id="imageInputTag2" accept="video/mp4">
                        </form>
                      </a>
                    </a>
                  </div>
              </div>
              <input id="message-form" type="text" class="write_msg form-control" name="message" placeholder="Type a message" autocomplete="off">
              <div class="input-group-append">
                <button id="message-send-btn" class="btn input-group-text" type="button"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 協業タブ -->
      <div class="collaboration_tab fixed-bottom">
          <ul>
            <li>
              <a class="collaboration_tab_btn" id="coviewShareChat">
                  <img src="./icon/ic_collaboration_call.png" alt="">
                  <p id="collaboration_call">Call</p>
              </a>
            </li>
            <li>
              <a class="collaboration_tab_btn" id="coviewShareDoc">
                  <img src="./icon/ic_collaboration_document.png" alt="">
                  <p id="collaboration_document">Document</p>
              </a>
            </li>
            <li>
              <a class="collaboration_tab_btn" id="coviewSharePhoto">
                  <img src="./icon/ic_collaboration_photo.png" alt="">
                  <p id="collaboration_photo">Photo</p>
              </a>
            </li>
            <li>
              <a class="collaboration_tab_btn" id="coviewShareLive">
                  <img src="./icon/ic_collaboration_live.png" alt="">
                  <p id="collaboration_live">Live</p>
              </a>
            </li>
            <li>
              <a class="collaboration_tab_btn" id="coviewShareBoad">
                  <img src="./icon/ic_collaboration_boad.png" alt="">
                  <p id="collaboration_boad">Boad</p>
              </a>
            </li>
          </ul>
      </div>
    </div>

    <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
      <div class="inbox_people">
        <div class="heading_srch">
          <div class="srch_bar">
            <div class="stylish-input-group">
              <input id="contactListKeyword" type="text" class="search-bar" placeholder="Search">
              <span class="input-group-addon">
                <button type="button"> <i class="fa fa-search" aria-hidden="true"></i> </button>
              </span>
            </div>
          </div>
        </div>
        <div id="my_info" class="inbox_user row">
        </div>

        <label class="contact-seperator" id="favorite-seperator">Favorite</label>
        <div id="favorite_list" class="inbox_user row">
        </div>
        <label class="contact-seperator" id="mygroup-seperator">MY GROUP</label>
        <div id="my_group_list" class="inbox_user row">
        </div>


      </div>
    </div>

    <div class="tab-pane fade" id="pills-group" role="tabpanel" aria-labelledby="pills-group-tab">
      <div class="inbox_people">
        <div class="heading_srch">
          <div class="srch_bar">
            <div class="stylish-input-group">
              <input id="groupListKeyword" type="text" class="search-bar" placeholder="Search">
              <span class="input-group-addon">
                <button type="button"> <i class="fa fa-search" aria-hidden="true"></i> </button>
              </span>
            </div>
          </div>
        </div>
        <div id="group_list" class="inbox_user row">
        </div>
      </div>
    </div>
    <div class="tab-pane fade" id="pills-user" role="tabpanel" aria-labelledby="pills-user-tab">
      <div class="inbox_people">
        <div class="heading_srch">
          <div class="recent_heading">
            <h4 id="groupName"></h4>
          </div>
        </div>
        <div class="heading_srch">
          <div class="srch_bar">
            <div class="stylish-input-group">
              <input id="userListKeyword" type="text" class="search-bar" placeholder="Search">
              <span class="input-group-addon">
                <button type="button"> <i class="fa fa-search" aria-hidden="true"></i> </button>
              </span>
            </div>
          </div>
        </div>
        <div id="user_list" class="inbox_user row">
        </div>
      </div>
    </div>
    <div class="tab-pane fade" id="pills-confirm" role="tabpanel" aria-labelledby="pills-confirm-tab">
      <div class="inbox_people">
        <div class="heading_srch">
          <div class="recent_heading">
            <h3 id="inviteStatus"></h3>
            <div class="srch_bar">
              <div class="stylish-input-group">
                <input id="newRoomName" type="text" class="search-bar" placeholder="Room name" aria-label="Search">
              </div>
            </div>
          </div>
        </div>
        <div class="data_srch">
          <h3 id="invitedUsers"></h3>
          <div id="select_user_list" class="inbox_user row">
          </div>
        </div>
      </div>
    </div>
  </div>
  <ul class="icon-bar fixed-bottom nav nav-pills mb-0" id="pills-tab" role="tablist">
    <!-- Display None (d-none) chatList -->
    <li class="nav-item d-flex justify-content-center">
      <a class="nav-link active" id="pills-chatlist-tab" data-toggle="pill" href="#pills-chatlist" role="tab" aria-controls="pills-chatlist" aria-selected="true">
        <i class="fa fa-comments fa-6" aria-hidden="true"></i>
      </a>
    </li>
    <!-- Display None (d-none) chat -->
    <li class="nav-item d-none justify-content-center">
      <a class="nav-link" id="pills-chat-tab" data-toggle="pill" href="#pills-chat" role="tab" aria-controls="pills-chat" aria-selected="false">
        <i class="fa fa-comments fa-6" aria-hidden="true"></i>
      </a>
    </li>
    <!-- Display None (d-none) contact -->
    <li class="nav-item d-none justify-content-center">
      <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">
        <i class="fa fa-comments fa-6" aria-hidden="true"></i>
      </a>
    </li>
    <!-- Display None (d-none) chatList -->
    <li class="nav-item d-none justify-content-center">
      <a class="nav-link" id="pills-group-tab" data-toggle="pill" href="#pills-group" role="tab" aria-controls="pills-group" aria-selected="false">
        <i class="fa fa-comments fa-6" aria-hidden="true"></i>
      </a>
    </li>
    <!-- Display None (d-none) chatList -->
    <li class="nav-item d-none justify-content-center">
      <a class="nav-link" id="pills-user-tab" data-toggle="pill" href="#pills-user" role="tab" aria-controls="pills-user" aria-selected="false">
        <i class="fa fa-comments fa-6" aria-hidden="true"></i>
      </a>
    </li>
    <!-- Display None (d-none) chatList -->
    <li class="nav-item d-none justify-content-center">
      <a class="nav-link" id="pills-confirm-tab" data-toggle="pill" href="#pills-confirm" role="tab" aria-controls="pills-confirm" aria-selected="false">
        <i class="fa fa-comments fa-6" aria-hidden="true"></i>
      </a>
    </li>
    <li class="nav-item d-flex justify-content-center">
      <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">
        <i class="fa fa-file-alt fa-6" aria-hidden="true"></i>
      </a>
    </li>
    <li class="nav-item d-flex justify-content-center">
      <a class="nav-link" id="pills-communication-tab" data-toggle="pill" href="#pills-communication" role="tab" aria-controls="pills-communication" aria-selected="false">
        <i class="fa fa-users fa-6" aria-hidden="true"></i>
      </a>
    </li>
    <li class="nav-item d-flex justify-content-center">
      <a class="nav-link" id="pills-setting-tab" data-toggle="pill" href="#pills-setting" role="tab" aria-controls="pills-setting" aria-selected="false">
        <i class="fa fa-cog fa-6" aria-hidden="true"></i>
      </a>
    </li>
  </ul>
</div>


<div class="popup" id="namecard"></div>
<nav class="navbar navbar-expand navbar-dark fixed-bottom flex-md-nowrap p-2 bg-footer talign-center border footer-nav" id="bottomNav">
  <div class="col-4">
    <img src="./icon/ic_communication_meeting_gray.png" style="width: 35%;" id="contactButton">
  </div>
  <div class="col-4">
    <img src="./icon/ic_communication_menu.png" style="width: 35%;" id="chatButton">
  </div>
  <div class="col-4">
    <img src="./icon/home_common_content_icon_on.png" style="width: 35%;" id="archiveButton">
  </div>
</nav>
<script id="my-namecard-template" type="text/template">
  <div style="float: right;"><i class="fa fa-times my-name-card-close" aria-hidden="true"></i></div>
  <div class="namecard_img">
    <img src="./images/user-profile.png" alt>
    <div class="namedard-img-upload" >Upload</div>
    <div class="namecard-login-id" >{{name}}</div>
  </div>
  <div id="myGroupNameList">
    {{#groupPathList}}
    <li><b>{{.}}</b></li>
    {{/groupPathList}}
  </div>
</script>
<script id="namecard-template" type="text/template">
  <div style="float: right;"><i class="fa fa-times my-name-card-close" aria-hidden="true"></i></div>
  <div class="namecard_img">
    <img src="./images/user-profile.png" alt>
    <div class="namecard-login-id">{{name}}</div>
  </div>
  <div id="groupNameList">
    {{#groupPathList}}
    <li><b>{{.}}</b></li>
    {{/groupPathList}}
  </div>
</script>
<script id="message-template" type="text/template">
  <div class="incoming_msg">
    <div class="incoming_msg_img">
      <img src={{{profileImage}}} alt="">
    </div>
    <div class="received_msg">
      <div class="received_withd_msg">
        <p class="message_content">{{text}}</p>
        <span class="time_date">{{from}} | {{createdAtTime}} | {{createdAtDay}}</span>
      </div>
    </div>
  </div>
</script>
<script id="message-template-me" type="text/template">
  <div class="outgoing_msg">
    <div class="sent_msg">
      <p class="message_content">{{text}}</p>
      <span class="time_date">{{from}} | {{createdAtTime}} | {{createdAtDay}}</span>
    </div>
  </div>
</script>
<script id="room-template" type="text/template">
  <div class="chat_list {{active}} col-12" data-roomName="{{roomName}}" data-room-id="{{roomId}}">
    <div class="chat_people">
      <div class="chat_img">
        <img src={{{profileImage}}} alt="">
      </div>
      <div class="chat_ib">
        <div class="row">
          <div class="col-8">
            <h5 class="">
              <div class="room-list-title">
                <span class="text-truncate room-name-font">{{roomName}}</span>
                <span class="text-muted room-member-count">{{userCnt}}</span>
              </div>
            </h5>
          </div>
          <div class="col-4">
            <span class="chat_date">{{time}}</span>
          </div>
        </div>
        <p class="text-truncate float-left">{{lastMessage}}</p><span class="badge badge-pill badge-danger float-right unreadMsgCnt">{{unreadMsgCnt}}</span>
      </div>
      <div class="squareBox deleteBox"  data-room-id="{{roomId}}" data-active-room="{{active}}">
        <div class="squareBoxContent">
          <div>
            <span>
              <i class="fa fa-trash"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</script>
<script id="group-template" type="text/template">
  <div class="group_list col-12" data-name="{{name}}">
    <div class="group_people">
      <div class="group_img">
        <img src="./images/group-image.png" alt="">
      </div>
      <div class="group_ib">
        <h5>{{name}}</h5>
        <p>{{info}}</p>
      </div>
    </div>
  </div>
</script>
<script id="user-template" type="text/template">
  <div class="user_list col-12" data-name="{{name}}">
    <div class="user_people">
      <div class="user_img">
        <img src="{{profileImage}}" alt="">
      </div>
      <div class="user_ib">
        <h5>{{name}}</h5>
        <p>{{info}}</p>
      </div>
      <div class="squareBox userCheckBox" data-name="{{name}}" data-id="{{id}}">
        <div class="squareBoxContent">
          <div>
            <span>
              <i class="fas fa-check"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</script>
<script id="favorite-user-template" type="text/template">
  <div class="user_list col-12" data-name="{{name}}">
    <div class="user_people">
      <div class="user_img">
        <img src="{{profileImage}}" alt="">
      </div>
      <div class="user_ib">
        <h5>{{name}}</h5>
        <p>{{info}}</p>
      </div>
      <div class="squareBox userCheckBox" data-name="{{name}}" data-id="{{id}}">
        <div class="squareBoxContent">
          <div>
          <span>
            <i class="fas fa-check"></i>
          </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</script>
<script id="coview-type-template" type="text/template">
  <div class="coview_type_inbox">
    <div>
      <div class="coview_type_cell">
        <button class="coview_type_btn" id="{{btnId1}}">
          <img class="" src="{{imgUrl1}}" alt="">
        </button>
        <p>{{type1}}</p>
      </div>
      <div class="coview_type_cell">
        <button class="coview_type_btn" id="{{btnId2}}">
          <img class="" src="{{imgUrl2}}" alt="">
        </button>
        <p>{{type2}}</p>
      </div>
    </div>
    <div>
      <div class="coview_type_cell">
        <button class="coview_type_btn" id="{{btnId3}}">
          <img class="" src="{{imgUrl3}}" alt="">
        </button>
        <p>{{type3}}</p>
      </div>
      <div class="coview_type_cell">
        <button class="coview_type_btn" id="{{btnId4}}">
          <img class="" src="{{imgUrl4}}" alt="">
        </button>
        <p>{{type4}}</p>
      </div>
    </div>
  </div>
</script>
<script id="coview-member-template" type="text/template">
  <button class="{{className}}">
    <img class="" src="{{profileImage}}" alt="">
  </button>
</script>
<script id="coview-favorite-template" type="text/template">
  <li class="d-flex align-items-center">
    <div class="w-100">
      <div class="chat_item d-flex flex-row align-items-center">
        <div class="chat_item_l">
          <div class="thubnail">
            <img src="{{profileImage}}" alt="" />
          </div>
        </div>
        <div class="chat_item_m px-0">
          <div class="d-flex flex-column">
            <div class="chat_item_t">
              <span>{{userName}}</span>
            </div>
          </div>
        </div>
        <div class="chat_item_r">
          <div class="d-flex flex-column">
            <img src="./icon/ic_collaboration_favorite.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </li>
</script>
<script id="coview-group-template" type="text/template">
  <li class="d-flex align-items-center">
    <div class="w-100">
      <div class="chat_item d-flex flex-row align-items-center">
        <div class="chat_item_l">
          <div class="thubnail">
            <img src="{{profileImage}}" alt="" />
          </div>
        </div>
        <div class="chat_item_m px-0">
          <div class="d-flex flex-column">
            <div class="chat_item_t">
              <span>{{userName}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </li>
</script>
<script src="./socket.io/dist/socket.io.js"></script>
<script src="./js/libs/socket.io.js"></script>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/popper.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/locale/ko.js" charset="UTF-8"></script>
<script src="./js/libs/locale/ja.js" charset="UTF-8"></script>
<script src="./js/libs/mustache.min.js"></script>
<script src="./js/libs/deparam.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/libs/lightbox.js"></script>
<script src="./js/language.js"></script>
<script src="./js/language_ko.js" charset="UTF-8"></script>
<script src="./js/language_ja.js" charset="UTF-8"></script>
<script src="./js/language_en.js" charset="UTF-8"></script>
<script src="./js/constant.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/chat-ui.js"></script>
<script src="./js/chat-util.js"></script>
<script src="./js/chat-db.js"></script>
<script src="./js/chat-websocket.js"></script>
<script src="https://app.coview.co.kr:7443/coview_api.js"></script>
<script src="./js/share.js"></script>
</body>
<script>
jQuery('#homeButton').on('click', function() {
	if (CHAT_UTIL.isIOS()) {
		webkit.messageHandlers.goHome.postMessage({});

	} else if (CHAT_UTIL.isAndroid()) {
		android.goHome();
	}
});
</script>
</html>