<template>
  <!-- eslint-disable max-len -->
  <div class="container">
    <div class="goDown"></div>
    <form>
      <div class="col-md-12">
        <h3>{{ Header }}</h3>
        <div class="form-group row"></div>
        <div class="form-group row">
          <div class="col-md-6">
            <label>Name</label>
            <eva-icon name="person" fill="#60CBEB"></eva-icon>
            <input class="form-control" type="text" name="name" value />
            <div class="form-group row"></div>
          </div>
          <div class="col-md-6">
            <label>Surname</label>
            <eva-icon name="person" fill="#60CBEB"></eva-icon>
            <input class="form-control" type="text" name="surname" value />
          </div>
        </div>
        <div class="form-group row">
          <div class="col-md-4">
            <label>Email</label>
            <eva-icon name="email" fill="lightgrey"></eva-icon>
            <input class="form-control" type="text" name="email" value />
            <div class="form-group row"></div>
          </div>
          <div class="col-md-4">
            <label>Telephone Number</label>
            <eva-icon name="phone" fill="lightgrey"></eva-icon>
            <input class="form-control" type="text" name="telephonenumber" value />
          </div>
          <div class="col-md-4">
            <label>Cell Number</label>
            <eva-icon name="smartphone" fill="lightgrey"></eva-icon>
            <input class="form-control" type="text" name="cellnumber" value />
          </div>
        </div>
        <div class="form-group row">
          <div class="col-md-4">
            <label>Username</label>
            <eva-icon name="person" fill="#60CBEB"></eva-icon>
            <input class="form-control" type="text" name="username" value />
          </div>
          <div class="col-md-4">
            <label>Password</label>
            <eva-icon name="lock" fill="#60CBEB"></eva-icon>
            <input class="form-control" type="text" name="password" value />
          </div>
          <div class="col-md-4">
            <label>Confirm Password</label>
            <eva-icon name="lock" fill="#60CBEB"></eva-icon>
            <input class="form-control" type="text" name="confirmpassword" value />
          </div>
        </div>
      </div>
      <div class="form-group row">
        <div class="col-md-4">
          <button class="btn btn-b-n">Cancel</button>
        </div>
        <div class="col-md-4">
          <button class="btn btn-b-n">Submit</button>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  props: {
    RegisterHeader: { type: String, default: undefined },
  },
  name: 'PrivateIndividual',
  computed: {
    Header() {
      return this.RegisterHeader
        ? 'Agency Administrator Details'
        : 'Private Individual';
    },
  },
};
</script>

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