{% extends "base.html" %}

{% block content %}
<div id="header">
      <!-- Header and Scan Submission Inline -->
    <div class="d-flex justify-content-between align-items-center flex-wrap">
        <a href="/" class="text-decoration-none" aria-label="Go to homepage">
            <h1 class="title">
                <span>LAN</span>scape 
            </h1>
        </a>
        <!-- Right side: settings + form -->
        <form id="scan-form" class="d-flex align-items-end">
            <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"
                        data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        title="Advanced scan settings"
                    >
                        <i class="fa-solid fa-gear"></i>
                    </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 id="scan-progress-bar"></div>
</div>

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


<div id="content">
    <div class="container-fluid my-4">
        <!-- Scan Results -->
        <div id="scan-results" class="div-hide">
            <div class="d-flex justify-content-between">
                <h2>Scan Results</h2>
                <div id="scan-actions" class="d-flex align-items-center gap-2">
                    <div id="warnings-badge" class="div-hide"></div>
                    <a href="" id="export-link">
                        <i 
                            class="fa-solid fa-upload secondary-icon-btn"
                            data-bs-toggle="tooltip" 
                            data-bs-placement="top" 
                            title="Export scan to json">
                        </i>
                    </a>
                </div>
            </div>
            
            <!-- Warnings Modal -->
            <div class="modal fade" id="warningsModal" tabindex="-1" aria-labelledby="warningsModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                    <div class="modal-content" style="background-color: var(--primary-bg); border: 1px solid var(--border-color);">
                        <div class="modal-header" style="border-bottom: 1px solid var(--warning-accent);">
                            <h6 class="modal-title" id="warningsModalLabel" style="color: var(--warning-accent);">
                                <i class="fa-solid fa-triangle-exclamation me-2"></i>
                                Scan Warnings
                            </h6>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body" id="warnings-modal-body" style="color: var(--text-color);">
                        </div>
                        <div class="modal-footer" style="border-top: 1px solid var(--border-color);">
                            <a href="https://github.com/mdennis281/LANscape/issues" target="_blank" class="btn btn-sm" style="color: var(--info-accent); border: 1px solid var(--info-accent);">
                                <i class="fa-brands fa-github me-1"></i> Report
                            </a>
                            <button type="button" class="btn btn-sm" style="background: var(--secondary-accent); color: var(--text-color);" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </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 %}



