<template>
  <form class="folder-rename-form">
    <div class="form-group">
      <input
          ref="title"
          :value="title"
          type="text"
          required
          class="form-control"
          id="rename-title"
      >
    </div>
    <div class="form-group d-flex justify-content-end">
      <button
          :disabled="loading"
          @click="$emit('closeForm')"
          type="button"
          class="btn btn-default">انصراف
      </button>

      <button
          type="button"
          class="btn btn-outline-primary"
          :disabled="loading"
          @click.prevent="save()"
      >
        <the-button-loading
            v-if="loading"
            :style="{ transform: 'scale(0.5)' }"
        ></the-button-loading>
        ذخیره
      </button>
    </div>
  </form>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '',
      required: true
    },
    loading: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {}
  },
  methods: {
    save() {
      this.$emit('saveChanges', this.$refs.title.value)
    }

  }
};
</script>

<style scoped lang="scss">
.folder-rename-form {
  width: 100%;

  .form-control {
    margin-bottom: 20px;
    background: white;
    border: 1px solid #f1f1f1;
    border-radius: 10px;
    height: 40px;
    display: flex;
    font-size: 15px;
    align-items: center;
    padding-right: 25px;
    padding-left: 25px;
    color: #444444;
    box-shadow: 0px 2px 10px 2px #f1f1f1;
  }
}
</style>