<template>
  <div class="page-form__page">
    <form
      class="page-form"
      @submit.prevent="$emit('save')">
      <div class="page-form__content">
        <h1
          class="page-form__heading"
          data-cy="form-title">{{ title }}</h1>
        <slot/>
      </div>
      <div class="page-form__footer">
        <slot name="footer"/>
      </div>
    </form>

  </div>
</template>

<script>
  export default {
    props: ['title']
  };
</script>

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

  .page-form {
    width: 710px;
    min-height: 760px;
    max-height: 100%;
    box-sizing: border-box;
    background-color: $color-white;
    border-radius: $default-border-radius;
    display: flex;
    flex-direction: column;
    @supports (display: grid) {
      display: grid;
    }
    grid-template-rows: 1fr 55px;

    @include widget-shadow;

    margin: $large-spacing 0;

    &__page {
      display: flex;
      justify-content: center;
      @supports (display: grid) {
        display: grid;
      }
      justify-items: center;
      align-items: center;
      height: 100%;
    }

    &__content {
      padding: $medium-spacing;
    }

    &__heading {
      @include heading-2;
    }

    &__footer {
      border-top: 1px solid $color-silver-light;
      padding: $small-spacing $medium-spacing;
    }
  }
</style>
