<template>
  <div>
    <div class="form-group mb-3">
      <label
        v-if="id < 1"
        class="col-4"
        >Tworzysz nowy szablon</label
      >
      <label
        v-if="id > 0"
        class="col-4"
        >Nadpiszesz istniejacy szablon</label
      >
      <div class="col-8">
        <b
          v-if="id > 0"
          class=""
          >{{ name2 }}</b
        >
      </div>
    </div>
    <div class="form form-group mb-3">
      <label class="w-100">Wyszukaj istniejący lub zapisz jako nowy</label>
      <select
        v-model="itemselected"
        @change="changeSelect"
        class="form-control"
      >
        <option :value="{ new: 1 }">Stwórz nowy szablon</option>
        <option
          :key="ii"
          v-for="(item, ii) in items"
          :value="item"
        >
          Nadpisz: {{ item.name }}
        </option>
      </select>
    </div>
    <div v-show="itemselected.new == 1">
      <div class="form form-group mb-3">
        <label class="w-100">Nazwa szablonu</label
        ><input
          @change="change"
          class="form-control"
          type="text"
          v-model="name"
        />
      </div>
      <div class="form form-group mb-3">
        <label class="w-100">Opis</label
        ><input
          @change="change"
          class="form-control"
          type="text"
          v-model="description"
        />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  created() {
    this.getPost();
  },
  data: function () {
    return {
      items: [],
      itemselected: { new: 1 },
      name: "",
      description: "",
      id: 0,
    };
  },
  methods: {
    change() {
      this.$emit("update:modelValue", {
        id: this.id,
        name: this.name,
        description: this.description,
      });
    },
    changeSelect() {
      this.id = this.itemselected.id;
      this.name = this.itemselected.name;
      this.name2 = this.itemselected.naem;
      this.description = this.itemselected.description;
      this.change();
    },
    getPost() {
      if (this.$pagebuilder.axios) {
        this.$pagebuilder.axios.get("api/v1/pagebuilder/template").then((response) => {
          this.items = response.data.data;
        });
      } else {
        console.error("NO AXIOS INSTACE PROVIDED TO PAGEBUILDER");
      }
    },
  },
};
</script>
