<style type="text/css">
  html {
    font-size: 14px;
  }
  @media (min-width: 768px) {
    html {
      font-size: 16px;
    }
  }

  .container {
    max-width: 960px;
  }

  .pricing-header {
    max-width: 700px;
  }

  .card-deck .card {
    min-width: 220px;
  }

  .border-top { border-top: 1px solid #e5e5e5; }
  .border-bottom { border-bottom: 1px solid #e5e5e5; }

  .box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
</style>
    <body>

    <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
      <h5 class="my-0 mr-md-auto font-weight-normal">ChartPoet Relay</h5>
      <nav class="my-2 my-md-0 mr-md-3">
      </nav>
      <a class="btn btn-outline-primary" href="#">Connections</a>
    </div>

    <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto">
      <h1 class="display-5">Connections</h1>
      <% if ($connections.length === 0) { %>
        <div class="alert alert-warning p-3">
          <h3>Please configure a database connection</h3>
          <a href="/connection/new" class="btn btn-success">New Connection</a>
        </div>
      <% } else  {%>
        <table class="table">
          <thead>
            <tr>
              <th>Type</th>
              <th>Connection Key</th>
              <th>Details</th>
              <th>Edit</th>
              <th>Delete</th>
            </tr>
          </thead>
          <tbody>
            <% for(var connection of $connections) {%>
            <tr>
              <td><%=connection.category%></td>
              <td><%=connection.uniqueId%></td>
              <td>
                <b>UserName</b>
                <p><%=connection.user%></p>
                <b>Host</b>
                <p><%=connection.host%></p>
                <b>Port</b>
                <p><%=connection.port%></p>
              </td>
              <td>
                <a href="">Edit</a>
              </td>
              <td>
                <a href="">Delete</a>
              </td>
            </tr> 
            <% } %>
          </tbody>
        </table>
      <% } %>
    </div>

    
  </body>
  