<div id="preferences">
  <section>
    <div class="container">
      <form class="form-inline">
        <div class="form-group">
          <label class="col-xs-4">General Settings:</label>
          <div class="col-xs-8">
            <div class="checkbox-inline">
              <label>
                <input type="checkbox"> Start Cypress at login
              </label>
            </div>
          </div>
        </div>
      </form>
    </div>
  </section>
  <section>
    <div class="container">
      <form class="form-inline">
        <div class="form-group <%= if @error then 'has-error' else '' %>">
          <label class="col-xs-4 control-label">Your API Key:</label>
          <div class="col-xs-8" id="api-key-container">
            <input id="api-key" class="form-control col-xs-10 input-sm" type="text" value="<%= @token ? 'Loading...' %>" readonly>
            <button id="generate-api-key" type="button" class="btn btn-default btn-sm">
              <i class="fa fa-refresh"></i>
            </button>
            <% if @error: %>
              <p class="help-block">
                <small>An error occured receiving token.</small>
              </p>
            <% end %>
          </div>
        </div>
      </form>
    </div>
  </section>
</div>