welcome.html

<template>
  <section class="au-animate" if.bind="!haveName">
    <h2>Hello, Aurelia-Dragula World!</h2>
    <form role="form" submit.delegate="submit()">
      <div class="form-group">
        <label for="fn">Please enter your name:</label>
        <input type="text" value.bind="firstName" class="form-control" id="fn" placeholder="first name" autofocus>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </section>
  <section if.bind="haveName" class="au-animate playpen">
    <dragula-and-drop direction.bind="dragDirection" drop-fn.call="drop(item, target, source, sibling, itemVM, siblingVM)"></dragula-and-drop>
    <div class="drag-source drop-target letters-container">
      <compose view-model.bind="letter" repeat.for="letter of nameLetters" data-id.one-time="letter.id"></compose>
    </div>
  </section>
  <section if.bind="winner" class="winners-circle">
    <div class="winner-text">Congratulations, you can spell your own name!</div>
    <button type="button" class="btn btn-default reset-btn" click.delegate="reset()">reset</button>
  </section>
</template>