<!DOCTYPE html>
<html ng-app="com.daplie.cloud" ng-strict>
  <head>
    <link type="text/css" rel="stylesheet" href="/assets/com.bootstrapcdn/spacelab/bootstrap.css">
  </head>
  <body class="fade" ng-class="[ 'in' ]" ng-controller="LoginController as vm" ng-init="vm.setSimple()">

    <div class="container">
      <center>
        <h1>Welcome to Goldilocks!</h1>
        <span ng-if="vm.config">
          Server Name: '<span ng-bind="vm.config.device.hostname"></span>' running from
          <br/>
          <code><span ng-bind="vm.config.cwd"></span>/</code>
          <br/>
          iface: <span ng-bind="vm.admin.network.iface"></span>
          <br/>
          ipv4: <span ng-bind="vm.admin.network.ipv4"></span>
          <br/>
          ipv6: <span ng-bind="vm.admin.network.ipv6"></span>
        </span>
        <br/>
        <br/>
      </center>
    </div>

    <div class="container">
      <div class="row">
      <div class="col-sm-3">
        <ul class="nav nav-pills nav-stacked" ng-init="vm.admin.page = 'authn'">
          <li
            role="presentation"
            ng-class="{ active: 'authn' === vm.admin.page }"
            ><a
              href=""
              ng-click="vm.admin.page = 'authn'"
              ng-disabled="'authn' === vm.admin.page"
              >Authenticate</a></li>
          <li
            ng-if="vm.config"
            role="presentation"
            ng-class="{ active: 'network' === vm.admin.page }"
            ><a
              href=""
              ng-click="vm.admin.page = 'network'"
              ng-disabled="'network' === vm.admin.page"
              >Network</a></li>
          <li
            ng-if="vm.config"
            role="presentation"
            ng-class="{ active: 'domains' === vm.admin.page }"
            ><a
              href=""
              ng-click="vm.admin.page = 'domains'"
              ng-disabled="'domains' === vm.admin.page"
              >Domains</a></li>
          <li
            ng-if="vm.config"
            role="presentation"
            ng-class="{ active: 'plugins' === vm.admin.page }"
            ><a
              href=""
              ng-click="vm.admin.page = 'plugins'"
              ng-disabled="'plugins' === vm.admin.page"
              >Plugins</a></li>
        </ul>

        <div ng-if="vm.config">
          <ul class="nav nav-tabs">
            <li
              role="presentation"
              ng-class="{ active: !vm.admin.remote }"
              ><a
                href=""
                ng-click="vm.admin.remote = false"
                >Local Server</a></li>
            <li
              role="presentation"
              ng-class="{ active: vm.admin.remote }"
              ><a
                href=""
                ng-click="vm.admin.remote = true"
                >Remote Server</a></li>
          </ul>

          <div ng-if="!vm.admin.remote">
            <label>Server Address:</label>
            <input type="text" disabled value="127.0.0.1">
            <label>Server Name:</label>
            <input type="text" disabled value="localhost.admin.daplie.me">
          </div>

          <div ng-if="vm.admin.remote">
            <button
              type="button"
              class="btn btn-default"
              ng-click="vm.remote.scan()">Scan Local Network</button>
            <br/>
            <label>Server Address:</label>
            <input type="text" placeholder="i.e. 192.168.1.100">
            <br/>
            <label>Server Name:</label>
            <input type="text" placeholder="i.e. admin.goldilocks.invalid">
            <br/>
            <label>Root Certificate Validation (optional):</label>
            <br/>
            <textarea class="textarea" placeholder="paste the contents of a root.pem here"></textarea>
          </div>

        </div>
      </div>

      <div class="col-sm-9">

        <div ng-if="!vm.config || 'authn' === vm.admin.page">
          <p>In order to administer this server you must authenticate.</p>

          <button
            type="button"
            class="btn btn-default"
            ng-disabled="vm.advanced && !vm.providerUri"
            ng-click="vm.authenticate()"
            >Login</button>
          <button
            type="button"
            class="btn btn-link"
            ng-if="!vm.advanced"
            ng-click="vm.setAdvanced()"
            >advanced</button>
          <div ng-if="vm.advanced">
            <button
              type="button"
              class="btn btn-link"
              ng-click="vm.setSimple();"
              >simple</button>
            <input
              type="text"
              ng-change="vm.checkProviderUri(vm.myProviderUri)"
              ng-model="vm.myProviderUri">
            <br/>
            <small>todo: allow per-device authorization</small>
          </div>

          <br/>
          <br/>

          <button
            class="btn btn-success"
            ng-if="vm.config"
            ng-click="vm.admin.page = 'network'"
            >Next: Network Settings</button>
        </div>

        <div ng-if="vm.config">
          <div ng-init="siteconf = vm.config.global">
            <div ng-if="'network' === vm.admin.page">
              <h1>Server Name:</h1>
              <input
                type="text"
                ng-model="vm.admin.servername"
                />
              <button
                type="button"
                class="btn btn-primary"
                ng-click="vm.admin.setDeviceName(vm.admin.servername)"
                ng-disabled="vm.config.device.hostname === vm.admin.servername"
                >Save</button>

              <h1>Addresses:</h1>
              <table class="table">
                <tr>
                  <th>Interface</th>
                  <th>Address</th>
                  <th>Family</th>
                  <th>Scope</th>
                </tr>
                <tr ng-repeat="addr in vm.config.addresses">
                  <td ng-bind="addr.iface"></td>
                  <td ng-bind="addr.address"></td>
                  <td ng-bind="addr.family"></td>
                  <td><span
                    ng-if="'unicast' !== addr.range" ng-bind="addr.range"></span
                    ><strong ng-if="'unicast' === addr.range">Internet</strong>
                    <button
                      ng-if="vm.admin.network.iface !== addr.iface"
                      class="btn btn-primary"
                      type="button"
                      ng-click="vm.admin.setInterface(addr)"
                      >Use <span ng-bind="addr.iface"></span></button></td>
                  </td>
                </tr>
                <tr>
                  <td>OAuth3 Tunnel</td>
                  <td>(automatically assigned)</td>
                  <td>IPv4 + IPv6</td>
                  <td><strong>Internet</strong>
                    <button
                      type="button"
                      class="btn btn-success"
                      ng-if="'oauth3-tunnel' !== vm.admin.network.iface"
                      ng-click="vm.enableTunnel()"
                      >Enable</button>
                    <div ng-if="'oauth3-tunnel' === vm.admin.network.iface">
                      <button
                        ng-if="!vm.admin.tunnel.advanced"
                        type="button"
                        class="btn btn-link"
                        ng-click="vm.admin.tunnel.advanced = true"
                        >Show Advanced Options</button>
                      <button
                        ng-if="vm.admin.tunnel.advanced"
                        type="button"
                        class="btn btn-link"
                        ng-click="vm.admin.tunnel.advanced = false"
                        >Hide Advanced Options</button>
                    </div>
                  </td>
                </tr>
              </table>

              <div ng-if="'oauth3-tunnel' === vm.admin.network.iface">
                <div ng-if="vm.admin.tunnel.advanced">
                  <h2>OAuth3 Tunnel Options</h2>
                  <label><input
                    type="checkbox"
                    ng-model="vm.admin.tunnel.optimistic"
                    ng-change="vm.setTunnel()"> Prefer local network when available</label>
                  <br/>
                  <label>URL</label> <input
                    class"form-input"
                    type="url"
                    value="https://oauth3.org/api/org.oauth3.tunnel"
                    disabled />
                  <br/>
                  <label>Token (Bearer or JWT)</label> <textarea
                    class"form-input"
                    disabled />aaaaaaaaaa.bbbbbbbbbbb.cccccccccccc</textarea>
                  <br/>
                  <label>Shared Secret (Text or JWK)</label> <input
                    class"form-input"
                    type="text"
                    value="xxxx-xxxx-xxx-xxxxx"
                    disabled />
                  <br/>
                  <label>Private Key (PEM or JWK)</label> <textarea
                    class"form-input"
                    disabled />    {
              kty: "EC",
              crv: "P-256",
              x: "zCQ5BPHPCLZYgdpo1n-x_90P2Ij52d53YVwTh3ZdiMo",
              y: "pDfQTUx0-OiZc5ZuKMcA7v2Q7ZPKsQwzB58bft0JTko",
              ext: true,
          }

      -----BEGIN EC PARAMETERS-----
      BggqhkjOPQMBBw==
      -----END EC PARAMETERS-----
      -----BEGIN EC PRIVATE KEY-----
      MHcCAQEEIDm2RM5oZ8NPkn06MZlpz7yk6X0gJ7TeJGBAA3lJmJ/UoAoGCCqGSM49
      AwEHoUQDQgAE2aCepzyydsM4oxfGMrtham2Do1U3AZSFNiuTLKMYqXTnp2LqNTVA
      FdfmISGJve/PV53+MnCzwRcnrwQb1OfRMQ==
      -----END EC PRIVATE KEY-----</textarea>
                  <br/>
                </div>
              </div>

            </div>



            <div ng-if="'domains' === vm.admin.page">
              <h1>Managed Domains:</h1>

              <div ng-if="!vm.domains.length">
                You don't have any domains with this account.
                <br/>
                Try a different account?
                <br/>
                <input type="url" placeholder="https://daplie.domains">
                <button type="button"
                  class="btn"
                  disabled
                  >Login</button>
              </div>

              <div ng-if="vm.domains.length">

                <table class="table">
                  <tr>
                    <td><select
                      ng-if="vm.domains.length"
                      ng-model="vm.domains.add.domain"
                      ng-options="domain.domain as domain.domain for domain in vm.domains"
                      ><option
                        style="display:none" value="">-- select domain --</option
                        ></select></td>
                    <td><input
                      type="text"
                      placeholder="@"
                      ng-model="vm.domains.add.sub"
                      >.<input
                      type="text"
                      placeholder="example.com"
                      ng-model="vm.domains.add.domain"
                      ></td>
                    <td><button
                      type="button"
                      class="btn btn-success"
                      ng-click="vm.domains.add.commit(vm.domain.add.sub, vm.delta.domain)"
                      >Add</button></td>
                  </tr>
                </table>
                <table class="table">
                  <tr>
                    <th>Domain</th>
                    <th>Sub</th>
                    <th>Devices</th>
                  </tr>
                  <tr ng-repeat="d in vm.dns">
                    <td ng-bind="d.domain"></td>
                    <td ng-bind="d.name"></td>
                    <td>
                      <span ng-if="!d.domain">
                        <div ng-repeat="dev in d.devices">
                          <span ng-bind="dev"
                            ></span> <button
                            type="button"
                            class="btn btn-danger"
                            ng-click="vm.removeDevice(d, dev)"
                            >x</button>
                        </div>
                      </span>
                    </td>
                  </tr>
                </table>
              </div>
            </div>

            <div ng-if="'plugins' === vm.admin.page">
              <h1>Global Settings:</h1>
              <br/>
              <form class="form-inline">
              <div ng-repeat="path in siteconf.paths">
                <h2 ng-bind="path.$id"></h2>
                <div ng-repeat="module in path.modules">
                  <h3>{{module.$id}}</h3>
                  <div ng-repeat="(key, value) in module">
                    <label>{{key}}</label>: <input class="form-control" ng-model="module[key]" />
                  </div>
                </div>
                <br/>
                <br/>
                <br/>
              </div>
              </form>

              <h1>Per-Domain Settings:</h1>
              <div ng-repeat="siteconf in vm.config.sites">
                <h2 ng-bind="siteconf.$id"></h2>
                <div ng-repeat="path in siteconf.paths">
                  <h2 ng-bind="path.$id"></h2>
                  <div ng-repeat="module in path.modules">
                    <h3>{{module.$id}}</h3>
                    <div ng-repeat="(key, value) in module">
                      <label>{{key}}</label>: <input class="form-control" ng-model="module[key]" />
                    </div>
                  </div>
                  <br/>
                  <br/>
                  <br/>
                </div>
              </div>

              <div ng-init="defaultsconf = vm.config.defaults">
                <h1>Fallback Settings:</h1>
                <br/>
                <div ng-repeat="path in siteconf.paths">
                  <h2 ng-bind="path.$id"></h2>
                  <div ng-repeat="module in path.modules">
                    <h3>{{module.$id}}</h3>
                    <div ng-repeat="(key, value) in module">
                      <label>{{key}}</label>: <input class="form-control" ng-model="module[key]" />
                    </div>
                  </div>
                  <br/>
                  <br/>
                  <br/>
                </div>
              </div>

              <div ng-if="!vm._showvmconfig">
                <button class="btn-link" ng-click="vm._showvmconfig = true">show config as json</button>
              </div>
              <div ng-if="vm._showvmconfig">
                <button class="btn-link" ng-click="vm._showvmconfig = false">hide config</button>
                <pre><code ng-bind="vm.config | json">{{vm.config}}</code></pre>
              </div>
            </div>
          </div>
        </div>
      </div>
      </div>

    </div>

    <script src="/assets/com.jquery/jquery-3.1.1.js"></script>
    <script src="/assets/com.google/angular.1.6.2.min.js"></script>
    <script src="/assets/org.oauth3/oauth3.core.js"></script>
    <script src="/assets/org.oauth3/oauth3.ng.js"></script>
    <script src="/assets/org.oauth3/oauth3.domains.js"></script>
    <script src="/assets/org.oauth3/oauth3.dns.js"></script>
    <script src="/js/app.js"></script>

  </body>
</html>