<!doctype html>
<html lang="@@lang@@">

<head>
      <title>Account Manager - TheDesk</title>
      <meta content="width=device-width,initial-scale=1.0" name="viewport">
      <link href="../../node_modules/materialize-css/dist/css/materialize.css" type="text/css" rel="stylesheet">
      <link href="../../css/themes.css" type="text/css" rel="stylesheet">
      <link href="../../css/master.css" type="text/css" rel="stylesheet">
      <link href="../../css/tl.css" rel="stylesheet" type="text/css">
      <link href="../../css/userdata.css" rel="stylesheet" type="text/css">
      <link href="../../node_modules/@fortawesome/fontawesome-free/css/all.min.css" type="text/css" rel="stylesheet">
      <style>
            .acct {
                  display: flex;
                  justify-content: space-around;
            }

            .card {
                  width: 400px;
                  background-color: #9e9e9e;
                  margin: 10px;
            }

            body,
            html {
                  overflow-y: scroll;
            }

            #acct-list {
                  display: flex;
                  flex-wrap: wrap;
                  color: white;
                  align-items: flex-start
            }

            .lts {
                  font-size: 150%
            }

            .colorsel {
                  display: flex;
            }

            .card .colorsel div:not(.exc) {
                  width: 20px;
                  height: 20px;
            }

            .card .colorsel div.exc {
                  width: 40px;
                  height: 20px;
            }

            .first {
                  display: flex;
                  justify-content: center;
                  align-items: center
            }

            .first .hide-first {
                  display: none;
            }
      </style>
      <meta charset="utf-8">
      @@comment-start@@
      <script type="text/javascript">
            var _jipt = [];
            _jipt.push(['project', 'thedesk']);
      </script>
      <script type="text/javascript" src="https://cdn.crowdin.com/jipt/jipt.js"></script>
      @@comment-end@@
</head>

<body id="mainView">
      <script type="text/javascript" src="../../node_modules/jquery/dist/jquery.js"></script>
      <script type="text/javascript" src="../../js/platform/first.js"></script>
      <script type="text/javascript" src="../../node_modules/materialize-css/dist/js/materialize.js"></script>
      <script type="text/javascript" src="../../js/lang/lang.@@lang@@.js"></script>
      <script type="text/javascript" src="../../node_modules/sweetalert2/dist/sweetalert2.all.min.js"></script>
      <script>
            var misskeytoken = false;
      </script>
      <script type="text/javascript" src="../../js/ui/tips.js"></script>
      <script type="text/javascript" src="../../js/common/time.js"></script>
      <script type="text/javascript" src="../../js/common/modal.js"></script>
      <div class="hide-first">
            <a href="index.html" class="btn waves-effect orange nex"
                  style="width:100%; max-width:200px;">@@back@@</a><br>
            <h5>@@list@@</h5>
            <div id="acct-list"></div>
            <div class="divider"></div>
      </div>
      <div>
            <h5>@@add@@</h5><br>
            <div id="add">
                  <div class="row">
                        <div class="col s8">
                              <input type="text" id="url" style="width:70%" placeholder="ex)mstdn.jp">
                              <div id="ins-suggest"></div>
                              @@codesetupwarn@@<br>
                              <label>
                                    <input type="checkbox" class="filled-in" id="linux" />
                                    <span>@@codesetup@@</span>
                              </label>
                              <br>
                              <label>
                                    <input type="checkbox" class="filled-in" id="misskey" />
                                    <span>@@thisismisskey@@</span>
                              </label><br>
                              <button class="btn waves-effect" onclick="instance()">Login</button><br>
                        </div>
                        <div class="col s4">
                              <span style="font-family:Open Sans;">Supports</span>
                              <div id="support" class="collection transparent"></div>
                        </div>
                  </div>
            </div>
            <div id="auth" style="display:none">
                  @@codepastewarn@@<br>
                  <input type="text" id="code" placeholder="@@codepaste@@">
                  <button class="btn waves-effect" onclick="code()">Auth</button><br>
            </div>
            <div id="misskeylogin" style="display:none">
                  <h5>AppSecret</h5>
                  @@misskeylogin@@<br>
                  <input type="hidden" id="misskey-url">
                  <input type="text" id="misskey-key" placeholder="@@codepaste@@">
                  <button class="btn waves-effect" onclick="misskeyLogin()">Auth</button><br>
            </div>
      </div>
      <div class="hide-first">
            <h5>@@mainacct@@</h5>
            <div class="input-field" style="width:300px"><span data-trans="your_acct">@@selacct@@</span>
                  <br>
                  <select id="main-acct-sel" class="acct-sel" style="color:black" onchange="mainacct()"></select>
                  <label></label>
            </div>
            Some instance data by <a href="https://instances.social" target="_blank">instances.social API</a><br>
            <h5 id="ins-title"></h5>
            Administered by:<a id="ins-admin"></a><br>
            <span id="ins-desc"></span><br>
            <img src="../../img/loading.svg" id="ins-prof" width="200"><br>
            <br>
            @@domain@@:<span id="ins-name"></span><br>
            @@connect@@:<span id="ins-connect"></span>@@ko@@<br>
            @@toots@@:<span id="ins-toot"></span>@@ko@@<br>
            @@users@@:<span id="ins-user"></span>@@users@@<br>
            @@safety@@:<span id="ins-per"></span>%<br>
            @@ver@@:<span id="ins-ver"></span>@<span id="ins-upd"></span><br>
      </div>
      <script type="text/javascript" src="../../js/ui/theme.js"></script>
      <script type="text/javascript" src="../../js/platform/end.js"></script>
      <script type="text/javascript" src="../../js/common/sha256.js"></script>
      <script type="text/javascript" src="../../js/login/tkn.js"></script>
      <script type="text/javascript" src="../../js/login/instance.js"></script>
      <script type="text/javascript" src="../../js/login/manager.js"></script>
      <script type="text/javascript" src="../../js/tl/date.js"></script>