<div class="clearfix mxn2">
  <div class="col col-8 px2">
    <div class="px2">
      <form {{action "search" on="submit"}}>
        {{input value=queryField classNames="field-light half-width mb0" placeholder='Search for a character...'}}
        <input type="submit" value="Search" class="button ml2" />
      </form>
    </div>
  </div>
  <div class="col col-4 px2">
    <div class="px2 right">
      <h3>{{meta.total}} characters</h3>
    </div>
  </div>
</div>
<div class="clearfix mxn2">
  <div class="col col-12 p2 mx-auto">
    <div class="flex flex-wrap flex-stretch p1">
      {{#each model as |character|}}
        {{characters/character-card  character=character}}
      {{/each}}
    </div>
  </div>
</div>
<div class="clearfix">
  <div class="col col-12 mb4 center">
    <button class="button button-big button-next-page" {{action 'next'}}>Next &gt;</button>
  </div>
</div>

<div class="clearfix mxn2">
  <div class="col col-8 px2">
    <div class="px2">
      <form {{action "search" on="submit"}}>
        {{input value=queryField classNames="field-light half-width mb0" placeholder='Search for a character...'}}
        <input type="submit" value="Search" class="button ml2" />
      </form>
    </div>
  </div>
  <div class="col col-4 px2">
    <div class="px2 right">
      <h3>{{meta.total}} characters</h3>
    </div>
  </div>
</div>
<div class="clearfix mxn2">
  <div class="col col-12 p2 mx-auto">
    <div class="flex flex-wrap flex-stretch p1">
      {{#each model as |character|}}
        {{characters/character-card  character=character}}
      {{else}}
        <p>No superheroes to see at the moment...</p>
      {{/each}}
    </div>
  </div>
</div>
<div class="clearfix">
  <div class="col col-12 mb4 center">
    <button class="button button-big button-next-page" {{action 'next'}}>Next &gt;</button>
  </div>
</div>

Add message if no characters returned
Add message if no characters returned
