<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>