<template>

<div class="step" v-bind:class="{ image: hasImage }">
  <img v-if="hasImage" img :src="step.image" :alt="step.image">
  <div class="step-content">
    <span v-if="!hasImage">Feedback</span>
    <h4 class="step-title">{{step.title}}</h4>

    <plain v-if="step.type == 'plain'" v-bind:step="step" v-bind:last-step="lastStep"/>
    <text-area v-else-if="step.type == 'textarea'" v-bind:step="step" v-bind:last-step="lastStep"/>
    <radio-group v-else-if="step.type == 'radiogroup'" v-bind:step="step" v-bind:last-step="lastStep"/>
    <field-set v-else-if="step.type == 'fieldset'" v-bind:step="step" v-bind:last-step="lastStep"/>
    <div v-else></div>
  </div>
</div>

</template> <script>

import TextArea from './TextArea.vue'; import RadioGroup from './RadioGroup.vue'; import Plain from './Plain.vue'; import FieldSet from './FieldSet.vue';

export default {

props: ['step', 'lastStep'],
components: { TextArea, RadioGroup, Plain, FieldSet },
computed: {
  hasImage: function() {
    return this.step.image !== undefined;
  }
}

} </script> <style scoped> .step {

display: flex;

} .image {

padding: 0px;

} .step-title {

white-space: pre-line;

} .step-content {

flex-direction: column;
padding: 32px;
max-width: 580px;

} img {

@media only screen and (max-width: 576px) {
  display: none;
};

} </style>