<template>
  <div class="auth-wrap">
    <div class="tab-control">
      <a v-for="(tab, index) of tabs" :key="index" @click="changeTab(tab)" :class="{ active: tab.active }">{{ tab.name }}</a>
    </div>
    <div class="auth">
      <SignIn v-if="activeTab.name === 'Ienākt'" :errors="errors" />
      <SignUp v-else :errors="errors" />
    </div>
  </div>
</template>

<script>
import SignIn from '@/components/SignIn.vue';
import SignUp from '@/components/SignUp.vue';

export default {
  components: {
    SignIn,
    SignUp
  },
  data() {
    return {
      tabs: [{
        name: 'Ienākt',
        active: true
      },
      {
        name: 'Reģistrēties',
        active: false
      }],
      errors: {
        UserNotConfirmedException: 'Apstipriniet e-pasta adresi!',
        UserNotFoundException: 'Lietotājs neeksistē',
        NotAuthorizedException: 'Nepareizs lietotājvārds vai parole',
        UsernameExistsException: 'Lietotājs ar šādu lietotājvārdu jau eksistē',
        ExpiredCodeException: 'Nepareizs kods vai koda termiņš ir beidzies, pieprasiet jaunu kodu!',
        CodeMismatchException: 'Nepareizs kods'
      }
    }
  },
  computed: {
    activeTab() {
      return this.tabs.find(x => x.active);
    }
  },
  methods: {
    changeTab(tab) {
      if (!tab.active) {
        this.activeTab.active = false;
        tab.active = true;
      }
    }
  }
}
</script>

<style>
input, button, label {
  margin: 4px;
  padding: 4px;
}

.auth-wrap {
  display: inline-block;
  border-radius: 0 0 9px 9px;
  box-shadow: 0 10px 30px #dedede;
}

.auth {
  padding: 30px;
}

.auth label {
  font-size: 14px;
}

.signin, .signup, .forgotpass {
  display: flex;
  flex-direction: column;
}

.input-group {
  display: flex;
}

.input-group > * {
  flex: 1;
}

.input-group label {
  text-align: right;
}

.input-group input {
  min-width: 250px;
}

.tab-control {
  display: flex;
}

.tab-control a {
  flex: 1;
  padding: 20px 15px 15px 15px;
  color: #fff;
  text-decoration: none;
  background: #5d758e;
  cursor: pointer;
}

.tab-control .active {
  border-top: 5px solid #42b983;
  background: #2c3e50;
  padding: 15px;
}

.tab-control a:not(.active):hover {
  background: #67809a;
}

@media screen and (max-width: 700px) {
  .auth-wrap {
    display: block;
    border-radius: 0;
    box-shadow: none;
  }

  .input-group {
    flex-direction: column;
  }

  .input-group label {
    text-align: left;
  }

  .input-group input {
    min-width: unset;
  }
}

@media screen and (max-width: 400px) {
  .auth {
    padding: 10px;
  }
}
</style>