<template>
  <require from="./autocomplete"></require>
  <form>
    <label class="form-component">
      Country:<br/>
      <autocomplete service.bind="suggestionService.country"
                    value.bind="model.country"
                    placeholder="Enter country..."
                    change.delegate="model.city = null">
      </autocomplete>
    </label>

    <label class="form-component">
      City${model.country ? ' (' + countryIndex[model.country].length + ' choices)' : ''}:<br/>
      <autocomplete service.bind="suggestionService.city"
                    value.bind="model.city"
                    placeholder="Enter city...">
        <template replace-part="suggestion">
          <span style="font-style: italic">${suggestion}</span>
        </template>
      </autocomplete>
    </label>
  </form>
</template>