<script lang="ts">
	export let name: string;
  export let email: string;
  export let slug: string;
  export let bio: string;

  function generateAuthor(e) {
    e.preventDefault()
    alert(`Name: ${name} email, ${email} has slug ${slug} and bio ${bio}`)
  }
</script>

<main>
	<h1>Ghost User Maker</h1>
	<p>Enter your new author details below. Once done, click on the "Generate" button to receive a special file that you can import to Ghost to add the author details to the "staff". This will let you select them as the author when publishing a post.</p>

  <form>
    <fieldset>

      <legend>{name || 'Author'}</legend>

      <div>
        <label for="input-name">Name</label>
        <input id="input-name" name="name" bind:value={name}/>
      </div>

      <div>
        <label for="input-email">Email</label>
        <input id="input-email" name="email" type="email" bind:value={email}/>
      </div>

      <div>
        <label for="input-slug">Slug</label>
        <input id="input-slug" name="slug" bind:value={slug}/>
      </div>

      <div>
        <label for="input-bio">Bio</label>
        <input id="input-bio" name="bio" bind:value={bio}/>
      </div>

      <button on:click={generateAuthor}>Generate</button>

    </fieldset>
  </form>
</main>

<style>
	main {
		text-align: center;
		padding: 1em;
		max-width: none;
		margin: 0 auto;
	}

  fieldset label {
    display: inline-block;
  }

	@media (min-width: 640px) {
		main {
			max-width: 480px;
    }
	}
</style>
