{% extends 'base.html' %}

{% block title %}Generate Outputs{% endblock %}

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

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <h2 class="section-title">Generate Outputs</h2>
        <p class="text-secondary">Produce VHDL modules, documentation, and header files from your design.</p>
    </div>
</div>

<!-- Main Generation Card: Formats + Activity Log -->
<div class="card shadow-sm border-0 mb-4" style="background-color: var(--color-bg-tertiary);">
    <div class="card-body p-4">
        <div class="row g-4">
            <!-- Left: Target Formats -->
            <div class="col-lg-5">
                <h6 class="fw-bold text-secondary small text-uppercase mb-3">Target Formats</h6>

                {% if not no_output_dir %}
                <div class="mb-4">
                    <label class="form-label small text-muted">Output Directory</label>
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-light border-end-0 text-muted">
                            <i class="bi bi-folder2-open"></i>
                        </span>
                        <input type="text" id="outputDir" class="form-control border-start-0 bg-light"
                            value="{{ default_dir }}" placeholder="/path/to/output">
                        <button class="btn btn-outline-secondary btn-sm" type="button" onclick="selectFolder()">
                            Browse
                        </button>
                    </div>
                </div>
                {% else %}
                <input type="hidden" id="outputDir" value="">
                {% endif %}

                <div class="row g-2">
                    <div class="col-6">
                        <div class="form-check form-switch p-2 bg-light rounded d-flex align-items-center">
                            <input class="form-check-input ms-0 me-2" type="checkbox" id="fmtVhdl" checked>
                            <label class="form-check-label small" for="fmtVhdl">VHDL</label>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-check form-switch p-2 bg-light rounded d-flex align-items-center">
                            <input class="form-check-input ms-0 me-2" type="checkbox" id="fmtSystemVerilog" checked>
                            <label class="form-check-label small" for="fmtSystemVerilog">SystemVerilog</label>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-check form-switch p-2 bg-light rounded d-flex align-items-center">
                            <input class="form-check-input ms-0 me-2" type="checkbox" id="fmtXml" checked>
                            <label class="form-check-label small" for="fmtXml">XML</label>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-check form-switch p-2 bg-light rounded d-flex align-items-center">
                            <input class="form-check-input ms-0 me-2" type="checkbox" id="fmtYaml" checked>
                            <label class="form-check-label small" for="fmtYaml">YAML</label>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-check form-switch p-2 bg-light rounded d-flex align-items-center">
                            <input class="form-check-input ms-0 me-2" type="checkbox" id="fmtJson" checked>
                            <label class="form-check-label small" for="fmtJson">JSON</label>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-check form-switch p-2 bg-light rounded d-flex align-items-center">
                            <input class="form-check-input ms-0 me-2" type="checkbox" id="fmtToml" checked>
                            <label class="form-check-label small" for="fmtToml">TOML</label>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-check form-switch p-2 bg-light rounded d-flex align-items-center">
                            <input class="form-check-input ms-0 me-2" type="checkbox" id="fmtHeader" checked>
                            <label class="form-check-label small" for="fmtHeader">C Header</label>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-check form-switch p-2 bg-light rounded d-flex align-items-center">
                            <input class="form-check-input ms-0 me-2" type="checkbox" id="fmtDocMd" checked>
                            <label class="form-check-label small" for="fmtDocMd">Markdown</label>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-check form-switch p-2 bg-light rounded d-flex align-items-center">
                            <input class="form-check-input ms-0 me-2" type="checkbox" id="fmtDocHtml" checked>
                            <label class="form-check-label small" for="fmtDocHtml">HTML Doc</label>
                        </div>
                    </div>
                </div>

                <button type="button" onclick="runGenerate()" class="btn btn-primary w-100 mt-4">
                    <i class="bi bi-play-circle-fill me-2"></i>Generate Files
                </button>

                <!-- Download ZIP Button (shown on temp mode success) -->
                <div id="downloadSection" class="mt-3" style="display: none;">
                    <div class="alert alert-success py-2 d-flex align-items-center justify-content-between mb-0">
                        <span class="small"><i class="bi bi-check-circle-fill me-2"></i>Files ready!</span>
                        <button id="downloadZipBtn" class="btn btn-success btn-sm" onclick="downloadZip()">
                            <i class="bi bi-download me-1"></i>Download ZIP
                        </button>
                    </div>
                </div>
            </div>

            <!-- Right: Activity Log (Mac Terminal Style) -->
            <div class="col-lg-7">
                <div class="mac-terminal" style="height: 100%; min-height: 350px; margin-bottom: 0;">
                    <div class="mac-terminal-header">
                        <div class="mac-window-controls">
                        </div>
                        <div class="mac-title">generate_log — bash</div>
                    </div>
                    <div class="mac-content d-flex flex-column">
                        <div class="stats-row">
                            <span>Status: <span class="stats-val" id="statusBadge"
                                    style="color: #61afef;">Idle</span></span>
                        </div>
                        <div id="consoleOutput" class="p-3 font-monospace small flex-grow-1"
                            style="overflow-y: auto; color: #d4d4d4; font-family: 'JetBrains Mono', monospace;">
                            Ready to generate...
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
</div>

<!-- Module Selection Card -->
<div class="card shadow-sm border-0" style="background-color: var(--color-bg-tertiary);">
    <div class="card-body p-4">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h6 class="fw-bold text-secondary small text-uppercase mb-0">Select Modules</h6>
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="selectAllModules(true)">
                    <i class="bi bi-check-all me-1"></i>All
                </button>
                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="selectAllModules(false)">
                    <i class="bi bi-x-lg me-1"></i>None
                </button>
            </div>
        </div>
        <div id="modulesList" class="row g-2">
            <div class="col-12 text-muted small">Loading modules...</div>
        </div>
    </div>
</div>

{% endblock %}

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