<template>
  <v-container grid-list-md>

    <v-layout row wrap >
      <v-flex xm12 md12>
        <h1>App Test</h1>
        <v-alert
                :value="true"
                type="warning"
        >
          This app is still in testing mode. To remove the testing flag contact the Administrator.
        </v-alert>
        <v-card class="mx-auto" flat style="margin-top: 10px;">
          <v-tabs
                  background-color="white"
                  color="fff"
                  left

          >
            <v-tab>Overview</v-tab>
            <v-tab>API Access</v-tab>
            <v-tab>Settings</v-tab>
            <v-tab disabled>Users</v-tab>

            <v-tab-item :key="1" :transition="false"  :reverse-transition="false" >
              <v-container style="padding-right: 0px; padding-left:0px;">
                <img src="https://account.keks.cloud/gui/apps/3/icon" style="float: right;width: 100px;">
                <b>Description</b><br>
                Keks Cloud Mattermost Chat App<br><br>
                <a href="https://chat.keks.cloud">https://chat.keks.cloud</a>
              </v-container>

            </v-tab-item>
            <v-tab-item :key="2" :transition="false"  :reverse-transition="false">
              <v-container style="padding-right: 0px; padding-left:0px;">
                <h2>oAuth Token</h2>
                <p>
                  Here are the oAuth API-Keys. You use this Keys to start the oAuth authorization work flow.
                </p>
                <v-text-field
                        label="API Key"
                        value="d21ec9146c3c327211b8b7fd44003916b938d751d458fece25ef51fa9c8896c97ceb22d032e6dc7388c6143a3b3157764949a7b2cbb062e005dd5f009310ab00"
                ></v-text-field>
                <v-text-field
                        label="API Secret"
                        value="fc769296b4b411c93b22c296b2e8c979ca31de11aadaac9c73ff4972bfc9df57c021fe33575c6e080d21039ecfeb1ae4efb2566e6ad4c463b8e139d0612867a9"
                ></v-text-field>
                <br>
                <h2>API Access</h2>
                <p>
                  You can access the API to get informations about this APP with the following API Credentials:
                  <v-text-field
                          label="API Token"
                          value="sadfwef42fwqefergw"
                  ></v-text-field>
                  <v-text-field
                          label="Refresh Token"
                          value="asdfdsafjöoiajsefoiaösjdfo"
                  ></v-text-field>
                <h2>Development Access</h2>
                <p>
                  To test the App you can use the following Developer Access and Refresh token, they are connected to your user.
                  <v-text-field
                          label="Access Token"
                          value="3916b938d751d458fece25ef51fa9c8896c97ceb22d032e6dc7388c6143a3b31577649"
                  ></v-text-field>
                  <v-text-field
                          label="Refresh Token"
                          value="411c93b22c296b2e8c979ca31de11aadaac9c73ff4972bfc9df57c021"
                  ></v-text-field>
                </p>
              </v-container>
            </v-tab-item>
            <v-tab-item :key="3" :transition="false"  :reverse-transition="false">
              <v-container style="padding-right: 0px; padding-left:0px;">
                FooBar
              </v-container>
            </v-tab-item>
            <v-tab-item :key="4" :transition="false"  :reverse-transition="false">
              <v-container style="padding-right: 0px; padding-left:0px;">
                FooBar
              </v-container>
            </v-tab-item>

          </v-tabs>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
  export default {
    data () {
      return {
        menu: [
          { icon: 'home', title: 'Login' },
          { icon: 'info', title: 'Invited' },
          { icon: 'warning', title: 'Register' }
        ]
      }
    }
      }
</script>

<style>

</style>