<!doctype html>
<html lang="en">
<head>
  <title>DN42 Registry Explorer</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="icon" type="image/png" href="favicon.png"/>
  <link rel="stylesheet" href="bootstrap.min.css"/>
  <link rel="stylesheet" href="material-icons.css"/>
<!-- Style overrides -->  
  <style>
.material-icons { display:inline-flex;vertical-align:middle }
body { box-shadow: inset 0 2em 10em rgba(0,0,0,0.4); min-height: 100vh }
  </style>
</head>

<body>
<div id="explorer_app">

<nav class="navbar navbar-fixed-top navbar-expand-md navbar-dark bg-dark">
  <search-input></search-input>
  <div class="collapse navbar-collapse w-100 ml-auto text-nowrap">
    <div class="ml-auto"><a class="navbar-brand"
     href="/free">Free&nbsp;Explorer</a>&nbsp;<router-link class="navbar-brand"
     to="/">Registry&nbsp;Explorer</router-link>&nbsp;<a class="pull-right navbar-brand"
     href="https://dn42.dev/"><img src="/dn42_logo.png" width="173" height="60"/></a>
    </div>
  </div>
</nav>

<router-view></router-view>

</div>
<footer class="page-footer font-small">
<div style="margin-top: 20px; padding: 5px">
  <a href="https://git.burble.com/burble.dn42/dn42regsrv">Source Code</a>.
  Powered by
  <a href="https://getbootstrap.com/">Bootstrap</a>,
  <a href="https://vuejs.org">Vue.js</a>,
  <a href="https://github.com/axios/axios">axios</a>,
  <a href="http://alexcorvi.github.io/anchorme.js/">Anchorme</a>.
</div>
</footer>

<script type="text/x-template" id="search-input-template">
<form class="form-inline" id="SearchForm">
  <input v-bind:value="search"
         v-on:input="debounceSearch($event.target.value)"
         class="form-control-lg" size="30" type="search"
         placeholder="Search the registry" aria-label="Search"/>
</form>
</script>

<script type="text/x-template" id="app-root-template">
<div class="p-3">
<div class="jumbotron">
  <h1>DN42 Registry Explorer</h1>
  <p class="lead">Just start typing in the search box to start searching the registry</p>
  <hr/>
  <p>
  <p>Search Tips</p>
  <ul>
    <li>Searches are case independent
    <li>No need to hit enter, searches will start immediately
    <li>Prefixing the search by a registry type followed by / will narrow the search to
      just that type (e.g. <router-link class="text-success"
     to="domain/.dn42">domain/.dn42</router-link>)</li>
    <li>Searching for <b>type/</b> will return all the objects for that type (e.g.
      <router-link class="text-success" to="schema/">schema/</router-link>)</li>
    <li>A blank search box will return you to these instructions</li>
    <li>Just copy the URL to link to search results</li>    
    <li>Searches are made on object names; searching the content of objects
      is not supported (yet!).</li>
  </ul>
  <hr/>
  <p>
    The registry explorer is a simple web app using
    <a href="https://git.burble.com/burble.dn42/dn42regsrv">dn42regsrv</a>;
    a REST API for the DN42 registry built with <a href="https://golang.org/">Go</a>
    <br/>
    The DN42 registry contains personal data which is also available through this site.
    Please refer to the DN42 registry privacy policy, or contact dn42@burble.com for any
    queries.
  </p>
</div>
<registry-stats></registry-stats>
</div>
</script>

<script type="text/x-template" id="registry-stats-template">
<div class="container d-flex flex-column w-75">
<h5>Registry Stats</h5>
<section v-if="state == 'error'">
  <div class="alert alert-warning clearfix" role="alert">
    An error recurred whilst retrieving data from the API
    <button type="button" class="float-right btn btn-primary"
      v-on:click="reload"><span class="material-icons">refresh</span>
      Refresh</button>
  </div>
</section>
<section v-else-if="state == 'loading'">
  <div class="alert alert-info" role="alert">Loading data ...</div>
</section>
<section v-else>
  <p class="p-3 text-center">
    <span v-for="(value, key) in store.RegStats"
          class="mx-2 text-nowrap d-inline-block"> 
      <router-link v-bind:to="'/'+key+'/'">{{ key }}</router-link>
      : <b>{{ value }}</b>
    </span>
  </p>
</section>
</div>
</script>

<script type="text/x-template" id="app-search-template">
<div class="p-3">

<section v-if="state == 'loading'">
  <div class="alert alert-info" role="alert">Loading data ...</div>
</section>

<section v-else-if="state == 'error'">
  <div class="alert alert-warning clearfix" role="alert">
    An error recurred whilst retrieving search results
  </div>
</section>

<section v-else-if="state == 'noresults'">
  <h2>Searching for "{{ search }}" ...</h2>
  <div class="alert alert-dark" role="alert">
    Sorry, no results found
  </div>
</section>

<section v-else-if="state == 'resultlist'">
  <h2>Listing results for "{{ search }}" ...</h2>
  <div class="container d-flex flex-row flex-wrap">
    <div class="text-center">
      <span v-for="ref in result">
        <reg-object class="mx-4 my-2" v-bind:link="ref[0]+'/'+ref[1]"></reg-object>
      </span>
    </div>
  </div>
</section>

<section v-else-if="state == 'result'">
  <div v-for="(val, key) in result">
    <h2 class="mb-4"><reg-object v-bind:link="key"></reg-object></h2>
    <div class="pl-4">
      <table class="table">
        <thead>
          <tr><th scope="col">Key</th><th scope="col">Value</th></tr>
        </thead>
        <tbody>
          <tr v-for="a in val.Attributes">
            <th scope="row" class="border-0 py-1 pr-3 text-primary text-nowrap">
              {{ a[0] }}
            </th>
            <td class="border-0 p-1">
              <reg-attribute v-bind:content="a[1]"></reg-attribute>
            </td>
          </tr>
        </tbody>
      </table>
      </div>
    <section v-if="val.Backlinks.length != 0">
      <p>Referenced by</p>
      <div class="pl-4">
        <table class="table">
          <tbody>
            <tr v-for="rlink in val.Backlinks">
              <td class="border-0 p-1">
                <reg-object v-bind:link="rlink"></reg-object>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>
  </div>
</section>

<section v-else>
  <div class="alert alert-warning" role="alert">
    Something went wrong, an invalid search state was encountered ({{ state }})
    <p>{{ $route.params.pathMatch }}</p>
  </div>
</section>

</div>
</script>

<script type="text/x-template" id="reg-object-template">
  <span class="text-nowrap d-inline-block">
    <router-link class="text-success mr-2" v-bind:to="'/'+link">
      {{ ( content ? content : obj ) }}
    </router-link>
    <span class="badge back-pill badge-dark test-muted">{{ rtype }}</span>
  </span>
</script>

<script type="text/x-template" id="reg-attribute-template">
  <span style="word-break: break-all; white-space: pre-wrap">
    <reg-object v-if="isRegObject()" v-bind:link="objectLink"></reg-object>
    <span v-else class="text-monospace" v-html="decorated"></span>
</span>
</script>

<script src="jquery.slim.min.js"></script>
<script src="bootstrap.bundle.min.js"></script>
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>
<script src="axios.min.js"></script>
<script src="anchorme.min.js"></script>
<script src="anchorme.min.js"></script>
<script src="explorer.js"></script>
</body>
</html>