<template>
  <!-- eslint-disable max-len -->
  <div>
    <hr />
    <br />
    <div class="col-md-12" style="text-align:centre">
      <div class="myWell">
        <h4>Detailed Individual Information</h4>
      </div>
      <div class="form-group row"></div>
      <div class="row" style="text-align:left">
        <div class="col-md-6">
          <label>Name</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
            </span>
            <input class="form-control" type="text" name="name" v-model="owner.name" />
          </div>
        </div>
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Surname</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="book-outline" fill="#60CBEB"></eva-icon>
            </span>
            <input class="form-control" type="text" name="surname" v-model="owner.surname" />
          </div>
        </div>
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>ID Number</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="archive" fill="#60CBEB"></eva-icon>
            </span>
            <input class="form-control" type="text" name="idnumber" v-model="owner.idNumber" />
          </div>
        </div>
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Company Reg Number</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="npm-outline" fill="#60CBEB"></eva-icon>
            </span>
            <input
              class="form-control"
              type="text"
              name="companyregnumber"
              v-model="owner.companyRegNumber"
            />
          </div>
        </div>
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Marital Status</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="people-outline" fill="#60CBEB"></eva-icon>
            </span>
            <select class="form-control" name="maritalstatus" v-model="owner.maritalstatus">
              <option v-for="(item, i) in maritalStatus" :key="i">{{item}}</option>
            </select>
          </div>
        </div>
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Email Address</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="email-outline" fill="#60CBEB"></eva-icon>
            </span>
            <input class="form-control" type="text" name="email" v-model="owner.email" />
          </div>
        </div>
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Cell Number</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="smartphone-outline" fill="#60CBEB"></eva-icon>
            </span>
            <input class="form-control" type="text" name="cellnumber" v-model="owner.cellNumber" />
          </div>
        </div>
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Landline Number</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="phone-outline" fill="#60CBEB"></eva-icon>
            </span>
            <input class="form-control" type="text" name="landline" v-model="owner.telephone" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  component: {},
  props: {
    owner: {},
  },
  computed: {
    ...mapState('timeshare', ['maritalStatus']),
  },
};
</script>

<style>
.goDown {
  margin-top: 150px;
}
</style>
