<div class="modal fade" id="advanced-modal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header border-secondary">
        <h5 class="modal-title" id="advanced-modalLabel">Advanced Settings</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="d-flex gap-2 mb-3">
            <div class="config-option p-3 flex-fill flex-wrap" id="config-fast" data-config="fast" onclick="setScanConfig('fast')">
                <h5 class="mb-1 d-flex align-items-center justify-content-center">
                    <span class="material-symbols-outlined me-1">bolt</span>Fast
                </h5>
                <p class="mb-0">Fast scan, Low accuracy</p>
            </div>
            <div class="config-option p-3 flex-fill" id="config-balanced" data-config="balanced" onclick="setScanConfig('balanced')">
                <h5 class="mb-1 d-flex align-items-center justify-content-center">
                    <span class="material-symbols-outlined me-1">balance</span>Balanced
                </h5>
                <p class="mb-0">Balanced scan, Moderate accuracy</p>
            </div>
            <div class="config-option p-3 flex-fill" id="config-accurate" data-config="accurate" onclick="setScanConfig('accurate')">
                <h5 class="mb-1 d-flex align-items-center justify-content-center">
                    <span class="material-symbols-outlined me-1">target</span>Accurate
                </h5>
                <p class="mb-0">Thorough scan, High accuracy</p>
            </div>
        </div>

        <hr>
        <div class="form-group mt-2">
            <h6>Device Detection</h6>
            <div class="row mt-2">
                <div class="col">
                    <label for="lookup_type">Lookup Type</label>
                    <div class="port-list-wrapper">
                        <select id="lookup_type" class="port-list">
                            <option value="both">ARP + Ping</option>
                            <option value="arp">ARP Only</option>
                            <option value="ping">Ping Only</option>
                        </select>
                    </div>
                </div>
                <div class="col">
                    <label for="t_cnt_isalive">Device Lookup Threads</label>
                    <input type="number" id="t_cnt_isalive" class="form-control">
                </div>
            </div>
        </div>

        <hr>
        <div class="form-group mt-2">
            <h6>Device Detection <span class=text-color>/</span> Ping Settings</h6>
            <div class="row">
                <div class="col-3">
                    <label for="ping_attempts" class="form-label">Ping Attempts</label>
                    <input type="number" id="ping_attempts" class="form-control">
                </div>
                <div class="col-1 descriptor">X</div>
                <div class="col-3">
                    <label for="ping_ping_count" class="form-label">Ping Count</label>
                    <input type="number" id="ping_ping_count" class="form-control">
                </div>
                <div class="col-1 descriptor">=</div>
                <div class="col-3">
                    <label for="total-ping-attempts">Max pings per device</label>
                    <input type="number" id="total-ping-attempts" class="form-control" readonly>
                </div>
            </div>
            <div class="row mt-2">
                <div class="col">
                    <label for="ping_timeout" class="form-label">Timeout Per Ping (sec)</label>
                    <input type="number" step="0.1" id="ping_timeout" class="form-control">
                </div>
                <div class="col">
                    <label for="ping_retry_delay" class="form-label">Delay Between Attempts (sec)</label>
                    <input type="number" step="0.1" id="ping_retry_delay" class="form-control">
                </div>
            </div>
        </div>

        <hr>

        <div class="form-group mt-2">
            <h6>Device Detection <span class=text-color>/</span> ARP Settings</h6>
            <div class="row">
                <div class="col">
                    <label for="arp_attempts" class="form-label">Attempts</label>
                    <input type="number" id="arp_attempts" class="form-control">
                </div>
                <div class="col">
                    <label for="arp_timeout" class="form-label">Timeout</label>
                    <input type="number" step="0.1" id="arp_timeout" class="form-control">
                </div>
            </div>
        </div>

        <hr>

        <div class="form-group mt-2">
            <h6>Port Testing</h6>
            <div class="row">
                <div class="col-3">
                    <label for="t_cnt_port_scan">Device Scan Threads</label>
                    <input type="number" id="t_cnt_port_scan" class="form-control">
                </div>
                <div class="col-1 descriptor">X</div>
                <div class="col-3">
                    <label for="t_cnt_port_test">Port Test Threads</label>
                    <input type="number" id="t_cnt_port_test" class="form-control">
                </div>
                <div class="col-1 descriptor">=</div>
                <div class="col-3">
                    <label for="total-port-tests">Total concurrent tests</label>
                    <input type="number" id="total-port-tests" class="form-control" readonly>
                </div>
            </div>
            <div class="row mt-2">
                <div class="col">
                    <label for="port_list">Port List</label>
                    <div class="port-list-wrapper">
                        <select id="port_list" class="port-list">
                            <option value="both">ARP + Ping</option>
                            <option value="arp">ARP Only</option>
                            <option value="ping">Ping Only</option>
                        </select>
                    </div>
                </div>
            </div>
        <hr>

        <div class="form-group mt-2">
            <h6>Stages</h6>
            <div class="form-check" 
                data-bs-toggle="tooltip"
                data-bs-placement="right"
                title="Find Devices using ARP or Ping (always on)"
            >
                <input class="form-check-input" disabled type="checkbox" id="task_find_devices" checked>
                <label class="form-check-label" for="task_find_devices">Find Devices</label>
            </div>
            <div class="form-check" 
                data-bs-toggle="tooltip"
                data-bs-placement="right"
                title="Find open ports on devices"
            >
                <input class="form-check-input" type="checkbox" id="task_scan_ports">
                <label class="form-check-label" for="task_scan_ports">Scan Ports</label>
            </div>
            <div class="form-check" 
                data-bs-toggle="tooltip"
                data-bs-placement="right"
                title="Determine services running on open ports (no supporting UI yet)"
            >
                <input class="form-check-input" type="checkbox" id="task_scan_port_services">
                <label class="form-check-label" for="task_scan_port_services">Scan Port Services</label>
            </div>
        </div>

        </div>

      </div>
      <div class="modal-footer border-secondary">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>