<template>
  <page-form
    title="Neues Projekt"
    @save="$emit('save', localProject)">
    <page-form-input
      v-model="localProject.title"
      label="Titel"/>
    <page-form-input
      v-model="localProject.description"
      label="Beschreibung"
      type="textarea"/>
    <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';
  import ColorChooser from '@/components/ColorChooser';

  export default {
    props: ['project'],

    components: {
      PageForm,
      PageFormInput,
      ColorChooser
    },

    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>
