<a
  class="route-card"
  onclick={{@onclick}}
  id={{@item.ID}}
  ...attributes
>
  <header class={{if (eq this.path.value '/') 'short'}}>
{{#if (gt @item.Definition.Match.HTTP.Methods.length 0) }}
    <ul class="match-methods">
      {{#each @item.Definition.Match.HTTP.Methods as |item|}}
        <li>{{item}}</li>
      {{/each}}
    </ul>
{{/if}}
    <dl>
      <dt>
        {{this.path.type}}
      </dt>
      <dd>
        {{this.path.value}}
      </dd>
    </dl>
  </header>
{{#if (gt @item.Definition.Match.HTTP.Header.length 0) }}
  <section class="match-headers">
    <header {{tooltip 'Header'}}>
      <h4>Headers</h4>
    </header>
    <dl>
  {{#each @item.Definition.Match.HTTP.Header as |item|}}
      <dt>
        {{item.Name}}
      </dt>
      <dd>
        {{route-match item}}
      </dd>
  {{/each}}
    </dl>
  </section>
{{/if}}
{{#if (gt @item.Definition.Match.HTTP.QueryParam.length 0) }}
  <section class="match-queryparams">
    <header {{tooltip 'Query Params'}}>
      <h4>Query Params</h4>
    </header>
    <dl>
  {{#each @item.Definition.Match.HTTP.QueryParam as |item|}}
      <dt>
        {{item.Name}}
      </dt>
      <dd>
        {{route-match item}}
      </dd>
  {{/each}}
    </dl>
  </section>
{{/if}}
</a>
