<template>
  <q-form class="q-gutter-md q-my-lg project-form">
    <div class="row">
      <div class="col-3">Collection name*</div>
      <div class="col-9">
        <q-input
          dense
          outlined
          v-model="title"
          requiteal
          placeholder="A descriptive name for your project"
        />
      </div>
    </div>
    <div class="row">
      <div class="col-3">Description*</div>
      <div class="col-9">
        <q-editor min-height="10rem" v-model="description"/>
      </div>
    </div>
    <div class="row">
      <div class="col-3">Tags</div>
      <div class="col-9">
        <div class="flex">
          <!-- <q-chip color="grey-1" icon-right="fas fa-times-circle">Some tag</q-chip>
            <q-btn dense flat>
              <q-icon name="fas fa-plus" size="10px" class="q-mr-sm"/>new tag
            </q-btn>
          <q-input outlined dense v-model="tag" class="q-ml-sm"/>-->
          <vue-tags-input v-model="tag" :tags="tags" @tags-changed="newTags => tags = newTags"/>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-3">Category</div>
      <div class="col-9">
        <q-select
          outlined
          dense
          style="max-width: 300px"
          v-model="category"
          :options="categories"
          requiteal
        />
      </div>
    </div>

    <div class="row">
      <div class="col-3">Collection thumbnail</div>
      <div class="col-9">
        <q-uploader
          square
          auto-upload
          hide-upload-btn
          url="http://localhost:4444/upload"
          label="Upload a square thumbnail for your collection"
          color="grey-4"
          accept=".jpg, image/*"
          style="max-width: 300px; min-height: 300px"
        />
        <div class="text-caption">minimum size 1024x1024px, 1 Mb, jpeg or png format</div>
      </div>
    </div>

    <div class="row q-py-lg">
      <div class="col-12">
        <q-separator/>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <q-btn color="grey" to="/account/collections">Back</q-btn>
      </div>
      <div class="col text-right">
        <q-btn color="grey-4" text-color="white" type="submit">Create collection</q-btn>
      </div>
    </div>
  </q-form>
</template>

<script>
import VueTagsInput from "@johmun/vue-tags-input";

export default {
  components: {
    VueTagsInput
  },
  // name: 'PageName',
  data() {
    return {
      title: "",
      description: "",
      tag: "",
      tags: ["Some Tag"],
      category: "Category",
      categories: [{ label: "Category", value: "category_slug" }],
      license: "MIT",
      licenses: [
        { label: "MIT", value: "mit" },
        { label: "Creative Commons CC-BY-NC", value: "cc-by-nc" }
      ]
    };
  }
};
</script>

<style>
.project-form {
  max-width: 800px;
}
.ti-tag {
  background-color: #ffcc00;
}
</style>