<!doctype html>
<html>
<head>
<title>Direktil Local Server</title>
<base data-trunk-public-url />
<link data-trunk rel="copy-file" href="favicon.ico" />
<link rel="icon" href="favicon.ico" />
<link data-trunk rel="copy-file" href="js/vue.esm-browser.js" />
<link data-trunk rel="copy-file" href="style.css" />
<link data-trunk rel="copy-file" href="app.css" />
<style>@import url('/ui/style.css');@import url('/ui/app.css');</style>
<script data-trunk src="js/jsonpatch.min.js"></script>
<script data-trunk src="js/app.js" type="module" defer></script>
<script data-trunk src="js/Downloads.js"></script>
<script data-trunk src="js/GetCopy.js"></script>
<script data-trunk src="js/ClusterAccess.js"></script>
<script data-trunk src="js/ClusterCAs.js"></script>
<script data-trunk src="js/Cluster.js"></script>
<script data-trunk src="js/Host.js"></script>
<body>

<div id="app">
<header>
    <span id="logo"><img src="favicon.ico" /> Direktil Local Server</span>
    <span class="utils">
        <span id="login-hdr" v-if="session.token">
            Logged in
            <button class="link" @click="copyText(session.token)">&#x1F5D0;</button>
        </span>
        <span>server <code>{{ serverVersion || '-----' }}</code></span>
        <span>ui     <code>{{ uiHash || '-----' }}</code></span>
        <span :class="publicState ? 'green' : 'red'">&#x1F5F2;</span>
    </span>
</header>

<div class="error" v-if="error">
    <button class="btn-close" @click="error=null">&times;</button>
    <div class="code" v-if="error.code">{{ error.code }}</div>
    <div class="message">{{ error.message }}</div>
</div>

<div class="toasts"><div v-for="t in toasts" :class="'toast '+t.kind" @click="dismissToast(t.id)">{{ t.message }}</div></div>

<main class="content" v-if="!publicState">
    <p>Not connected.</p>
</main>

<main class="content" v-else-if="publicState.Store.New">
    <p>Store is new.</p>
    <p>Option 1: initialize a new store</p>
    <form @submit="unlockStore">
        <input type="text"     v-model="forms.store.name"  name="name" placeholder="Name" /><br/>
        <input type="password" v-model="forms.store.pass1" name="passphrase" required placeholder="Passphrase" />
        <input type="password" v-model="forms.store.pass2" required placeholder="Passphrase confirmation" />
        <input type="submit" value="initialize" :disabled="!forms.store.pass1 || forms.store.pass1 != forms.store.pass2" />
    </form>
    <p>Option 2: upload a previously downloaded store</p>
    <form @submit="uploadStore">
        <input type="file" ref="storeUpload" />
        <input type="submit" value="upload" />
    </form>
</main>

<main class="content" v-else-if="!publicState.Store.Open">
    <p>Store is not open.</p>
    <form @submit="unlockStore">
        <input type="password" name="passphrase" v-model="forms.store.pass1" required placeholder="Passphrase" />
        <input type="submit" value="unlock" :disabled="!forms.store.pass1" />
    </form>
</main>

<main class="content" v-else-if="!state">
    <p v-if="!session.token">Not logged in.</p>
    <p v-else>Invalid token</p>

    <form @submit="unlockStore">
        <input type="password" v-model="forms.store.pass1" required placeholder="Passphrase" />
        <input type="submit" value="log in"/>
    </form>
</main>

<template v-else>
  <nav class="sidebar">
    <input type="search" placeholder="Filter" v-model="viewFilter"/>
    <p class="nav-section">Admin</p>
    <p class="view-links"><button type="button" v-for="v in adminViews" @click="view = v" :class="{selected: isActive(v)}">{{v.title}}</button></p>
    <p class="nav-section" v-if="clusterViews.length">Clusters</p>
    <p class="view-links" v-if="clusterViews.length"><button type="button" v-for="v in clusterViews" @click="view = v" :class="{selected: isActive(v)}">{{v.title}}</button></p>
    <p class="nav-section" v-if="hostViews.length">Hosts</p>
    <p class="view-links" v-if="hostViews.length"><button type="button" v-for="v in hostViews" @click="view = v" :class="{selected: isActive(v)}">{{v.title}}</button></p>
  </nav>
  <main class="content">
  <h2 v-if="view">{{ view.type == 'cluster' ? 'Cluster ' : view.type == 'host' ? 'Host ' : '' }}{{view.title}}</h2>

  <div v-if="view.type == 'cluster'" id="clusters">
    <Cluster :cluster="viewObj" :token="session.token" :state="state" />
  </div>

  <div v-if="view.type == 'host'" id="hosts">
    <Host :host="viewObj" :token="session.token" :state="state" />
  </div>

  <div v-if="view.type == 'actions' && view.name == 'admin'">
  <h3>Config</h3>
  <form @submit="uploadConfig">
      <input type="file" ref="configUpload" required />
      <input type="submit" value="upload config" />
  </form>

  <h3>Store</h3>
  <p><a :href="'/public/store.tar?token='+state.Store.DownloadToken" target="_blank">Download</a></p>
  <form @submit="storeAddKey" action="/store/add-key">
      <p>Add an unlock phrase:</p>
      <input type="text"     v-model="forms.store.name"  name="name" required placeholder="Name" /><br/>
      <label><input type="checkbox" v-model="forms.store.byHash"> {{ forms.store.byHash ? "hash (base64)" : "passphrase"}}</label>
      <div v-if="forms.store.byHash">
      <input type="hash"     v-model="forms.store.hash"  name="passphrase" required placeholder="Hash" />
        {{" "}}generate with <code>dls hash '{{state.Store.Salt}}'</code>
      </div><div v-else>
      <input type="password" v-model="forms.store.pass1" name="passphrase" autocomplete="new-password" required placeholder="Phrase" />
      <input type="password" v-model="forms.store.pass2" autocomplete="new-password" required placeholder="Phrase confirmation" />
      </div>
      <input type="submit" value="add unlock phrase" :disabled="!((forms.store.pass1 && forms.store.pass1 == forms.store.pass2) || forms.store.hash)" />
  </form>
  <form @submit="storeDelKey" action="/store/delete-key">
      <p>Remove an unlock phrase:</p>
      <input type="text" v-model="forms.delKey.name"  name="name" required placeholder="Name" />
      <input type="submit" value="remove unlock phrase" />

      <p v-if="state.Store.KeyNames">Available names:
        <template v-for="k,i in state.Store.KeyNames">{{i?", ":""}}<code @click="forms.delKey.name=k">{{k}}</code></template>.</p>
  </form>

<template v-if="any(state.HostTemplates) || any(hostsFromTemplate)">
  <h3>Hosts from template</h3>
  <form @submit="hostFromTemplateAdd" action="" v-if="any(state.HostTemplates)">
      <p>Add a host from template instance:</p>
      <input type="text" v-model="forms.hostFromTemplate.name" required placeholder="Name" />
      <select v-model="forms.hostFromTemplate.Template" required>
        <option v-for="name in state.HostTemplates" :value="name">{{name}}</option>
      </select>
      <input type="text" v-model="forms.hostFromTemplate.IP" required placeholder="IP" />
      <input type="submit" value="add instance" />
  </form>
  <form @submit="hostFromTemplateDel" action="" v-if="any(hostsFromTemplate)">
      <p>Remove a host from template instance:</p>
      <select v-model="forms.hostFromTemplateDel" required>
        <option v-for="h in hostsFromTemplate" :value="h.Name">{{h.Name}}</option>
      </select>
      <input type="submit" value="delete instance" :disabled="!forms.hostFromTemplateDel" />
  </form>
</template>
  </div>
  </main>
</template>
</div>
</body>
</html>
