<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Amebo</title>

    <link rel="stylesheet" href="/public/bulma.min.css">
    <link rel="stylesheet" href="/public/toastify.min.css" />

    <script src="/public/alpine.min.js" defer></script>
    <script src="/public/toastify.js"></script>
    <link rel="stylesheet" href="https://use.typekit.net/zwj1jrn.css">
    <link rel="stylesheet" href="/public/all.css">
</head>
<body style="background-color: #eeeedd; height: 100vh; overflow: hidden;">
    <div class="container is-fluid">
        <br /><br />
        <div class="columns">
          <div class="column is-4 is-offset-4 card border-radius-0 mt-6 px-6 pt-3 pb-6"
              x-data="{
                  loading: false,
                  username: 'username',
                  password: 'password',
                  scheme: 'password',
                  doLogin(){
                      fetch('/v8/tokens', {
                          method: 'POST',
                          credentials: 'include',
                          headers: {
                              'x-requested-with': '{{ctx.form_token}}',
                              'content-type': 'application/json'
                          },
                          body: JSON.stringify({
                              username: this.username,
                              password: this.password,
                              scheme: this.scheme
                          })
                      }).then(res => {
                          if(res.status === 202) return res.json();
                          throw Error()
                      }).then(data => {
                          Toastify({text: 'Logged in...', style: {background: 'green'}}).showToast();
                          window.location = '/p/actions'
                      }).catch(err => {
                          Toastify(
                              {text: 'Login failed', style: {background: 'red'}}
                          ).showToast()
                      })
                  },
                  doReset(scheme){
                      this.password = '';
                      this.username = '';
                  }
              }">
              <div class="has-text-centered mb-5">
                <img class="margin-auto" src="/public/logo.svg" width="100" height="100"></img>
              </div>
              <h1 class="title mb-1">Amebo 0.5.5</h1>
              <hr class="my-0 mb-3" />
              <div class="tabs mt-0" x-effect="doReset(scheme)">
                  <ul>
                      <li :class="scheme === 'password' ? 'is-active': ''" @click="scheme = 'password'"><a>Administrator</a></li>
                      <li :class="scheme === 'token' ? 'is-active': ''" @click="scheme = 'token'"><a>Producer Token</a></li>
                  </ul>
              </div>
              <template x-if="scheme == 'token'">
                  <div class="pb-6">
                      <div class="field">
                          <label for="" class="label">Producer</label>
                          <div class="control">
                              <input type="text" x-model="username" class="input" placeholder="Producer Name/ID">
                          </div>
                      </div>
                      <div class="field">
                          <label for="" class="label">Secret</label>
                          <div class="control">
                              <textarea class="textarea" x-model="password"
                                  placeholder="Paste producer secret key here..."
                                  rows="7"></textarea>
                          </div>
                      </div>
                      <button class="button is-info is-large is-fullwidth mt-6" @click="doLogin">Login As Producer</button>
                  </div>
              </template>
              <template x-if="scheme == 'password'">
                  <div class="pb-5">
                      <div class="field">
                          <label for="username">Username</label>
                          <div class="control">
                              <input name="username" x-model="username" type="text" class="input" placeholder="Administrator username">
                          </div>
                      </div>
                      <div class="field">
                          <label for="password">Password</label>
                          <div class="control">
                              <input type="password" x-model="password" class="input" placeholder="Enter admin password">
                          </div>
                      </div>
                      <button class="button quinary is-large is-fullwidth mt-6" @click="doLogin">Login as Administrator</button>
                  </div>
              </template>
          </div>
        </div>
    </div>
</body>
</html>
