```<template>
  <c-card
    no-border
    no-hover
    :class="['employee-info-card-group', { '-collapse': isMobile && hideContents }]"
  >

    <div class="heading">
      <c-title class="title" :grey="isMobile && hideContents">
        {{ title }}
      </c-title>

      <div v-if="Object.keys(infoChunks || {}).length" class="actions">
        <template v-if="isMobile">
          <c-button
            size="30"
            icon="plus"
            class="action"
            icon-size="15"
            :ref-cy="`btn-add-${title}`"
            @click="$emit('add')"
          />

          <c-button
            flat
            size="30"
            icon-size="15"
            icon="chevron-up"
            :ref-cy="`btn-hide-${title}`"
            :class="['action toggle', { '-reverse': hideContents } ]"
            @click="hideContents = !hideContents"
          />
        </template>

        <c-button
          v-else
          primary
          class="action"
          icon-size="12"
          icon="plus"
          :ref-cy="`btn-add-${title}`"
          @click="$emit('add')"
        >
          Adicionar
        </c-button>
      </div>
    </div>

    <div
      ref="wrapper"
      :style="{ height: isMobile && hideContents ? '0px' : `${contentHeight}px` }"
      class="wrapper"
    >
      <div
        v-if="Object.keys(infoChunks || {}).length"
        ref="items"
        class="items"
      >
        <div
          v-for="(infoChunk, chunkName, index) in infoChunks"
          :key="(infoChunk.id || {}).value"
          ref-cy="info-card-group-item"
          :data-cy="(infoChunk.id || {}).value"
          class="item"
        >
          <div class="heading">
            <div class="type">
              <c-flag
                grey
                class="icon"
                ref-cy="info-card-group-item-heading"
                :data-cy="(infoChunk.icon || {}).name"
                :icon="(infoChunk.icon || {}).name"
              />

              <span class="name" ref-cy="info-card-group-item-name">
                {{ (infoChunk && infoChunk[titleItem] && infoChunk[titleItem].value) || '-' }}
              </span>
            </div>

            <div class="actions">
              <c-button
                flat
                size="30"
                icon="pencil"
                icon-size="14"
                class="action"
                :ref-cy="`btn-edit-${title}`"
                @click="$emit('edit', `${title}.${index}`)"
              />

              <c-button
                flat
                error
                size="30"
                icon="cross"
                icon-size="14"
                class="action"
                :ref-cy="`btn-delete-${title}`"
                @click="$emit('delete', (infoChunk.id || {}).value)"
              />
            </div>
          </div>

          <info-chunk :fields="infoChunk" class="infos" />
        </div>
      </div>

      <div
        v-if="!Object.keys(infoChunks || {}).length"
        ref="items"
        class="empty"
        ref-cy="info-card-group-empty-state"
      >
        <c-button
          v-if="isMobile"
          primary
          class="action"
          icon-size="12"
          icon="plus"
          :ref-cy="`btn-add-${title}`"
          @click="$emit('add')"
        />

        <c-button
          v-else
          class="action"
          icon-size="12"
          icon="plus"
          :ref-cy="`btn-add-${title}`"
          @click="$emit('add')"
        >
          {{ callToAction }}
        </c-button>
      </div>
    </div>
  </c-card>
</template>

<script>
import MediaQuery from '@mixins/MediaQuery'
import InfoChunk from '@components/Common/InfoChunk'


export default {
  components: { InfoChunk },

  mixins: [ MediaQuery ],

  props: {
    title: {
      type: String,
      required: true
    },

    titleItem: {
      type: String
    },

    fields: {
      type: Array,
      required: true
    },

    // The text the goes inside the button present in the empty-state
    callToAction: String,

    loading: Boolean,

    editable: Boolean,
  },

  data () {
    return {
      hideContents: false,
      contentObs: null,
      contentHeight: 0
    }
  },

  computed: {
    infoChunks () {
      return this.fields.reduce((acc, field, index) => {
        const fieldHighlight = Object.keys(field || {})
          .find(fieldName => (field[fieldName].infoCardProps || {}).highlight)

        return {
          ...acc,
          [index + 1]: {
            ...field,
            index: { hide: true, value: index },
            [fieldHighlight]: { ...field[fieldHighlight], hide: true },
            icon: { hide: true, name: field[fieldHighlight].infoCardProps.icon }
          }
        }
      }, {})
    }
  },

  mounted () {
    this.contentObs = new ResizeObserver(ev => {
      this.contentHeight = ev[0].target.scrollHeight
    })

    this.contentObs.observe(this.$refs.items)
  }
}
</script>

<style lang="scss">

.employee-info-card-group {
  padding: 10px;
  margin: 0 10px 20px 10px;

  &:last-child { margin-bottom: 185px; }

  &.-collapse > .heading { margin-bottom: 0px; }

  @include responsive (tablet, desktop) {
    padding: 20px;
    padding-bottom: 30px;

    margin: 0 5px 20px 0;
  }

  & > .wrapper { transition: height .3s; overflow: hidden; }

  & > .heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 20px;
    transition: margin .3s;

    & > .title > .text { color: map-get($text-color, base-80); }

    & > .actions {
      display: flex;

      @include responsive (tablet, desktop) {
        & > .action { width: 100%; max-width: 180px; }
      }

      & > .action.toggle {
        transform: rotate(0deg);
        transition: transform .2s;

        & > .icon { margin-bottom: 1px; }

        &.-reverse { transform: rotate(180deg); }
        &.-reverse > .icon { margin-bottom: 3px; }
      }

      & > .action:not(:last-child) { margin-right: 10px; }
    }
  }

  & > .wrapper > .empty {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 256px;

    border-radius: 5px;
    border: 1px dashed map-get($text-color, base-20);
  }

  & > .wrapper > .items > .item {
    display: flex;
    flex-direction: column;
    &:not(:first-child) { margin-top: 40px; }

    & > .heading {
      display: flex;
      align-items: center;
      justify-content: space-between;

      // Ugly, rite?
      height: 40px;

      & > .type {
        display: flex;
        align-items: center;
        position: relative;
        margin-left: 65px;

        @include responsive (tablet, desktop) { margin-left: 250px; }
      }

      & > .type > .icon {
        position: absolute;
        top: 50%;

        width: 40px;
        height: 40px;
        box-shadow: -2px 3px 17px -3px rgba(18, 30, 72, 0.12);

        transform: translate(calc(-100% - 15px), -50%);

        @include responsive (tablet, desktop) {
          transform: translate(calc(-100% - 30px), -50%);
        }

        & > .c-icon { filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.35)); }
      }

      & > .type > .name {
        font-size: 16px;
        font-family: $title-font-family;
        font-weight: $title-font-weight;
        color: map-get($text-color, base-80);
      }

      & > .actions {
        display: flex;

         & > .action.toggle {
           transform: rotate 0deg;
           transition: transform .2;

           & > .icon { margin-bottom: 1px; }

           &.-reverse { transform: rotate(180deg); }
           &.-reverse > .icon { margin-bottom: 3px; }
         }

        & > .action:not(:last-child) { margin-right: 10px; }
      }
    }

    &:not(:last-child) {
      border-bottom: $base-border;
      & > .infos { padding-top: 20px; padding-bottom: 50px; }
    }
  }
}

</style>
```