<template>
    <div class="main d-flex flex-column">
        <div class="d-flex flex-row">
            <div :class="spacer"></div>
            <div class="logoutput shadow">
                <pre v-highlightjs="logs"><code class="accesslog"></code></pre>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.logoutput {
  width: 95%;
  height: 85vh;
  margin-top: $offset;
  margin-right: $offset;
  margin-left: $offset;
  text-align: left;
  background-color: white;
  overflow: scroll;
  transition: $transition-fast;
}

.spacer {
  margin-left: $offset;
  height: 90vh;
}

.spacer-collapsed {
  min-width: $icon-width + $offset;
  transition: $transition-fast;
}

.spacer-expanded {
  min-width: $sidebar-width + $offset;
}
</style>

<script>
import { mapGetters } from "vuex";
import { HTTP } from "../application/lib/http.js";

export default {
  name: "logs",
  mounted() {
    HTTP.get("system/log/apache2/access.log", {
      headers: { "X-Gemma-Auth": localStorage.getItem("token") }
    })
      .then(response => {
        this.logs = response.data.content;
      })
      .catch(error => {
        console.log(error);
      });
  },
  data() {
    return {
      logs: null
    };
  },
  methods: {
    disallow(e) {
      e.target.blur();
    }
  },
  computed: {
    ...mapGetters("application", ["sidebarCollapsed", "isUsermenuCollapsed"]),
    spacer() {
      return {
        spacer: true,
        "spacer-expanded": !this.sidebarCollapsed,
        "spacer-collapsed": this.sidebarCollapsed
      };
    }
  }
};
</script>