<!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>LiveTaskyell</title>
  <!--<link rel="stylesheet" href="./css/notosansjp.css">-->
  <link rel="stylesheet" href="./fontawesome/css/all.css" >
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/jquery-ui.min.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/chat.css">
  <link rel="stylesheet" href="./css/loading.css">
  <link rel="stylesheet" href="./css/chat_room_footer.css">
  <link rel="stylesheet" href="./css/font-awesome.css">
</head>

<body style="background: #F3F3F3;">
  <!-- ナビメニュー -->
  <nav>
    <div class="chat_room_src_form none">
      <div class="d-flex flex-row h-100 align-items-center">
        <input type="search" name="search" id="searchMessage" placeholder="メッセージ検索" maxlength="600">
        <span class="src_icon"></span>
        <a href="#" class="cancel" id="messageSearchCancle">キャンセル</a>
      </div>
    </div>
    <div class="row nav_item_wrap h-100 align-items-center">
      <div class="col-4 pr-0">
        <div class="nav-item">
          <div class="nav_prev">
            <a href="chat.html"><span>チャット</span></a>
          </div>
        </div>
      </div>
      <div class="col-4 p-0">
        <div class="nav-item p-0">
          <h1 class="nav-ttl" id="roomTitle"></h1>
        </div>
      </div>
      <div class="col-4 pl-0">
        <div class="nav-item text-right">
          <a href="#" class="search_menu mx-2"><img src="icon/icon_search.svg" alt="検索"></a>
          <a href="#" data-toggle="modal" data-target="#menuModalCenter" class="menu-modal-btn" id="roomMenu" class="none mx-1"><img
              src="icon/icon_room_menu.svg" alt="メニュー"></a>
        </div>
      </div><!-- .col -->
    </div><!-- .row -->
  </nav><!-- nav -->

  <!-- コンテンツ -->
  <main id="chat_room">
    <div id="user_list" class="user_list d-flex flex-row hide"> </div>
    <!-- フィルター -->
    <div id="filter" class="user_list filter d-flex flex-row none"></div>
    <div class="chat_list none" id="searchList">
      <ul class="overlay_src_msg">
      </ul>
    </div>
    <!-- チャット内容 -->
    <div class="room_container">
      <div class="room_contents scroll">
        <div id="messages" class="message_container"></div>
      </div>
    </div>
  </main>
  <!-- フッター -->
  <footer class="chat_room_footer">
    <!-- フッター上 -->
    <div class="footer-wrap d-flex flex-column">
      <div>
        <div class="msg_notification" id="messageNotification" style="text-align:center;display: none;">
        </div>
      </div>
      <div class="footer_content_t">
        <div class="d-flex flex-row h-100">
          <div class="footer_item attach_file">
            <img src="icon/icon_camera.svg" alt="写真アイコン" id="imageInputButton">
            <form id="image-form">
              <input class="d-none" type="file" name="image" id="imageInputTag" accept="image/x-png,image/jpeg">
            </form>
          </div>
          <div class="footer_item attach_file">
            <img src="icon/icon_videocam.svg" alt="動画アイコン" id="videoUploadButton">
            <form id="video-form">
              <input class="d-none" type="file" name="image" id="videoInputTag" accept="video/mp4">
            </form>
          </div>
          <input type="text" name="message" class="message_input_form" id="messageInput" placeholder="メッセージを入力してください"
            maxlength="600">
          <button type="button" name="button" class="message_input_send none" id="messageSend"
            onclick="ChatRoom.sendMessage(this);">送信</button>
        </div>
      </div>
      <!-- フッター下 -->
      <div class="footer_content_b">
        <div class="d-flex flex-row justify-content-around h-100">
          <div class="footer_item">
            <a href="javascript:Common.startCollaboration(COLLABORATION_TYPE.AUDIO);">
              <img src="icon/icon_phone.svg" alt="通話アイコン">
              <p>通話</p>
            </a>
          </div>
          <div class="footer_item">
            <a href="javascript:Common.startCollaboration(COLLABORATION_TYPE.DOCUMENT);">
              <img src="icon/icon_paste.svg" alt="文書アイコン">
              <p>文書</p>
            </a>
          </div>
          <div class="footer_item">
            <a href="javascript:Common.startCollaboration(COLLABORATION_TYPE.CAMERA);">
              <img src="icon/icon_photo.svg" alt="画像アイコン">
              <p>画像</p>
            </a>
          </div>
          <div class="footer_item">
            <a href="javascript:Common.startCollaboration(COLLABORATION_TYPE.VIDEO);">
              <img src="icon/icon_movie.svg" alt="動画アイコン">
              <p>動画</p>
            </a>
          </div>
          <!--リリース後開発予定-->
          <div class="footer_item">
            <a href="javascript:Common.startCollaboration(COLLABORATION_TYPE.BOARD);">
              <img src="icon/icon_whiteboard_gray.svg" alt="ホワイトボードアイコン">
              <p>ボード</p>
            </a>
          </div>
        </div>
      </div>
    </div>
  </footer>
  <div id="userProfileModal"></div>
  <div id="chatMenuModal"></div>
  <div id="pictureModal"></div>

  <!-- Library -->
  <script src="./js/libs/jquery-3.3.1.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/bootstrap.min.js"></script>
  <script src="./js/libs/jquery.mark.min.js"></script>
  <script src="./js/libs/socket.io.js"></script>
  <!-- Language -->
  <script src="./js/languages/language.js"></script>
  <script src="./js/languages/language_ko.js" charset="UTF-8"></script>
  <script src="./js/languages/language_ja.js" charset="UTF-8"></script>
  <script src="./js/languages/language_en.js" charset="UTF-8"></script>
  <!-- Common -->
  <script src="./js/common/constant.js"></script>
  <script src="./js/common/native-bridge-delegate.js"></script>
  <script src="./js/common/native-bridge-datasource.js"></script>
  <script src="./js/common/common.js"></script>
  <script src="./js/utils/chat-util.js"></script>
  <!-- Models -->
  <script src="./js/Models/deviceinfo.js"></script>
  <script src="./js/Models/serverinfo.js"></script>
  <script src="./js/Models/userinfo.js"></script>
  <script src="./js/Models/roominfo.js"></script>
  <script src="./js/Models/socket-joininfo.js"></script>
  <!-- Socket -->
  <script src="./js/sockets/chat-websocket.js"></script>
  <script src="./js/sockets/chat-websocket-message.js"></script>
  <!-- View -->
  <script src="./js/utils/chat-media-handler.js"></script>
  <script src="./js/views/chats/chat-room.js"></script>
  <script src="./js/views/chats/chat-room-search.js"></script>
  <script src="./js/views/chats/chat-room-message.js"></script>
  <script src="./js/views/contact/namecard.js"></script>

  <script>
    function imageModal(image) {
      $('#modal_image').attr('src', image.src);
      $('#pictureModalCenter').modal('show');
    }

    $("#pictureModal").load("./modal_chat_picture.html");
    $("#chatMenuModal").load("./modal_chat_menu.html");

    if (deviceInfo.isAndroid()) {
      const needHostAlert = android.getExitHostAlert();
      if (needHostAlert) {
        alert(getLocalizedString("inform_exit_host_collaboration"));
      }
    }
    ChatRoom.loadMessages(roomInfo.roomID, roomInfo.roomName);

    NativeBridgeDelegate.saveSelectedUserList("");

  </script>
</body>

</html>