<template>
  <!-- eslint-disable max-len -->
  <form method="POST">
    <div class="container" style="text-align:left">
      <div class="reg-page">
        <div class="regform" style="text-align:left">
          <h4>Agency Details</h4>
          <div class="col-md-8" style="margin-bottom: 1em">
            <eva-icon name="people" fill="#60CBEB"></eva-icon>
            <input class="form-control" type="text" name="agencyname" placeholder="Agency Name" />
          </div>
          <div class="col-md-8" style="margin-bottom: 1em">
            <eva-icon name="book" fill="lightgrey"></eva-icon>
            <input
              class="form-control"
              type="text"
              name="eaabffcnumber"
              placeholder="EAAB FFC Number"
            />
          </div>
          <div class="col-md-8">
            <eva-icon name="clipboard" fill="lightgrey"></eva-icon>
            <input
              class="form-control"
              type="text"
              name="companyregnumber"
              placeholder="Company Registration Number"
            />
          </div>
          <hr />
          <div class="col-md-10" style="text-align:left">
            <h5 style="margin-bottom: 1em">Agency Administrator</h5>
            <div class="row" style="text-align:left">
              <div class="col-md-6" style="margin-bottom: 1em">
                <eva-icon name="person" fill="#60CBEB"></eva-icon>
                <input class="form-control" type="text" name="name" placeholder="Name" />
              </div>
              <div class="col-md-6" style="margin-bottom: 1em">
                <eva-icon name="person" fill="#60CBEB"></eva-icon>
                <input class="form-control" type="text" name="surname" placeholder="Surname" />
              </div>
            </div>

            <div class="row" style="text-align:left">
              <div class="col-md-8">
                <eva-icon name="email" fill="lightgrey"></eva-icon>
                <input class="form-control" type="text" name="email" placeholder="Email Address" />
                <div class="form-group row"></div>
              </div>

              <div class="col-md-6" style="text-align:left">
                <eva-icon name="smartphone" fill="lightgrey"></eva-icon>
                <input
                  class="form-control"
                  type="text"
                  name="cellnumber"
                  placeholder="Contact Number"
                />
              </div>
            </div>
            <hr />
            <div class="row">
              <div class="col-md-7" style="margin-bottom: 1em">
                <eva-icon name="person" fill="#60CBEB"></eva-icon>
                <input class="form-control" type="text" name="username" placeholder="Username" />
              </div>
              <div class="col-md-7" style="margin-bottom: 1em">
                <eva-icon name="lock" fill="#60CBEB"></eva-icon>
                <input class="form-control" type="text" name="password" placeholder="Password" />
              </div>
              <div class="col-md-7" style="margin-bottom: 1em">
                <eva-icon name="lock" fill="#60CBEB"></eva-icon>
                <input
                  class="form-control"
                  type="text"
                  name="confirmpassword"
                  placeholder="Confirm Password"
                />
              </div>
            </div>
          </div>
          <div class="form-group row"></div>
          <div class="row offset-md-1">
            <div class="col-md-2">
              <button class="btn btn-b-n" type="submit">Submit</button>
            </div>
            <div class="col-md-2 offset-md-1">
              <button class="btn btn-b-n" type="submit">Cancel</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</template>

<script>
import RegisterPage from './registerPage.vue';

export default {
  data() {
    return {
      RegisterHeader: 'Agency Administrator Details',
    };
  },
  name: 'Agency',
  components: { RegisterPage },
};
</script>

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