<template>
  <div class="container content-alignment">
    <h3>Add New User</h3>
    <hr>
    <div class="col-md-5 col-xs-12">
      <form role="form" submit.delegate="signup()">
        <div class="form-group">
          <label for="con_pwd">User Type:</label>
          <select class="form-control" value.bind="user_type">
            <option value="">Select Type</option>
            <option value="producer">Producer</option>
            <option value="writer">Writer</option>
          </select>
        </div>
        <div class="form-group" if.bind="user_type === 'writer'">
          <label for="userame">Username:</label>
          <input type="text" class="form-control" id="userame" value.bind="userame" placeholder="Userame">
        </div>
        <div class="form-group">
          <label for="email">Email address:</label>
          <input type="email" class="form-control" id="email" value.bind="email" placeholder="Email">
        </div>
        <div class="form-group">
          <label for="pwd">Password:</label>
          <input type="password" class="form-control" id="pwd" value.bind="password" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="con_pwd">Confirm Password:</label>
          <input type="password" class="form-control" id="con_pwd" value.bind="confirm_password"
                 placeholder="Confirm Password">
        </div>
        <button type="submit" class="btn btn-default">Add User</button>
      </form>
    </div>
  </div>
</template>