<navbar></navbar>

<div class="container main-container">
  <div class="row bg-grey">
    <div class="col-sm-12">
      <h1>{{ 'SIGNUP' | translate }}</h1>
    </div>
    <form class="form" name="form" ng-submit="register(form)" novalidate>
      <div class="col-sm-6">

        <br>
        <div class="form-group" ng-class="{ 'has-success': form.firstname.$valid && submitted,'has-error': form.firstname.$invalid && submitted }">
          <label>{{ 'NOME' | translate }}</label>

          <input type="text" name="firstname" class="form-control" ng-model="user.firstName" required/>
          <p class="help-block" ng-show="form.firstname.$error.required && submitted">
            {{ 'NOME_REQUIRED' | translate }}
          </p>
        </div>

        <div class="form-group" ng-class="{ 'has-success': form.lastname.$valid && submitted, 'has-error': form.lastname.$invalid && submitted }">
          <label>{{ 'COGNOME' | translate }}</label>

          <input type="text" name="lastname" class="form-control" ng-model="user.lastName" required/>
          <p class="help-block" ng-show="form.lastname.$error.required && submitted">
            {{ 'COGNOME_REQUIRED' | translate }}
          </p>
        </div>

        <div class="form-group" ng-class="{ 'has-success': form.birthDate.$valid && submitted, 'has-error': form.birthDate.$invalid && submitted }">
          <label>{{ 'DATA_NASCITA' | translate }}</label>

          <div class="input-group">
            <div class="input-group datepicker-group">
              <input type="text" class="form-control" style="background: #FFF;"
              name="birthDate"
              ng-model="user.birthDate"
              datepicker-popup="dd-MM-yyyy"
              is-open="datepickers.birthDate"
              datepicker-options="dateOptions"
              ng-readonly="true"
              ng-required="true"
              ng-click="open($event,'birthDate')">
              <span class="input-group-btn">
                <button class="btn btn-default" ng-click="open($event,'birthDate')"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
            </div>
          </div>
          <p class="help-block" ng-show="form.birthDate.$error.required && submitted">
            {{ 'DATA_NASCITA_REQUIRED' | translate }}
          </p>
        </div>

        
      </div>

      <div class="col-sm-6">

        <br>

        <div class="form-group" ng-class="{ 'has-success': form.email.$valid && submitted, 'has-error': form.email.$invalid && submitted }">
          <label>{{ 'EMAIL' | translate }}</label>

          <input type="email" name="email" class="form-control" ng-model="user.email"
          required
          mongoose-error/>
          <p class="help-block" ng-show="form.email.$error.email && submitted">
            {{ 'EMAIL_VALID' | translate }}
          </p>
          <p class="help-block" ng-show="form.email.$error.required && submitted">
            {{ 'EMAIL_REQUIRED' | translate }}
          </p>
          <p class="help-block" ng-show="form.email.$error.mongoose">
            {{ errors.email }}
          </p>
        </div>

        <div class="form-group" ng-class="{ 'has-success': form.password.$valid && submitted, 'has-error': form.password.$invalid && submitted }">
          <label>{{ 'PASSWORD' | translate }}</label>

          <input type="password" name="password" class="form-control" ng-model="user.password" ng-minlength="3" required mongoose-error/>
          <p class="help-block" ng-show="(form.password.$error.minlength || form.password.$error.required) && submitted">
            Password must be at least 3 characters.
          </p>
          <p class="help-block" ng-show="form.password.$error.mongoose">
            {{ errors.password }}
          </p>
        </div>

        <div class="form-group" ng-class="{ 'has-success': form.password === form.passwordConf && submitted, 'has-error': form.password !== form.passwordConf }">
          <label>{{ 'CONFERMA_PASSWORD' | translate }}</label>

          <input type="password" name="passwordConf" class="form-control" ng-model="user.passwordConf" ng-minlength="3" required/>
          <p class="help-block" ng-show="(user.password !== user.passwordConf || form.passwordConf.$error.minlength || form.passwordConf.$error.required) && submitted">
            {{ 'PASSWORD_MATCH' | translate }}
          </p>
        </div>

        <div>
          <button class="btn btn-default btn-lg btn-register" type="submit">
            {{ 'SIGNUP' | translate }}
          </button>
          <a class="btn btn-inverse btn-lg btn-login" ui-sref="login">
            {{ 'LOGIN' | translate }}
          </a>
          <a class="btn btn-lg btn-facebook pull-right" href="" ng-click="loginOauth('facebook')">
            <i class="fa fa-facebook"></i> {{ 'ACCEDI_FACEBOOK' | translate }}
          </a>
        </div>
        <br>
      </div>
    </form>
  </div>
  <hr>
</div>