<!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 href="./fontawesome/css/all.css" rel="stylesheet">
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/chat.css">
  <link rel="stylesheet" href="./css/contact.css">
  <link rel="stylesheet" href="./css/loading.css">
  <link rel="stylesheet" href="./css/footer.css">
  <link rel="stylesheet" href="./css/font-awesome.css">
</head>
<body>
  <!-- ナビメニュー -->
  <nav>
    <div class="row h-100 align-items-center">
      <div class="col-4 pr-0">
        <div class="nav-item">
          <div class="nav_prev">
            <a href="#" class="home_btn"><span>ホーム</span></a>
          </div>
        </div>
      </div>
      <div class="col-4 p-0">
        <div class="nav-item p-0">
          <h1 class="nav-ttl" id="title" >コンタクト</h1>
        </div>
      </div>
      <div class="col-4 pl-0">
        <div class="nav-item">
        </div>
      </div>
    </div>
  </nav><!-- nav -->

  <!-- コンテンツ -->
  <main id="contact">
    <!-- ユーザー検索 -->
    <div class="search_form">
      <form>
        <input type="search" name="search" placeholder="ユーザー検索">
        <span class="src_icon"></span>
        <a href="#" class="cancel none">キャンセル</a>
      </form>
    </div>
    <div class="content chat_list">
      <ul class="p-0 chat_make_room_list">
        <li class="d-flex align-items-center">
          <a href="#" style="width: 100%;">
            <div class="chat_item d-flex flex-row align-items-center">
              <div class="chat_item_l">
                <div class="thumbnail">
                  <div class="img_wrap"><img id="myImg" src="img/noImage.png" onError="this.src='./img/noImage.png'" /></div>
                </div>
              </div>
              <div class="chat_item_m px-0">
                <div class="d-flex flex-column">
                  <div class="chat_item_t">
                    <span class="chat_item_ttl" id="myName"></span>
                  </div>
                </div>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <!-- タブ -->


    <div class="content tabs">
      <input id="tabMyGroup" type="radio" name="tab_item" checked>
      <label class="tab_item" for="tabMyGroup">マイグループ</label>
      <input id="tabAllGroup" type="radio" name="tab_item">
      <label class="tab_item" for="tabAllGroup">全グループ</label>
      <div class="tab_content" id="tab1_content">
        <div class="chat_list" id="myContactList">
          <!-- お気に入りグループ -->
          <div class="category"><div class="category_name"><span>お気に入り</span></div></div>

          <div id="favoriteList"></div>
          <div id="myGroupList"></div>
        </div>
      </div>
      <div class="tab_content" id="tab2_content">
        <div class="breadcrumb" id="groupPathArea"></div>
        <div class="chat_list">
          <!-- 全グループ -->
          <ul class="p-0 chat_make_room_list">
            <li class="d-flex align-items-center">
              <a href="#" class="w-100" id="rootGroupBtn">
                <div class="chat_item d-flex flex-row align-items-center">
                  <div class="chat_item_l">
                    <div class="thumbnail">
                      <img src="icon/icon_prev_top.png" alt="トップグループに戻る" />
                    </div>
                  </div>
                  <div class="chat_item_m px-0">
                    <div class="d-flex flex-column">
                      <div class="chat_item_t">
                        <span class="chat_item_ttl">トップグループに戻る</span>
                      </div>
                    </div>
                  </div>
                </div>
              </a>
            </li>
            <li class="d-flex align-items-center">
              <a href="#" class="w-100" id="parentGroupBtn">
                <div class="chat_item d-flex flex-row align-items-center">
                  <div class="chat_item_l">
                    <div class="thumbnail">
                      <img src="icon/icon_prev.png" alt="上位グループに戻る" />
                    </div>
                  </div>
                  <div class="chat_item_m px-0">
                    <div class="d-flex flex-column">
                      <div class="chat_item_t">
                        <span class="chat_item_ttl">上位グループに戻る</span>
                      </div>
                    </div>
                  </div>
                </div>
              </a>
            </li>
            <div id="childGroupListArea">
            <li class="d-flex align-items-center">
              <a href="chat_room.html" class="w-100">
                <div class="chat_item d-flex flex-row align-items-center">
                  <div class="chat_item_l">
                    <div class="thumbnail">
                      <img src="icon/icon_folder.png" alt="フォルダ" />
                    </div>
                  </div>
                  <div class="chat_item_m px-0">
                    <div class="d-flex flex-column">
                      <div class="chat_item_t">
                        <span class="chat_item_ttl">子どもグループ</span>
                      </div>
                    </div>
                  </div>
                </div>
              </a>
              <div class="chat_item_r">
                <div class="d-flex flex-column">
                  <span class="star disable"></span>
                </div>
              </div>
            </li>
            </div>
            <div id="userInGroupList"></div>
          </ul>
        </div>
      </div>
    </div>
    <!-- オーバーレイ -->
    <div class="chat_list">
      <ul class="overlay_src_msg">
      </ul>
    </div>
  </main>

  <!-- フッター -->
  <footer>
    <div class="footer-wrap">
      <div class="d-flex justify-content-around h-100">
        <div class="footer_item">
          <a href="contact.html">
            <img src="icon/icon_contact.png" alt="コンタクト">
            <p class="active">コンタクト</p>
          </a>
        </div>
        <div class="footer_item">
          <a href="chat.html">
            <img src="icon/icon_chat_gray.png" alt="チャット">
            <p>チャット</p>
          </a>
        </div>
        <div class="footer_item">
          <a href="archive.html">
            <img src="icon/icon_archive_gray.png" alt="アーカイブ">
            <p>アーカイブ</p>
          </a>
        </div>
      </div>
    </div>
  </footer>

  <!-- ローディング -->
  <div id="loadingArea"></div>
  <div id="myProfileModal"></div>
  <div id="userProfileModal"></div>
  <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/contact.js"></script>
  <script src="./js/common.js"></script>
  <script src="./js/loading.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>
    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;
    $("#loadingArea").load("./loading.html");
    android.getLoginParameter();
    android.getGlobalParameter();

    function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
      CHAT_SERVER_URL = chatServerUrl;
      CMS_SERVER_URL = cmsServerUrl;
      PLATFORM = platform;
      IS_MOBILE = isMobile;
      IS_ONLINE = isOnline;
      CHAT_UI.refreshContactScreen();
    };
  </script>
</body>
</html>