<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>New Connection</h1>
      <% f = formFor($connection, $connectionErrors)
        .id('connection')
        .klass('form text-left')
        .action('submit')
        .method('post') 
      %>
      <%- f.start() %>
        <div class="form-group row">
          <label for="staticEmail" class="col-sm-2 col-form-label">Type</label>
          <div class="col-sm-10">
            <div class="form-check form-check-inline">
              <input class="form-check-input" required name="new[connection][category]" type="radio"  value="MY_SQL">
              <label class="form-check-label" for="inlineCheckbox1">MySql</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" required name="new[connection][category]" type="radio" value="POSTGRE_SQL">
              <label class="form-check-label" for="inlineCheckbox2">PostgresSQL</label>
            </div>
          </div>
        </div>
        <div class="form-group row">
          <label for="staticEmail" class="col-sm-2 col-form-label">UserName</label>
          <div class="col-sm-10">
            <div class="controls">
              <%- f.text('user').klass('form-control input-large').val($connection.username).required() %>
            </div>
            <% if (!!$connectionErrors.username) { %>
              <div class="alert alert-danger mt-2">
                <%- $connectionErrors.username %>
              </div>
            <% } %>
          </div>
        </div>
        <div class="form-group row">
          <label for="staticEmail" class="col-sm-2 col-form-label">Password</label>
          <div class="col-sm-10">
            <div class="controls">
              <%- f.password('password').klass('form-control input-large').val($connection.password).required() %>
            </div>
            <% if (!!$connectionErrors.password) { %>
              <div class="alert alert-danger mt-2">
                <%- $connectionErrors.password %>
              </div>
            <% } %>
          </div>
        </div>
        <div class="form-group row">
          <label for="staticEmail" class="col-sm-2 col-form-label">Host</label>
          <div class="col-sm-10">
            <div class="controls">
              <%- f.text('host').klass('form-control input-large').val($connection.host).required() %>
            </div>
            <% if (!!$connectionErrors.host) { %>
              <div class="alert alert-danger mt-2">
                <%- $connectionErrors.host %>
              </div>
            <% } %>
          </div>
        </div>
        <div class="form-group row">
          <label for="staticEmail" class="col-sm-2 col-form-label">Port</label>
          <div class="col-sm-10">
            <div class="controls">
              <%- f.text('port').klass('form-control input-large').val($connection.port).required() %>
            </div>
            <% if (!!$connectionErrors.port) { %>
              <div class="alert alert-danger mt-2">
                <%- $connectionErrors.port %>
              </div>
            <% } %>
          </div>
        </div>
        
        <div class="row text-center" style="padding-top: 10px">
          <div class="col-md-3">
            
          </div>
          <div class="col-md-9">
            <%- f.submit('Submit').klass('btn btn-success btn-lg') %>
          </div>
          <div class="col-md-3"></div>
        </div>
      <%- f.end() %>
            
    </div>

    

    
  </body>
  