<template>
  <div class="card mx-3 panel-right lead_detail_worklist">
    <div class="card-body" v-if="userDetail[0] !== undefined">
      <div class="text-center p-4 border-bottom">
        <div class="mb-4" v-if="userDetail[0].profile">
          <img
            :src="userDetail[0].profile"
            alt=""
            class="rounded-circle avatar-md img-thumbnail"
          />
        </div>
        <div class="mb-4" v-if="!userDetail[0].profile">
          <div class="avatar-md mx-auto">
            <span
              class="
                avatar-title
                rounded-circle
                bg-soft bg-primary
                text-primary
                fs-3
              "
            >
              {{ userDetail[0].name.charAt(0) }}</span
            >
          </div>
        </div>
        <h5 class="font-size-16 mb-1 text-truncate">
          {{ userDetail[0].name }}
        </h5>
        <p class="text-muted text-truncate mb-1">
          <i class="mdi mdi-circle text-success align-middle me-1"></i>
          Active
        </p>
      </div>
      <div class="card border p-4">
        <div>
          <p class="text-muted mb-1">Name</p>
          <h5 class="font-size-14">{{ userDetail[0].name }}</h5>
        </div>
        <hr class="m-0" />
        <div class="mt-4">
          <p class="text-muted mb-1">Email</p>
          <h5 class="font-size-14">{{ userDetail[0].email }}</h5>
        </div>
        <hr class="m-0" />
        <div class="mt-4">
          <p class="text-muted mb-1">Location</p>
          <h5 class="font-size-14">{{ userDetail[0].location }}</h5>
        </div>
        <hr class="m-0" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userDetail: [
        {
          id: 1,
          name: 'Steven Franklin',
          email: 'steven@gmail.com',
          username: 'steven',
          location: 'California, USA',
        },
      ],
    };
  },
};
</script>