<template>
  <page-form :title="title" @save="$emit('save', localProject)">
    <page-form-input label="Titel" v-model="localProject.title" />
    <page-form-input label="Beschreibung" type="textarea" v-model="localProject.description" />
    <template slot="footer">
      <button
        :class="{ 'button--disabled': !formValid }"
        :disabled="!formValid"
        type="submit"
        class="button button--primary"
        data-cy="save-project-button"
      >
        Speichern
      </button>
      <router-link to="/portfolio" tag="button" class="button"> Abbrechen </router-link>
    </template>
  </page-form>
</template>

<script>
import PageForm from '@/components/page-form/PageForm';
import PageFormInput from '@/components/page-form/PageFormInput';

export default {
  props: {
    project: {
      type: Object,
      default: () => {},
    },
    title: {
      type: String,
      default: 'Neues Projekt',
    },
  },

  components: {
    PageForm,
    PageFormInput,
  },

  data() {
    return {
      localProject: Object.assign({}, this.project),
    };
  },

  computed: {
    formValid() {
      return this.localProject.title;
    },
  },
};
</script>

<style scoped lang="scss">
@import '~styles/helpers';

.project-form {
  @include widget-shadow;
}
</style>
