<template>
  <div>
    <span
      :class="[
        'kind',
        {
          'text-danger': /error/.test(line.kind),
          'text-warning': /warn/.test(line.kind),
          'font-weight-bold': /warn|error/.test(line.kind)
        }
      ]"
      >{{ line.kind.toUpperCase() }}</span
    >
    <span
      :class="[
        'time',
        {
          'text-danger': /error/.test(line.kind),
          'text-warning': /warn/.test(line.kind),
          'font-weight-bold': /warn|error/.test(line.kind)
        }
      ]"
      >{{ line.time | dateTime }}</span
    >
    <span
      :class="[
        'message',
        {
          'text-danger': /error/.test(line.kind),
          'text-warning': /warn/.test(line.kind),
          'font-weight-bold': /warn|error/.test(line.kind)
        }
      ]"
      >{{ line.message }}</span
    >
  </div>
</template>

<script>
export default {
  name: "Item",
  props: ["height", "line", "index"]
};
</script>

<style lang="sass" scoped>
  .kind
    width: 9%

  .time
    width: 26%

  .message
    width: 65%
    word-wrap: break-word
</style>