<template>
    <div class="container">
        <span class="name">
            <person-text :person="item.result" />
        </span>
        <span class="birthday" v-if="hasBirthdate">
            {{ $d(item.result.birthdate.datetime, "short") }}
        </span>
        <span class="location" v-if="hasAddress">
            {{ item.result.current_household_address.text }} -
            {{ item.result.current_household_address.postcode.name }}
        </span>
    </div>

    <div class="right_actions">
        <badge-entity :entity="item.result" :options="{ displayLong: true }" />
        <on-the-fly type="person" :id="item.result.id" action="show" />
    </div>
</template>

<script>
import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue";
import BadgeEntity from "ChillMainAssets/vuejs/_components/BadgeEntity.vue";
import PersonText from "ChillPersonAssets/vuejs/_components/Entity/PersonText.vue";

export default {
    name: "SuggestionPerson",
    components: {
        OnTheFly,
        BadgeEntity,
        PersonText,
    },
    props: ["item"],
    computed: {
        hasBirthdate() {
            return this.item.result.birthdate !== null;
        },
        hasAddress() {
            return this.item.result.current_household_address !== null;
        },
    },
};
</script>
