<template>
  <div class="rotations-listing-item-container">
    <Title tag="h4" class="date">{{ getDates('LLL') }}</Title>

    <div class="user">
      <div class="infos">
        <div class="avatar-container">
          <avatar-ui
            :heritedData="{
              image: getCheckedData(rotation, ['users', 'image'])
            }"
          />
        </div>

        <Title tag="h5" class="name">{{ $_username(rotation.users) }}</Title>
      </div>

      <Link
        v-if="rotation.users && rotation.users.email"
        :href="`mailto:${rotation.users.email}`"
        :hover-decoration-disabled="true"
        icon="email"
        size="s"
        direction="row reverse"
      >
        {{ rotation.users.email }}
      </Link>
    </div>
  </div>
</template>

<script>
import { Title } from 'inside-collection/atoms'
import { Link } from 'inside-collection/components'

export default {
  name: 'RotationsListingItem',
  $_i18nRootPath: 'customs.ROTATION_SERVICE_PAGE',
  components: {
    Title,
    Link
  },
  props: {
    rotation: {
      type: Object,
      required: true
    }
  },
  methods: {
    getDates(format) {
      return this.$_tc('between', [
        this.$_formatDate(this.rotation.date, format),
        this.$_formatDate(this.rotation.end_date, format)
      ])
    }
  }
}
</script>

<style lang="scss">
.rotations-listing-item-container {
  display: block;
  width: 100%;

  .date {
    padding-bottom: var(--spacing-s);
    margin-bottom: var(--spacing-m);
    border-bottom: var(--border-default);
  }

  .user {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-bottom: var(--spacing-m);
    border-bottom: var(--border-default);

    .infos {
      display: flex;
      align-items: center;

      .name {
        margin-left: var(--spacing-m);
      }

      .avatar .avatar--clickable {
        cursor: default;
      }
    }
  }
}
</style>
