<template>
  <div class="ui-log">
    <div class="ui-log__before">
      <div class="flex no-wrap">
        <div class="text-bold">{{ title }}</div>
        <div class="text-blue-grey q-ml-md">{{ fileSize }}</div>
      </div>
      <div class="text-accent" v-if="accentText">{{ accentText }}</div>
      <div class="text-blue-grey">{{ date }}</div>
      <q-space />
      <div class="text-secondary">{{ managerName }}</div>
    </div>
    <template v-if="!!$slots.default">
      <q-separator vertical class="q-ml-md" />
      <div class="ui-log__after">
        <slot />
      </div>
    </template>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { QSeparator, QSpace } from 'quasar'

@Component({ inheritAttrs: false, components: { QSeparator, QSpace } })
export default class UiLog extends Vue {
  @Prop(String) title!: string
  @Prop(String) accentText!: string
  @Prop(String) date!: string
  @Prop(String) fileSize!: string
  @Prop(String) managerName!: string
}
</script>
