{{#if isShowingNewModal}}
  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
    <h1>New simulator</h1>

    <form class="form-create-record" {{action 'newSimulator' on='submit'}}>
      <table>
        <tr>
          <td>
            <label for="name">Name</label>
          </td>
          <td>
            {{input id='name' placeholder='Enter simulator name' value=name}}
          </td>
        </tr>
        <tr>
          <td>
            <label for="simulatorid">Simulator ID</label>
          </td>
          <td>
            {{input id='simulatorid' type='number' value=simulatorid min='1' max='255'}}
          </td>
        </tr>
        <tr>
          <td>
            <label for="endpoint">Endpoint</label>
          </td>
          <td>
            {{input id='endpoint' placeholder='Enter endpoint' value=endpoint}}
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <button {{action 'cancelNewSimulator'}}>Cancel</button>
            <button type="submit">Create</button>
          </td>
        </tr>
      </table>
    </form>

    {{#if errorMessage}}
      <p><strong>Error:</strong> {{errorMessage}}</p>
    {{/if}}
  {{/modal-dialog}}
{{/if}}

{{#if isShowingDeleteModal}}
  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
    <h1>Delete simulator</h1>

    <p>Are you sure you want to delete the simulator <b><i>{{simulator.name}}</i></b>?</p>

    <button {{action 'cancelDeleteSimulator'}}>Cancel</button>
    <button {{action 'confirmDeleteSimulator'}}>Delete</button>
  {{/modal-dialog}}
{{/if}}

{{#if isShowingEditModal}}
  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
    <h1>New simulator</h1>

    <form class="form-edit-record" {{action 'editSimulator' on='submit'}}>
      <table>
        <tr>
          <td>
            <label for="name">Name</label>
          </td>
          <td>
            {{input id='name' placeholder='Enter simulator name' value=simulatorName}}
          </td>
        </tr>
        <tr>
          <td>
            <label for="simulatorid">Simulator ID</label>
          </td>
          <td>
            {{input id='simulatorid' type='number' value=simulatorid min='1' max='255'}}
          </td>
        </tr>
        <tr>
          <td>
            <label for="endpoint">Endpoint</label>
          </td>
          <td>
            {{input id='endpoint' placeholder='Enter endpoint' value=simulatorEndpoint}}
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <button {{action 'cancelEditSimulator'}}>Cancel</button>
            <button type="submit">Save</button>
          </td>
        </tr>
      </table>
    </form>

    {{#if errorMessage}}
      <p><strong>Error:</strong> {{errorMessage}}</p>
    {{/if}}
  {{/modal-dialog}}
{{/if}}

{{#if isShowingRunningModal}}
  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
    <h1>Simulator running</h1>

    {{simulator.name}}:

    <select onchange={{action "selectRunning" value="target.value"}}>
      <option value=true selected={{eq simulatorRunning true}}>running</option>
      <option value=false selected={{eq simulatorRunning false}}>not running</option>
    </select>

    <br />

    <button {{action 'cancelRunningSimulator'}}>Cancel</button>
    <button {{action 'confirmRunningSimulator'}}>Save</button>
  {{/modal-dialog}}
{{/if}}