<div ...attributes data-state={{this.stateStrings}}>

  <fieldset>

    <legend>Modes</legend>

    <div>
      {{#let (concat this.guid "-addressFamily") as |id|}}
        <label for={{id}}>Address Family</label>
        <select
          name="addressFamily"
          id={{id}}
          {{on "change" (fn this.transition "PICK_FAMILY")}}
          {{ref this "family"}}
        >
          <option value="none" disabled={{this.isNoneDisabled}}>None</option>
          <option value="ip4">IP4</option>
          <option value="ip6">IP6</option>
        </select>
      {{/let}}
    </div>

    <div>
      {{#let (concat this.guid "-protocol") as |id|}}
        <label for={{id}}>Protocol</label>
        <select
          name="protocol"
          id={{id}}
          {{on "change" (fn this.transition "PICK_PROTOCOL")}}
          {{ref this "protocol"}}
        >
          <option value="any" selected>Any</option>
          <option value="icmp4">ICMPv4</option>
          <option value="icmp6">ICMPv6</option>
          <option value="tcp">TCP</option>
          <option value="udp">UDP</option>
        </select>
      {{/let}}
    </div>

  </fieldset>

  <fieldset data-hide="protocol.other protocol.any">

    <legend>ICMP</legend>

    {{#let (concat this.guid "-icmpType") as |id|}}
      <label for={{id}}>Type</label>
      <input type="number" id={{id}} name="icmpType">
    {{/let}}

    {{#let (concat this.guid "-icmpCode") as |id|}}
      <label for={{id}}>Code</label>
      <input type="number" id={{id}} name="icmpCode">
    {{/let}}

  </fieldset>

  <fieldset class="networkingFields">

    <legend>Networking</legend>

    <div data-hide="addressFamily.none">
      {{#let (concat this.guid "-adress") as |id|}}
        <label for={{id}}>Address</label>
        <input type="text" id={{id}} name="address" {{ref this "address"}}>
        <span class="hint-text" data-hide="addressFamily.ip6">
          (E.x. <code>192.168.0.1</code>)
        </span>
        <span class="hint-text" data-hide="addressFamily.ip4">
          (E.x. <code>::c0a8:0001</code>)
        </span>
      {{/let}}
    </div>

    <div data-hide="protocol.icmp4 protocol.icmp6 protocol.any">
     {{#let (concat this.guid "-port") as |id|}}
        <label for={{id}}>port</label>
        <input type="number" id={{id}} name="port">
      {{/let}}
    </div>

  </fieldset>

  <fieldset>
    <legend>Machine state(s)</legend>
    <code><output value={{this.stateList}}></output></code>
  </fieldset>

</div>