
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>{% block title %}{% endblock %}</title>

    <!-- Bootstrap core CSS -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="/static/css/dashboard.css" rel="stylesheet">
    
    <!-- Vue -->
    <script src="/static/js/vue.min.js"></script>
    <script src="/static/js/vue-router.js"></script>
    <script src="/static/js/vue-resource.min.js"></script>
  </head>

  <body>
    <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
      <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a>
      <ul class="navbar-nav px-3">
        <li class="nav-item text-nowrap">
          <a class="nav-link" href="#"></a>
        </li>
      </ul>
    </nav>

    <div class="container-fluid" id="app">
      <div class="row">
        <nav class="col-md-2 d-none d-md-block bg-light sidebar">
          <div class="sidebar-sticky">
            <ul class="nav flex-column">
              <li class="nav-item">
                <router-link to="/status" class="nav-link {% if status %}active{% endif %}">
                  <span data-feather="home"></span>
                  Status {% if status != None %}<span class="sr-only">(current)</span>{% endif %}
                </router-link>
              </li>
              <li class="nav-item">
                <router-link class="nav-link {% if settings %}active{% endif %}" to="/settings">
                  <span data-feather="settings"></span>
                  Settings
                </router-link>
              </li>
              <li class="nav-item">
                <router-link class="nav-link {% if logs %}active{% endif %}" to="/logs">
                  <span data-feather="file-text"></span>
                  Logs
                </router-link>
              </li>
            </ul>

            <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
              <span>Applications</span>
              <a class="d-flex align-items-center text-muted" href="/endpoint/add">
                <span data-feather="plus-circle"></span>
              </a>
            </h6>
            <ul class="nav flex-column mb-2">
              {% for e in data.endpoints %}
              <li class="nav-item">
                <a class="nav-link {% if endpoint and endpoint.id == e.id %}active{% endif %}" href="/endpoint/{{ e.id }}">
                  <span data-feather="monitor"></span>
                  {{ e['endpointName'] }}
                </a>
              </li>
              {% endfor %}
            </ul>
          </div>
        </nav>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
          <router-view></router-view>
        </main>
      </div>
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>

    <!-- Icons -->
    <script src="/static/feather/feather.min.js"></script>
    
    <!-- Pages for Vue Router -->
    <script src='/static/pages/status.js'></script>
    <script src='/static/pages/logs.js'></script>

    <script>
      feather.replace()

      const routes = [
        { path: '/status', component: Status },
        { path: '/settings', component: Status },
        { path: '/logs', component: Logs }
      ]

      const router = new VueRouter({
        routes
      })

      const app = new Vue({
        router
      }).$mount('#app')
    </script>
  </body>
</html>
