<template>
  <div class="my-team">
    <h1 class="my-team__heading">Mein Team</h1>
    <div class="my-team__section">
      <h2 class="my-team__subheading">Willst du einem bestehenden Team beitreten?</h2>
      <router-link
        :to="joinTeamRoute"
        class="button button--primary">Zugangscode eingeben</router-link>
    </div>
    <div class="my-team__section">
      <h2 class="my-team__subheading">Willst du ein neues Team erfassen?</h2>
      <router-link
        :to="createTeamRoute"
        class="button button--primary">Team erfassen</router-link>
    </div>
  </div>
</template>

<script>
  import {JOIN_TEAM, CREATE_TEAM} from '@/router/me.names';

  export default {
    data() {
      return {
        joinTeamRoute: {
          name: JOIN_TEAM
        },
        createTeamRoute: {
          name: CREATE_TEAM
        }
      };
    },
  };
</script>

<style scoped lang="scss">
  @import '~styles/helpers';

  .my-team {
    &__heading {
      margin-bottom: $section-spacing;
    }

    &__section {
      margin-bottom: $section-spacing;
    }

    &__subheading {
      @include heading-3;
      margin-bottom: $large-spacing;
    }
  }
</style>
