<template>
  <main class="section">
    <br>
    <div class="container is-hidden-desktop">
      <div class="notification is-info">
        The admin panel is currently not optimized for mobile devices.
      </div>
    </div>
    <div class="columns is-centered">
    <b-menu class="column is-2">
      <div class="box">
      <b-menu-list class="" label="Admin">
        <b-menu-item
          :label='" "+ route.title'
          :icon=route.icon
          :key='route.path'
          v-for='route in routes'
          :class="{'is-info': index === selected}"
          @click='$router.push("/admin/" + route.route)'
        ></b-menu-item>
      </b-menu-list>
      </div>
    </b-menu>
      <div class="column is-7">
        <router-view class="box"></router-view>
      </div>
    </div>
  </main>
</template>

<script>
	export default {
		name: 'Admin',
		data () {
			return {
				selected: null,
				routes: [
					{
						title: 'Dashboard',
						route: 'dashboard',
						icon: 'home'
					},
					{
						title: 'General',
						route: 'general',
						icon: 'th'
					},
					{
						title: 'Moderation',
						route: 'moderation/reports',
						icon: 'exclamation-circle'
					},
					{
						title: 'Users',
						route: 'users',
						icon: 'user-circle'
					},
          {
            title: 'Teams',
            route: 'teams',
            icon: 'users'
          },
          {
            title: 'Audit Logs',
            route: 'logs',
            icon: 'edit'
          },
          {
            title: 'Marketplace',
            route: 'marketplace',
            icon: 'shopping-cart'
          },
				]
			}
		},
		watch: {
			$route (to) {
				this.selected = to.path.split('/')[2]
			}
		},
		created () {
			this.selected = this.$route.path.split('/')[2]

			this.$nextTick(() => {
				if(!this.$store.state.admin) {
					this.$router.push('/')
					this.$store.commit('setAccountTabs', 1)
					this.$store.commit('setAccountModalState', true)
				}
			})

		}
	}
</script>

<style lang='scss' scoped>
	@import '../../assets/scss/variables.scss';

	.admin {
		height: calc(100% + 1rem);
		margin-top: -1rem;
		display: flex;
		flex-direction: row;

		@at-root #{&}__menu {
			width: 15rem;
			height: calc(100%);
			background-color: #fff;
			cursor: default;
			overflow-y: auto;
			border-right: thin solid $color__lightgray--darker;

			@at-root #{&}__item {
				transition: background-color 0.2s;
				padding: 1rem;
				border-bottom: thin solid $color__lightgray--darker;
				display: flex;
				flex-direction: row;
				position: relative;

				&:hover {
					background-color: $color__lightgray--primary;
				}

				&::before {
					content: '';
					position: absolute;
					left: -0.25rem;
					top: 0;
					width: 0.25rem;
					height: 100%;
					background-color: $color__gray--darkest;
					transition: left 0.2s;
				}

				@at-root #{&}--selected {
					background-color: $color__lightgray--primary;

					&::before {
						left: 0;
					}
				}

				@at-root #{&}__icon {
					margin-right: 0.5rem;
					margin-top: 0.1875rem;
				}

				@at-root #{&}__title {
					font-weight: 600;
				}
				@at-root #{&}__description {
					font-size: 0.9rem;
					color: $color__text--secondary;
					margin-top: 0.125rem;
				}
			}
		}

		@at-root #{&}__router_view {
			width: 100%;
			height: 100%;
			overflow-y: auto;
		}
	}
  .route_container--settings {
    display: flex;
    align-items: flex-start
  }

  .settings_menu {
    width: 15rem;
    border: thin solid $color__gray--darker;
    background-color: #fff;
    padding: 1rem;
    border-radius: 0.25rem;

    @at-root #{&}__title {
      cursor: default;
      font-weight: 500;
      font-variant: small-caps;
      font-size: 1.125rem;
      padding-left: 0.25rem;
      margin-bottom: 0.5rem;
    }

    @at-root #{&}__item  {
      padding: 0.5rem 1rem;
      margin-bottom: 0.25rem;
      padding-right: 0;
      transition: background-color 0.2s;
      cursor: pointer;
      position: relative;
      border-radius: 0.25rem;

      &:first-child { margin-top: 0.5rem; }
      &:last-child { margin-bottom: 0.5rem; }

      &:hover { background-color: $color__lightgray--primary; }

      &::before {
        content: '';
        display: inline-block;
        width: 0.25rem;
        z-index: 1;
        height: 100%;
        position: absolute;
        left: 0;
        border-radius: 0.25rem 0 0 0.25em;
        top: 0;
        background-color: $color__gray--darkest;
        opacity: 0;
        transition: opacity 0.2s;
      }

      span {
        color: $color__text--secondary;
        margin-right: 0.5rem;
      }

      @at-root #{&}--selected {
        background-color: $color__lightgray--darker;
        color: $color__text--primary;

        span {
          color: $color__text--primary;
        }

        &:hover { background-color: $color__lightgray--darker; }

        &::before {
          opacity: 1;
        }
      }
    }
  }
  .settings_page {
    width: calc(100% - 15rem);
    background-color: #fff;
    border-radius: 0.25rem;
    margin-left: 2rem;
    border: thin solid $color__gray--darker;
  }

  @media (max-width: $breakpoint--tablet) and (min-width: $breakpoint--phone) {
    div.settings_menu, div.settings_page {
      width: calc(100% - 4rem);
      margin: 0.5rem 2rem;
      padding: 1rem;
    }
  }

  @media (max-width: $breakpoint--tablet) {
    .route_container--settings {
      flex-direction: column;
    }

    .settings_menu {
      width: 100%;

      @at-root #{&}__items {
        display: flex;
        align-items: baseline;
      }

      @at-root #{&}__item {
        width: 7rem;
        margin-right: 0.5rem;
        color: $color__text--primary;

        &:first-child, &:last-child {
          margin-bottom: 0;
          margin-top: 0;
        }

        &::before {
          height: 0.2rem;
          width: 100%;
          left: 0;
          border-radius: 0 0 1rem 1rem;
          top: auto;
          bottom: 0;
        }
      }
    }

    .settings_page {
      width: 100%;
      margin: 0;
      margin-top: 1rem;
    }
  }
</style>
