<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Z Stigs</title>
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
    <header>
        <h1>Z Stigs</h1>
        <div class="tab-bar">
            <ul id="tabs">
                <li class="tab active" data-tab="tab-1">Main</li>
                <li class="tab" data-tab="all-stigs-tab">All STIGs</li>
                <li class="tab" data-tab="host-review-tab">Host Review</li>
                <li class="tab" data-tab="search-tab">Search</li>
            </ul>
        </div>
        <div class="upload-section">
            <input
                    type="file"
                    id="fileInput"
                    multiple
                    accept=".ckl"
                    style="display: none;"
            />
            <button id="uploadButton" class="upload-button">Upload CKL Files</button>
            <button id="saveButton" class="save-button">Save</button>
        </div>
    </header>

    <main class="main-layout">
        <!-- Main Tab -->
        <div id="tab-1" class="tab-content active">
            <div class="drop-file-area" id="dropFileArea">
                <p>Click to Upload</p>
            </div>
        </div>

        <!-- All STIGs Tab -->
        <div id="all-stigs-tab" class="tab-content">
            <section class="left-section">
                <div id="all-stigs-cat-filter-container">
                    <button class="cat-filter-button" data-cat="All">All</button>
                    <button class="cat-filter-button" data-cat="CAT I">CAT I</button>
                    <button class="cat-filter-button" data-cat="CAT II">CAT II</button>
                    <button class="cat-filter-button" data-cat="CAT III">CAT III</button>
                </div>
                <div id="allStigsChartContainer">
                    <canvas id="allStigsChart"></canvas>
                </div>
                <div id="all-stigs-filter-section"></div>
                <h3>All STIGs Summary</h3>
                <div id="allStigsSummary">
                    <p>Total STIGs: <span id="totalStigCount">0</span></p>
                    <p>Open: <span id="openStigCount">0</span></p>
                    <p>Not Reviewed: <span id="nrStigCount">0</span></p>
                    <p>Not a Finding: <span id="nafStigCount">0</span></p>
                    <p>Not Applicable: <span id="naStigCount">0</span></p>
                </div>
            </section>

            <section class="middle-section">
                <h3>Grouped by VulnNum</h3>
                <ul class="stig-list" id="all-stigs-list">
                </ul>
            </section>

            <section class="right-section">
                <h3>STIG Details (All STIGs View)</h3>
                <div class="stig-details" id="all-stigs-details"> </div>
            </section>
        </div>
        <!-- Host Review Tab -->
        <div id="host-review-tab" class="tab-content">
            <section class="host-info-section">
                <h3>Host Information</h3>
                <table id="host-info-table">
                    <!-- Host information will be loaded here -->
                </table>
            </section>
            <section class="not-reviewed-section">
                <h3>Not Reviewed Items (<span id="not-reviewed-count">0</span>)</h3>
                <ul id="not-reviewed-list">
                    <!-- Not reviewed STIGs will be listed here -->
                </ul>
            </section>
            <section class="missing-details-section">
                <h3>Items with Missing Finding Details (<span id="missing-details-count">0</span>)</h3>
                <ul id="missing-details-list">
                    <!-- STIGs with missing details will be listed here -->
                </ul>
            </section>
            <section class="right-section">
                <h3>STIG Details (Host Review View)</h3>
                <div class="stig-details" id="stig-details">
                </div>
            </section>
        </div>

        <!-- Search Tab -->
        <div id="search-tab" class="tab-content">
            <section class="search-input-section">
                <h3>Search STIGs</h3>
                <input type="text" id="search-input" placeholder="Search in comments and finding details...">
            </section>
            <section class="search-results-section">
                <h3>Search Results</h3>
                <ul id="search-results-list">
                    <!-- Search results will be displayed here -->
                </ul>
            </section>
            <section class="right-section">
                <h3>STIG Details (Search View)</h3>
                <div class="stig-details" id="search-stig-details">
                </div>
            </section>
        </div>
    </main>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="Tab.js"></script>
<script src="AllStigs.js"></script>
<script src="HostReview.js"></script>
<script src="Search.js"></script>
<script src="main.js"></script>
</body>
</html>