<template>
  <section id="usersWrapper">
    <h1 class="heading">
      <span>Users
        <i class="fa fa-angle-down toggler"
          v-show="isPhone && !showingControls"
          @click="showingControls = true"></i>
        <i class="fa fa-angle-up toggler"
          v-show="isPhone && showingControls"
          @click.prevent="showingControls = false"></i>
      </span>

      <div class="buttons" v-show="!isPhone || showingControls">
        <button class="btn btn-green" @click="creating = !creating">
          <i class="fa fa-plus"></i>
          Add</button>
      </div>
    </h1>

    <div class="main-scroll-wrap">
      <div class="users">
        <form class="user-create user-item" v-if="creating" @submit.prevent="store">
          <div class="input-row">
            <label>Name</label>
            <input type="text" v-model="newUser.name" required v-koel-focus="creating">
          </div>
          <div class="input-row">
            <label>Email</label>
            <input type="email" v-model="newUser.email" required>
          </div>
          <div class="input-row">
            <label>Password</label>
            <input type="password" v-model="newUser.password" required>
          </div>
          <div class="input-row">
            <label></label>
            <button class="btn btn-green">Create</button>
            <button class="btn btn-red" @click.prevent="creating = false">Cancel</button>
          </div>
        </form>

        <user-item v-for="user in state.users" :user="user"></user-item>

        <article class="user-item" v-for="n in 6"></article>
      </div>
    </div>
  </section>
</template>

<script>
import { clone } from 'lodash';
import isMobile from 'ismobilejs';

import { loadMainView } from '../../../utils';
import { userStore } from '../../../stores';
import userItem from '../../shared/user-item.vue';

export default {
  components: { userItem },

  data() {
    return {
      state: userStore.state,
      isPhone: isMobile.phone,
      showingControls: false,
      creating: false,
      newUser: {},
    };
  },

  methods: {
    /**
     * Show the "Create User" form.
     */
    create() {
      loadMainView('user-create');
    },

    /**
     * Store the newly created user.
     */
    store() {
      userStore.store(this.newUser.name, this.newUser.email, this.newUser.password).then(u => {
        this.newUser = clone(userStore.stub);
        this.creating = false;
      });
    },
  },
};
</script>

<style lang="sass">
@import "../../../../sass/partials/_vars.scss";
@import "../../../../sass/partials/_mixins.scss";

#usersWrapper {
  .users {
    justify-content: space-between;
    flex-wrap: wrap;
    display: flex;
  }

  form {
    padding: 8px 16px;
    background-size: 30px 30px;
    background-image: linear-gradient(
      -45deg,
      rgba(black, 0.3)  25%,
      transparent     25%,
      transparent     50%,
      rgba(black, 0.3)  50%,
      rgba(black, 0.3)  75%,
      transparent     75%,
      transparent
    );

    .input-row {
      display: flex;
      margin: 6px 0;
    }

    label {
      flex: 0 0 128px;
      margin-bottom: 0;
      font-size: 100%;
    }

    input {
      flex: 1;
    }
  }

  button {
    margin-right: 3px;
  }

  @media only screen and (max-width: 768px) {
    .users {
      flex-direction: column;

      .buttons {
        margin-top: 12px;
        display: block;
      }
    }
  }
}

.user-item {
  width: 32%;
  margin-bottom: 16px;

  .info {
    display: flex;

    img {
      flex: 0 0 128px;
    }

    .right {
      flex: 1;
      padding: 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background-color: rgba(255, 255, 255, .02);
    }

    h1 {
      font-size: 1.4rem;
      margin-bottom: 5px;

      .you {
        color: $colorHighlight;
        margin-left: 5px;
      }
    }

    .buttons {
      display: none;
      margin-top: 16px;
    }

    &:hover, html.touchevents & {
      .buttons {
        display: block;
      }
    }
  }

  html.with-extra-panel & {
    width: 49%;
  }

  @media only screen and (max-width: 1024px) {
    width: 100%;
  }
}
</style>
