{# Outside the live-updating regions, so polling can't close a menu or wipe a half-typed form. #}
<dialog id="drawer" class="drawer" aria-label="Machine details"><div id="drawer-body"></div></dialog>

<div id="popmenu" class="popmenu" role="menu" hidden>
  <a data-m="view" href="#" role="menuitem">{{ icon('eye', 15) }}View details</a>
  <button type="button" data-m="force" role="menuitem">{{ icon('off', 15) }}Force disconnect</button>
  <button type="button" data-m="retire" role="menuitem">{{ icon('archive', 15) }}Retire</button>
  <button type="button" data-m="reactivate" role="menuitem">{{ icon('check', 15) }}Put back in service</button>
  <hr>
  <button type="button" data-m="delete" class="danger" role="menuitem">{{ icon('trash', 15) }}Delete</button>
</div>

<dialog id="delete-dialog" class="modal" aria-labelledby="delete-title">
  <div class="modal-head">
    <span class="modal-icon">{{ icon('trash', 18) }}</span>
    <h2 id="delete-title" data-delete-title></h2>
  </div>
  <p>This can't be undone. Past sessions stay in history and the audit log. The infotainment target record is deleted too, so move it first if it's staying in the lab.</p>
  {% if winrm_ready %}
  <label class="check-row">
    <input type="checkbox" data-delete-unlock checked>
    <span>
      <b>Restore normal Remote Desktop</b>
      <small>Removes the firewall lock, so the PC isn't left unreachable. Untick this if the PC no longer exists.</small>
    </span>
  </label>
  {% endif %}
  <div class="notice bad" data-delete-error hidden></div>
  <div class="modal-foot">
    <button type="button" class="btn btn-ghost" data-close-dialog>Cancel</button>
    <button type="button" class="btn btn-danger" data-delete-confirm>Delete</button>
  </div>
</dialog>

<dialog id="force-dialog" class="modal" aria-labelledby="force-title">
  <div class="modal-head">
    <span class="modal-icon">{{ icon('off', 18) }}</span>
    <h2 id="force-title">Force disconnect</h2>
  </div>
  <p data-force-label></p>
  <form method="post" action="" style="margin-top:14px">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <label class="field">
      <span class="field-label">Reason</span>
      <input name="reason" required autofocus placeholder="Recorded in the audit log">
    </label>
    <div class="modal-foot">
      <button type="button" class="btn btn-ghost" data-close-dialog>Cancel</button>
      <button type="submit" class="btn btn-danger">Disconnect</button>
    </div>
  </form>
</dialog>