<template>
  <main>
    <div class="section">
      <div class="column">
        <div class="box">
          <div v-if="stage === 1">
            <center><h1>Hi, what asset would you like to create?</h1>
              <b-button @click="createType = 'hat'; stage = 2" v-if="$store.state.admin" class="is-large">
                Hat
              </b-button>
              &nbsp;
              <b-button @click="createType = 'face'; stage = 2" v-if="$store.state.admin" class="is-large">
                Face
              </b-button>
              &nbsp;
              <b-button @click="createType = 'shirt'; stage = 2" class="is-large">
                Shirt
              </b-button>
              &nbsp;
              <b-button @click="createType = 'pants'; stage = 2" class="is-large">
                Pants
              </b-button>
            </center>
          </div>
          <div v-if="stage === 2">
            <b-button @click="goBack()">Go back</b-button>
            <center>
            <h1>
              Upload {{createType}}
            </h1>
              <b-input :value="$store.state.username + '\'s ' + createType"
                       maxlength="30">
              </b-input>
              <b-field class="file">
                <b-upload v-model="file" expanded>
                  <a class="button is-primary is-fullwidth">
                    <b-icon icon="upload"></b-icon>
                    <span>{{ file.name || "Click to upload"}}</span>
                  </a>
                </b-upload>
              </b-field>
            </center>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>
<script>
export default {
  name: 'MarketplaceCreate',
  data() {
    return {
      createType: null,
      stage: 1,
      file: '',
      dropFiles: null
    }
  },
  methods: {
    goBack() {
      this.createType = null
      this.stage = 1
      this.file = null
      this.dropFiles = null
    }
  }
}
</script>
