<template>

  <style>
    label {
      display: block;
      cursor: pointer;
    }
    .taco-image {
      position: absolute;
      max-height: 100px;
      max-width: 100px;
      z-index: -1;
    }
  </style>

  <require from="./modalCustomElement"></require>

  <button click.delegate="openModal()">Select your favorite food</button>

  <modal view-model.ref="testModal" changed.delegate="showFavoriteFood()">

    <div slot="header">
      <b>What is your favorite food?</b>
    </div>

    <form>
      <label>
        <input type="radio" checked.bind="favoriteFood" value="one taco" />
        One Taco
      </label>
      <label>
        <input type="radio" checked.bind="favoriteFood" value="two tacos" />
        Two Tacos
      </label>
      <label>
        <input type="radio" checked.bind="favoriteFood" value="three tacos" />
        Three Tacos
      </label>
    </form>

  </modal>
</template>