export default {
	name: "CookbookForm",
	setup() {
		const { ref } = Vue;

		const title = ref("");
		const description = ref("");
		const nature = ref("");
		const logs = ref([""]);
		const who = ref("");

		return { title, description, nature, logs, who };
	},
	template: `

    <section class='recipe'>
      <label for="title">Title</label>
      <input type="text" v-model='title'/>

      <label for="description">Description</label>
      <textarea v-model="description"></textarea>
 
      <label for="nature">Nature of the input</label>
      <input type="text" v-model="nature" />

      
      <label for="log">Process Log</label>
    
      <textarea v-model="logs[index]" v-for="(log, index) in logs" :key="index"></textarea>
      <button @click="logs.push('')">Add Step</button>

      <label for="who">Who</label>
      <input type="text" v-model="who" />
    </section>

    <dl>
      <dt>Title</dt>
      <dd>{{title}}</dd>     

      <dt>Description</dt>
      <dd>{{description}}</dd>

      <dt>Nature</dt>
      <dd>{{nature}}</dd>

      <dt>Log</dt>
      <dd>
        <ul>
          <li v-for="log in logs">{{log}}</li>
        </ul>
      </dd>
            
      <dt>Who</dt>
      <dd>{{who}}</dd>
    </dl>
  `,
};