officer

<div class="wizard">
    <div class="card-header" data-background-color="purple">
        Create/Add new officer
    </div>
    <div class="card-content">
        <div class="col-md-9">
            <div class="row">
                <div class="col-md-3 col-sm-4 col-xs-8">
                    <div class="wizard-side-nav">
                        <ul class="nav nav-pills nav-pills-info nav-stacked">
                            <li class="active">
                                <a href="#tab1" data-toggle="tab" aria-expanded="true">Personal details</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-9 col-sm-8 col-xs-8">
                    <div class="wizard-form-table">
                        <div class="card">
                            <form #personForm="ngForm" (ngSubmit)="createOrUpdate()">
                                <div class="card-header actions-card-header text-center" data-background-color="red">
                                    <h4 class="title">Enter officer details</h4>
                                </div>
                                <div class="card-content">
                                    <span>*&nbsp;Required field</span>
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="form-group label-static" ngClass="{has-errors: salutation.errors }">
                                                    <label class="control-label">Salutation *</label>
                                                    <select class="form-control"
                                                            name="salutation" required
                                                            [(ngModel)]="person.salutation" #salutation="ngModel">
                                                        <option value="" selected>Select title</option>
                                                        <option value="Mr">Mr</option>
                                                        <option value="Ms">Ms</option>
                                                        <option value="Rev">Rev</option>
                                                    </select>
                                                    <div *ngIf="salutation.errors && (salutation.dirty || salutation.touched)">
                                                        <label  [hidden]="!salutation.errors.required" class="label error-message">Salutation is required</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group label-static">
                                                    <label for="surname" class="control-label" ngClass="{has-errors: surname.errors }">Surname *</label>
                                                    <input id="surname" type="text" class="form-control"
                                                           placeholder="Officer's surname"
                                                           name="surname" required
                                                           [(ngModel)]="person.surname" #surname="ngModel">
                                                    <div *ngIf="surname.errors && (surname.dirty || surname.touched)">
                                                        <label  [hidden]="!surname.errors.required" class="label error-message">Surname is required</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group label-static" ngClass="{has-errors: other_names.errors }">
                                                    <label for="other_names" class="control-label">Other names</label>
                                                    <input id="other_names" type="text" class="form-control"
                                                           name="other_names" required
                                                           [(ngModel)]="person.other_names" #other_names="ngModel">
                                                    <div *ngIf="other_names.errors && (other_names.dirty || other_names.touched)">
                                                        <label  [hidden]="!other_names.errors.required" class="label error-message">Other names are required</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group label-static" ngClass="{has-errors: email_address.errors }">
                                                    <label for="email_address" class="control-label">Email address *</label>
                                                    <input id="email_address" type="email" class="form-control"
                                                           name="email_address" required
                                                           [(ngModel)]="person.email_address" #email_address="ngModel">
                                                    <div *ngIf="email_address.errors && (email_address.dirty || email_address.touched)">
                                                        <label  [hidden]="!email_address.errors.required" class="label error-message">Email address is a required</label>
                                                        <label  [hidden]="!email_address.errors.email" class="label error-message">Invalid email address</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group label-static" ngClass="{has-errors: phone_number.errors }">
                                                    <label for="phone_number" class="control-label">Phone number *</label>
                                                    <input id="phone_number" type="text" class="form-control"
                                                           name="phone_number" required
                                                          [(ngModel)]="person.phone_number"  #phone_number="ngModel">
                                                    <div *ngIf="phone_number.errors && (phone_number.dirty || phone_number.touched)">
                                                        <label  [hidden]="!phone_number.errors.required" class="label error-message">Phone number is a required</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group label-static" ngClass="{has-errors: id_number.errors }">
                                                    <label for="id_number" class="control-label">ID Number *</label>
                                                    <input id="id_number" type="text" class="form-control"
                                                           name="id_number" required
                                                           [(ngModel)]="person.id_number" #id_number="ngModel">
                                                    <div *ngIf="id_number.errors && (id_number.dirty || id_number.touched)">
                                                        <label class="error-message">ID number is a required field</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group label-static" ngClass="{has-errors: kra_pin.errors }">
                                                    <label for="kra_pin" class="control-label">KRA PIN Number *</label>
                                                    <input id="kra_pin" type="text" class="form-control"
                                                           name="kra_pin" required
                                                           [(ngModel)]="person.kra_pin" #kra_pin="ngModel">
                                                    <div *ngIf="kra_pin.errors && (kra_pin.dirty || kra_pin.touched)">
                                                        <label class="error-message">KRA Pin number is a required field</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group label-static" ngClass="{has-errors: date_of_birth.errors }">
                                                    <label>Date of birth *</label>
                                                    <input type="text" class="datepicker form-control"
                                                           name="date_of_birth" required
                                                           [ngModel]="person.date_of_birth | date :'MM/dd/yyyy'"
                                                           (ngModelChange)="person.date_of_birth=$event"
                                                           #date_of_birth="ngModel">
                                                    <span class="material-input"></span>
                                                    <div *ngIf="date_of_birth.errors && (date_of_birth.dirty || date_of_birth.touched)">
                                                        <label class="error-message">Date of birth is a required field</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group label-static">
                                                    <label>Appointment / Allotment date </label>
                                                    <input type="text" class="datepicker form-control"
                                                           name="appointment_allotment_date"
                                                           [ngModel]="person.appointment_allotment_date | date :'MM/dd/yyyy'"
                                                           (ngModelChange)="person.appointment_allotment_date=$event">
                                                    <span class="material-input"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group label-static" ngClass="{has-errors: occupation.errors }">
                                                    <label for="occupation" class="control-label">Occupation *</label>
                                                    <input id="occupation" type="text" class="form-control"
                                                           name="occupation" required
                                                           [(ngModel)]="person.occupation" #occupation="ngModel">
                                                    <div *ngIf="occupation.errors && (occupation.dirty || occupation.touched)">
                                                        <label class="error-message">Occupation is a required field</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group label-static">
                                                    <label for="residential_address" class="control-label">Residential address *</label>
                                                    <input id="residential_address" type="text" class="form-control" name="residential_address" [(ngModel)]="person.residential_address">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group label-static" ngClass="{has-errors: postal_code.errors }">
                                                    <label for="postal_code" class="control-label">Postal code *</label>
                                                    <input id="postal_code" type="text" class="form-control"
                                                           name="postal_code" required
                                                           #postal_code="ngModel" [(ngModel)]="person.postal_code">
                                                    <div *ngIf="postal_code.errors && (postal_code.dirty || postal_code.touched)">
                                                        <label class="error-message">Postal code is a required field</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group label-static" ngClass="{has-errors: box.errors }">
                                                    <label for="box" class="control-label">Post office box *</label>
                                                    <input id="box" type="text" class="form-control"
                                                           name="box" required
                                                           #box="ngModel" [(ngModel)]="person.box">
                                                    <div *ngIf="box.errors && (box.dirty || box.touched)">
                                                        <label class="error-message">Post office box is a required field</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group label-static">
                                                    <label for="former_name" class="control-label">Former name</label>
                                                    <input id="former_name" type="text" class="form-control" name="former_name" [(ngModel)]="person.former_name" >
                                                </div>
                                            </div>
                                        </div>
                                </div>
                                <div class="card-footer">
                                    <button type="submit" class="btn btn-primary btn-save" [disabled]="!personForm.valid">
                                        Save
                                        &nbsp;<i class="material-icons">save</i>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-header actions-card-header" data-background-color="red">
                    <h4 class="title text-center">Actions</h4>
                </div>
                <div class="card-content table-responsive table-full-width">
                    <table class="table cp-action-table">
                        <tbody>
                        <tr>
                            <td>
                                <a routerLink="/dashboard/officers" class="btn btn-primary cp-action-btn text-center">
                                    Return to officers list
                                    <!--<i class="material-icons">arrow_backward</i>-->
                                </a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>