<template>
  <div id="custom_posts" class="component component-posts">
    <div class="top">
      <h2 class="title">Posts</h2>
      <p class="subtitle">Manage appearance of posts archive page.</p>
    </div>
    <div class="content">
      <div class="posts-setting-container">
        <div class="label">
          Posts Title
        </div>
        <div class="input">
          <input type="text" v-model="title" />
        </div>
      </div>
      <div class="posts-setting-container">
        <div class="label">
          Posts Description
        </div>
        <div class="input">
          <textarea v-model="description"></textarea>
        </div>
      </div>
      <div class="posts-setting-container">
        <div class="label">
          Posts Placeholder Images
        </div>
        <div class="input">
          <image-selector v-model="placeholderImages" multi />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: [ "postsTitle", "postsDescription", "postsPlaceholderImages" ],
    computed: {
      title: {
        get() {
          return (!!this.postsTitle) ? this.postsTitle.value : undefined;
        },
        set(val) {
          this.$emit("update", { category: "Posts", prop: "postsTitle", value: val });
        }
      },
      description: {
        get() {
          return (!!this.postsDescription) ? this.postsDescription.value : undefined;
        },
        set(val) {
          this.$emit("update", { category: "Posts", prop: "postsDescription", value: val });
        }
      },
      placeholderImages: {
        get() {
          return (!!this.postsPlaceholderImages) ? this.postsPlaceholderImages.value : undefined;
        },
        set(val) {
          this.$emit("update", { category: "Posts", prop: "postsPlaceholderImages", value: val });
        }
      },
    }
  }
</script>