<template>
    <div class="agent-card">
            <picture>
				<source :srcset="imageSourceAsAvif"    />
                <img class="agent-card__logo"
                :src="info.logo"
                :alt="`${info.title} logo`"
                width="290.42"
                height="65.31" />
			</picture>
        <div class="agent-card__title">
            {{ info.title }}
        </div>
        <div class="agent-card__description">
            {{ info.description }}
        </div>
        <div class="agent-card__contact">
            <span class="agent-card__contact__title">
                {{ $t("phone") }}
            </span>
            <span class="agent-card__contact__value">
                {{ info.phone }}
            </span>
        </div>
        <div class="agent-card__contact">
            <span class="agent-card__contact__title">
                {{ $t("webSite") }}
            </span>
            <a :href="info.website"
                target="_blank"
                rel="nofolow" class="agent-card__contact__value agent-card__contact__value--colored">
                {{ info.website }}
            </a>
        </div>
    </div>
</template>
<script>
import {convertImagePathToAvif} from "../../helper/helper";
export default {
    props: {
        info: {
            reuqired: true
        }
    },
    computed: {
        imageSourceAsAvif() {
			return convertImagePathToAvif(this.info.logo);
		},
    }
}
</script>
<style lang="scss" scoped>
.agent-card {
    background-color: $color-white;
    border-radius: $padding-default * .5;
    box-shadow: 0px 0px 4px 0px #00000026;
    display: block;
    padding: $padding-default * 1.5;
    padding-bottom: $padding-default * 2;

    &__logo {
        aspect-ratio:  290.42 / 65.31;
        border-radius: $padding-default * .5;
        width: 100%;
    }

    &__title {
        font-size: 14px;
        font-weight: bold;
        margin: $padding-default auto;
        overflow: hidden;
        text-decoration: none;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    &__description {
        color: $color-text--light;
        font-size: 14px;
    }

    &__contact {
        font-size: 14px;
        margin-top: $padding-default;

        &::after {
            clear: both;
            content: "";
            display: block;
        }

        &__title {}

        &__value {
            direction: ltr;
            float: left;
            max-width: 60%;
            overflow: hidden;
            text-decoration: none;
            text-overflow: ellipsis;
            white-space: nowrap;

            [data-lang="en"] &{
                float: right;
            }

            &--colored {
                color: $color-primary;
            }
        }
    }

}
</style>