{{> header }}

<h1>New employee</h1>

<div class="row">
  <div class="col-md-6 lead">Adding new employee account</div>
  <div class="col-md-6">
    <a class="btn btn-default pull-right" href="/users/import/" id="import_users_btn">Import new employees <i class="fa fa-chevron-right"></i></a>
  </div>
</div>

{{> show_flash_messages }}

<div class="row">
  <div class="col-md-6">
    <ol class="breadcrumb">
      <li><a href="/users/">All Employees</a></li>
      <li class="active">Add new employee</li>
    </ol>
  </div>
</div>

<div class="row main-row_header">
  <p class="col-md-12">Details of new employee</p>
</div>

<div class="row">
  <div class="col-md-12">

    <form class="form-horizontal" method="POST" action="/users/add/" id="add_new_user_form">

      <div class="form-group">
        <label for="name_inp" class="col-md-3 control-label">First Name</label>
        <div class="col-md-3">
          <input class="form-control" id="name_inp" name="name" required value="{{employee.name}}">
        </div>
      </div>

      <div class="form-group">
        <label for="lastname_inp" class="col-md-3 control-label">Last Name</label>
        <div class="col-md-3">
          <input class="form-control" id="lastname_inp" name="lastname" required value="{{employee.lastname}}">
        </div>
      </div>

      <div class="form-group">
        <label for="email_inp" class="col-md-3 control-label">Email Address</label>
        <div class="col-md-3">
          <input class="form-control" id="email_inp" type="email" name="email_address" required value="{{employee.email}}" aria-describedby="email_help">
        </div>
        <span id="email_help" class="help-block col-md-6">Email address used by employee</span>
      </div>

      <div class="form-group">
        <label for="select_inp" class="col-md-3 control-label">Department</label>
        <div class="col-md-3">
          <select class="form-control" id="select_inp" name="department" aria-describedby="department_help">
            {{#each departments}}
                <option value="{{this.id}}" data-vpp="{{@index}}">{{this.name}}</option>
            {{/each}}
          </select>
        </div>
        <span id="department_help" class="help-block col-md-6">Department employee belongs to</span>
      </div>

      <div class="form-group">
        <div class="col-md-3 col-md-offset-3">
          <label for="admin_inp" class="_col-md-2 control-label">
            <input class="" id="admin_inp" name="admin" type="checkbox" />
            Is administrator user
          </label>
        </div>
      </div>

      <div class="form-group">
        <div class="col-md-3 col-md-offset-3">
          <label for="auto_approve_inp" class="control-label">
            <input class="" id="auto_approve_inp" name="auto_approve" type="checkbox">
            Auto approve leave requests
          </label>
        </div>
          <span class="help-block">Set the flag ON to streamline leave requests from this employee directly into <strong>Approved</strong> state.</span>
      </div>

      <div class="form-group">
        <label for="start_date_inp" class="col-md-3 control-label">Started on</label>
        <div class="col-md-3 date">
          <input class="form-control" id="start_date_inp" type="text" name="start_date" required data-date-autoclose="1" data-provide="datepicker" data-date-format="{{#with logged_user.company }}{{this.get_default_date_format_for_date_picker}}{{/with}}" data-date-week-start="1" value="{{as_date booking_start}}" aria-describedby="start_date_help">
        </div>
        <span id="start_date_help" class="help-block col-md-6">Date when employee started (inclusive)</span>
      </div>

      <div class="form-group">
        <label for="end_date_inp" class="col-md-3 control-label">Ended on</label>
        <div class="col-md-3 date">
          <input class="form-control" id="end_date_inp" type="text" name="end_date" data-date-autoclose="1" data-provide="datepicker" data-date-format="{{#with logged_user.company }}{{this.get_default_date_format_for_date_picker}}{{/with}}" data-date-week-start="1" value="{{as_date employee.end_date}}" aria-describedby="end_date_help">
        </div>
        <span id="end_date_help" class="help-block col-md-6"><div>Date when employee quits the {{ company.name }}.</div><div>After this date the user is no longer able to access the application.</div><div>This is a way of deactivating user accounts.</div></span>
      </div>

      <div class="form-group">
        <label for="password_inp" class="col-md-3 control-label">Password</label>
        <div class="col-md-3 date">
          <input class="form-control" id="password_inp" type="password" name="password_one" required value="" {{#if company.ldap_auth_enabled}} readonly {{/if}} aria-describedby="password_inp_help">
        </div>
        <span id="password_inp_help" class="help-block col-md-6">
          {{# if company.ldap_auth_enabled }}
            <a href="/settings/company/authentication/">LDAP authentication</a> is enabled, so that password does not matter.
          {{else}}
            Define employee's password.
          {{/ if}}
        </span>
      </div>

      <div class="form-group">
        <label for="password_inp" class="col-md-3 control-label">Confirm password</label>
        <div class="col-md-3">
          <input class="form-control" id="confirm_password_inp" type="password" name="password_confirm" required value="" {{# if company.ldap_auth_enabled}}readonly{{/if}}>
        </div>
      </div>

      <div class="form-group">
        <div class="col-md-offset-3 col-md-3">
          <button type="submit" id="add_new_user_btn" class="btn btn-success pull-right single-click">Add new employee</button>
        </div>
      </div>
    </form>

  </div>
</div>

{{> footer }}