<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>

        <div class="config-sections">
            <div class="form-group mt-2 config-section">
                <h6>Device Detection</h6>
                <div class="row mt-2">
                    <div class="col">
                        <label class="mb-1">Lookup Type</label>
                        <div id="lookup-type-group" class="d-flex flex-wrap gap-3">
                            <div class="form-check">
                                <input class="form-check-input lookup-type-input" type="checkbox" id="lookup_icmp" value="ICMP">
                                <label class="form-check-label" for="lookup_icmp">ICMP</label>
                            </div>
                            <div class="form-check">
                                <!-- ARP lookup does not always work. Depends on host system -->
                                <input
                                class="form-check-input lookup-type-input"
                                type="checkbox"
                                id="lookup_arp_lookup"
                                value="ARP_LOOKUP"
                                {{ '' if is_arp_supported else 'disabled' }}
                                />
                                <label class="form-check-label" for="lookup_arp_lookup">
                                    ARP Lookup
                                </label>
                                {% if not is_arp_supported %}
                                    <span
                                        class="material-symbols-outlined arp-help-ico"
                                        data-bs-toggle="tooltip"
                                        data-bs-placement="top"
                                        title="ARP lookup is not supported on this system, click for more info"
                                        onclick="window.open('https://github.com/mdennis281/LANscape/blob/main/support/arp-issues.md', '_blank')"
                                    >
                                        help
                                    </span>
                                {% endif %}
                            </div>
                            <div class="form-check">
                                <input class="form-check-input lookup-type-input" type="checkbox" id="lookup_icmp_then_arp" value="ICMP_THEN_ARP">
                                <label class="form-check-label" for="lookup_icmp_then_arp">ICMP then ARP Cache</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input lookup-type-input" type="checkbox" id="lookup_poke_then_arp" value="POKE_THEN_ARP">
                                <label class="form-check-label" for="lookup_poke_then_arp">Poke then ARP Cache</label>
                            </div>
                        </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>

            <div id="section-ping" class="form-group mt-2 config-section">
                <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>

            <div id="section-arp" class="form-group mt-2 config-section">
                <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>

            <div id="section-arp-cache" class="form-group mt-2 div-hide config-section">
                <h6>Device Detection <span class=text-color>/</span> ARP Cache Settings</h6>
                <div class="row">
                    <div class="col">
                        <label for="arp_cache_attempts" class="form-label">Attempts</label>
                        <input type="number" id="arp_cache_attempts" class="form-control">
                    </div>
                    <div class="col">
                        <label for="arp_cache_wait_before" class="form-label">Wait Before (sec)</label>
                        <input type="number" step="0.1" id="arp_cache_wait_before" class="form-control">
                    </div>
                </div>
            </div>

            <div id="section-poke" class="form-group mt-2 div-hide config-section">
                <h6>Device Detection <span class=text-color>/</span> Poke Settings</h6>
                <div class="row">
                    <div class="col">
                        <label for="poke_attempts" class="form-label">Attempts</label>
                        <input type="number" id="poke_attempts" class="form-control">
                    </div>
                    <div class="col">
                        <label for="poke_timeout" class="form-label">Timeout (sec)</label>
                        <input type="number" step="0.1" id="poke_timeout" class="form-control">
                    </div>
                </div>
            </div>

            <div class="form-group mt-2 config-section">
                <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>
                <div class="row mt-2">
                    <div class="col">
                        <label for="port_scan_timeout" class="form-label">Port Timeout (sec)</label>
                        <input type="number" step="0.1" id="port_scan_timeout" class="form-control">
                    </div>
                    <div class="col">
                        <label for="port_scan_retries" class="form-label">Retries</label>
                        <input type="number" id="port_scan_retries" class="form-control">
                    </div>
                    <div class="col">
                        <label for="port_scan_retry_delay" class="form-label">Retry Delay (sec)</label>
                        <input type="number" step="0.1" id="port_scan_retry_delay" class="form-control">
                    </div>
                </div>
            </div>

            <div id="section-service-scan" class="form-group mt-2 config-section div-hide">
                <h6>Service Scanning</h6>
                <div class="row">
                    <div class="col">
                        <label for="service_lookup_type" class="form-label">Strategy</label>
                        <div class="service-strategy-wrapper">
                            <select id="service_lookup_type" class="service-strategy">
                                <option value="LAZY">Lazy (few probes)</option>
                                <option value="BASIC">Basic (common probes)</option>
                                <option value="AGGRESSIVE">Aggressive (all probes)</option>
                            </select>
                        </div>
                    </div>
                    <div class="col">
                        <label for="service_timeout" class="form-label">Timeout (sec)</label>
                        <input type="number" step="0.1" id="service_timeout" class="form-control">
                    </div>
                    <div class="col">
                        <label for="service_max_concurrent_probes" class="form-label">Max Concurrent Probes</label>
                        <input type="number" id="service_max_concurrent_probes" class="form-control">
                    </div>
                </div>
                <div class="row mt-1">
                    <div class="col">
                        <small class="text-secondary">Attempts service identification on open ports using selected strategy.</small>
                    </div>
                </div>
            </div>

            <div class="form-group mt-2 config-section">
                <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>
