<template>
  <div class="sm:w-1/2 md:w-1/3 lg:w-1/4 pr-4 mb-4">
    <div class="employee-card p-4 rounded flex">
      <div class="deal-employee-logo w-16 h-16 flex-shrink-0 rounded-full overflow-hidden">
        <img class="w-full" v-if="employee.user_logo" :src="`${url}/photos/agency/${employee.user_logo}`" alt="">
      </div>
      <div class="ml-4 flex flex-col justify-between">
        <div>
          <div class="font-bold">{{ getFullName(employee) }}</div>
          <div class="font-bold">{{ employee.role ? employee.role.name : 'Агент' }}</div>
          <div class="deal-employee-phone">{{ employee.phone }}</div>
        </div>
        <div class="flex space-x-2 mt-2">
          <a :href="'https://t.me/' + employee.phone" target="_blank">
            <img src="@/shared/assets/icons/social/telegram.svg" alt="Telegram" class="w-6 h-6">
          </a>
          <a :href="'https://wa.me/' + employee.phone" target="_blank">
            <img src="@/shared/assets/icons/social/whatsapp.svg" alt="WhatsApp" class="w-6 h-6">
          </a>
        </div>
      </div>
      <button v-if="!locked" @click="$emit('remove', employee.id)" class="ml-auto mt-2 px-4 py-2 rounded">
<!--        <img src="@/shared/assets/icons/trash.svg" alt="Удалить" class="w-6 h-6">-->
        <span class="simple-button delete" title="Удалить"><i class="jw-action-icon-delete"></i></span>
      </button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    employee: {
      type: Object,
      required: true
    },
    url: {
      type: String,
      required: true
    },
    locked: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    getFullName(employee) {
      return employee.fio || `${employee.first_name} ${employee.last_name}`;
    }
  }
};
</script>

<style>
  .addDeal__form {
    .employee-card {
      background: linear-gradient(360deg, #F5F5F5 0%, #FFFFFF 100%);
      border: 1px solid #E0E0E0;
      border-radius: 5px;

      .deal-employee-phone {
        font-family: 'Lato', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 17px;
      }

      a {
        border: none;
      }
    }
  }
</style>
