<template>
  <div
    :class="[
      'additionallog',
      'd-flex',
      'flex-column',
      'text-left',
      {
        full: showAdditional === $options.NODETAILS,
        split: showAdditional !== $options.NODETAILS
      }
    ]"
  >
    <div
      class="d-flex flex-row"
      v-for="(line, index) in details.entries"
      :key="index"
    >
      <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 }}</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>
  </div>
</template>

<script>
/* This is Free Software under GNU Affero General Public License v >= 3.0
 * without warranty, see README.md and license for details.
 *
 * SPDX-License-Identifier: AGPL-3.0-or-later
 * License-Filename: LICENSES/AGPL-3.0.txt
 *
 * Copyright (C) 2018 by via donau
 *   – Österreichische Wasserstraßen-Gesellschaft mbH
 * Software engineering by Intevation GmbH
 *
 * Author(s):
 * Thomas Junk <thomas.junk@intevation.de>
 */
import { mapState } from "vuex";

export default {
  name: "additionallogs",
  computed: {
    ...mapState("imports", ["showAdditional", "details"])
  },
  NODETAILS: -1
};
</script>

<style lang="scss" scoped>
.additionallog {
  overflow-y: auto;
}

.split {
  max-height: 35vh;
}

.full {
  max-height: 70vh;
}

.kind {
  width: 9%;
}
.time {
  width: 26%;
}
.message {
  width: 65%;
  word-wrap: break-word;
}
</style>