{% extends "base.html" %}

{% block content %}
<div id="header">
      <!-- Header and Scan Submission Inline -->
    <div class="d-flex justify-content-between align-items-center flex-nowrap">
        <a href="/" class="text-decoration-none" aria-label="Go to homepage">
            <h1 class="title">
                <span>LAN</span>scape 
            </h1>
        </a>
        <!-- Right side: settings + form -->
        <div class="d-flex align-items-center justify-content-end ms-auto">
            <form id="scan-form" class="d-flex align-items-center">
                <div class="form-group me-2">
                    <!-- Above subnet input -->
                    <div class="label-container">
                        <label for="subnet">Subnet:</label>
                        <div id="subnet-info"></div>
                    </div>
                    <!-- Subnet input with dropdown -->
                    <div class="input-group">
                        <button
                            type="button"
                            id="settings-btn"
                            class="btn btn-secondary start material-symbols-outlined"
                            data-bs-toggle="tooltip"
                            data-bs-placement="bottom"
                            title="Advanced scan settings"
                        >
                            settings
                        </button>
                        <input type="text" id="subnet" name="subnet" class="form-control" value="{{ subnet }}" placeholder="Enter subnet">
                        <button class="btn btn-secondary dropdown-toggle end" type="button" id="subnet-dropdown" data-bs-toggle="dropdown" aria-expanded="false"></button>
                        <ul class="dropdown-menu" aria-labelledby="subnet-dropdown" id="dropdown-list">
                            {% for subnet_option in alternate_subnets %}
                            <li><a class="dropdown-item" href="#">{{ subnet_option['subnet'] }}</a></li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
                <button type="submit" id="scan-submit" class="btn btn-primary">Scan</button>
            </form>
        </div>
    </div>

    <div id="scan-progress-bar"></div>
</div>

<!-- Advanced Settings Modal -->
{% include 'scan/config.html' %}


<div id="content">
    <div class="container-fluid my-4">
        <!-- ARP Error -->
        <div id="arp-error" class="{{ 'div-hide' if is_arp_supported else '' }}">
            <span>
                Unable to use ARP lookup. Device discovery is degraded.
                <a target="_blank" href="https://github.com/mdennis281/LANscape/blob/main/support/arp-issues.md">Steps to fix</a>
            </span>
        </div>
        <!-- Scan Results -->
        <div id="scan-results" class="div-hide">
            <div class="d-flex justify-content-between">
                <h2>Scan Results</h2>
                <div id="scan-actions">
                    <a href="" id="export-link">
                        <span 
                            class="material-symbols-outlined secondary-icon-btn"
                            data-bs-toggle="tooltip" 
                            data-bs-placement="top" 
                            title="Export scan to json">
                            ios_share
                        </span>
                    </a>
                </div>
            </div>
            
            {% include 'scan/overview.html' %}
            <input type="text" id="filter" placeholder="Filter results" class="form-control mb-3 mt-3">
            <div class="table-frame-container">
                <iframe id="ip-table-frame" src=""></iframe>
            </div>
        </div>
        <div id="no-scan">
            <h2>No results to show</h2>
            <p>Submit a scan above</p>
        </div>
    </div>
</div>


<script src="{{ url_for('static', filename='js/main.js') }}"></script>
<script src="{{ url_for('static', filename='js/subnet-info.js') }}"></script>
<script src="{{ url_for('static', filename='js/subnet-selector.js') }}"></script>
<script src="{{ url_for('static', filename='js/scan-config.js') }}"></script>
{% endblock %}