<!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/archive.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="archive.html"><span style="font-size: 15px;">アーカイブ</span></a>
          </div>
        </div>
      </div>
      <div class="col-4 p-0">
        <div class="nav-item p-0">
          <h1 class="nav-ttl ttl_detail">詳細</h1>
        </div>
      </div>
      <div class="col-4 pl-0">
        <div class="nav-item text-right">
        </div>
      </div><!-- .col -->
    </div><!-- .row -->
  </nav><!-- nav -->

  <!-- コンテンツ -->
  <main id="archive">
    <div class="archive_detail" id="archiveDetail">
    </div>
  </main>

  <!-- ローディング -->
  <div id="userProfileModal"></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>
  <!-- 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>
  <!-- view -->
  <script src="./js/views/archive/archive.js"></script>

  <!-- Template archive-detail -->
  <script id="archive-detail-template" type="text/template">
    <div id="archive_player" class="player">
    </div>
    <div class="archive_detail_desc">
      <div class="archive_detail_fl_nm item">
        <h2 class="ttl" id="archiveFileName">FileName</h2>
        <span>{{fileName}}</span>
      </div>
      <div class="archive_detail_sv_date item">
        <h2 class="ttl" id="archiveInsertDate">InsertDate</h2>
        <span>{{insertDate}}</span>
      </div>
      <div class="archive_detail_room_nm item">
        <h2 class="ttl" id="archiveRoomName">ChatRoomName</h2>
        <span class="archive_chat_room">{{chatRoomName}}</span>
        <button id="joinChatRoom">
          <img src="icon/icon_join_room.png" alt="">
        </button>
      </div>
      <div class="archive_detail_sv_user item">
        <h2 class="ttl" id="archiveSaveUser">SaveUser</h2>
        <div class="d-flex flex-row">
          <div class="d-flex flex-column">
            <img src="{{profileImage}}" alt="プロフィール画像"   onclick="CHAT_UI.makeNameCard({{userId}})" >
            <p>{{userName}}</p>
          </div>
        </div>
      </div>
      <div class="archive_detail_user_list item">
        <h2 class="ttl" id="archiveAttendUser">AttendUser</h2>
        <ul class="d-flex flex-row" id="attendUser">
        </ul>
      </div>
    </div>
  </script>

  <!-- Template archive-user -->
  <script id="archive-user-template" type="text/template">
    <li class="archive_user">
      <img src="{{profileImage}}" alt="">
      <p>{{userName}}</p>
    </li>
  </script>

  <script>
    var archiveId;

    NativeBridgeDelegate.getLoginParameter();
    NativeBridgeDelegate.getGlobalParameter();

    function getGlobalParam() {
      CHAT_UI.refreshArchiveDetailScreen(archiveId);
    };

    window.addEventListener('DOMContentLoaded', function () {
      var urlPrm = new Object;
      var urlSearch = location.search.substring(1).split('&');
      var kv = urlSearch[0].split('=');
      urlPrm[kv[0]] = kv[1];
      archiveId = urlPrm.archiveId
      if (typeof (android) != "undefined") {

      } else {
        CHAT_UI.refreshArchiveDetailScreen(urlPrm.archiveId);
      }
    });
  </script>
</body>

</html>