{% extends "base.html" %}

{% block title %}Rule Check - Axion HDL{% endblock %}

{% block head %}
<link rel="stylesheet"
    href="{{ url_for('static', filename='css/modules/rule_check.css') }}?v={{ range(1, 10000) | random }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/mac_terminal.css') }}?v={{ range(1, 10000) | random }}">
<link rel="stylesheet"
    href="{{ url_for('static', filename='css/segmented_control.css') }}?v={{ range(1, 10000) | random }}">
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>Design Rule Check</h2>
    <div class="d-flex gap-2">
        <button class="btn btn-primary" onclick="runCheck()">
            <i class="bi bi-arrow-clockwise"></i> Refresh
        </button>
        <button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#checkDetails"
            aria-expanded="false">
            <i class="bi bi-info-circle"></i> Info
        </button>
    </div>
</div>

<!-- Collapsible Info -->
<div class="collapse mb-4" id="checkDetails">
    <div class="mac-terminal">
        <div class="mac-terminal-header">
            <div class="mac-window-controls">
                <button type="button" class="mac-btn mac-close" data-bs-toggle="collapse" data-bs-target="#checkDetails"
                    aria-label="Close"></button>
            </div>
            <div class="mac-title">run_details — bash — 80x24</div>
        </div>
        <div class="mac-content">
            <div class="stats-row">
                <span>Checked Modules: <span class="stats-val" id="checkedModules">-</span></span>
                <span>Status: <span class="stats-val" style="color: #61afef;">Active</span></span>
            </div>

            <!-- Activity Log -->
            <div id="activity-log" class="p-3 font-monospace small"
                style="height: 200px; overflow-y: auto; color: #dcdfe4; font-family: 'JetBrains Mono', monospace;">
                <span class="text-secondary">Ready to check...</span>
            </div>
        </div>
    </div>
</div>

<!-- Loading -->
<div id="loading" class="text-center py-5">
    <div class="spinner-border text-primary" style="width: 2.5rem; height: 2.5rem;"></div>
    <p class="mt-3 text-secondary">Analyzing...</p>
</div>

<!-- Results -->
<div id="results" style="display: none;">
    <!-- Status Card -->
    <div id="status-card" class="status-card"></div>


    <!-- Tabs -->
    <!-- Segmented Tabs -->
    <div class="nav segmented-control mb-3" id="pills-tab" role="tablist">
        <button class="segmented-item active" id="pills-all-tab" data-bs-toggle="tab" data-bs-target="#pills-all"
            type="button" role="tab">All Issues</button>

        <button class="segmented-item" id="pills-errors-tab" data-bs-toggle="tab" data-bs-target="#pills-errors"
            type="button" role="tab">
            Errors
            <span class="seg-badge error" id="badge-errors">0</span>
        </button>

        <button class="segmented-item" id="pills-warnings-tab" data-bs-toggle="tab" data-bs-target="#pills-warnings"
            type="button" role="tab">
            Warnings
            <span class="seg-badge warning" id="badge-warnings">0</span>
        </button>
    </div>

    <div class="tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="pills-all" role="tabpanel"></div>
        <div class="tab-pane fade" id="pills-errors" role="tabpanel"></div>
        <div class="tab-pane fade" id="pills-warnings" role="tabpanel"></div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/modules/rule_check.js') }}"></script>
{% endblock %}