<template>
  <page-form
    :title="title"
    @save="$emit('save', localProject)"
  >
    <page-form-input
      label="Titel"
      :value="localProject.title"
      @input="localProject.title = $event"
    />
    <page-form-input
      label="Beschreibung"
      type="textarea"
      :value="localProject.description"
      @input="localProject.description = $event"
    />
    <template #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"
        class="button"
      >
        Abbrechen
      </router-link>
    </template>
  </page-form>
</template>

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

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>
