{% extends "base.html" %}

{% block content %}
<!-- TEMPLATE-VERSION-CHECK-2026-03-26-v1 -->
<script>console.log('TEMPLATE LOADED: package_detail.html version 2026-03-26-v1');</script>
<div class="row">
    <div class="col-12">
        <!-- Breadcrumb -->
        <nav aria-label="breadcrumb" class="mb-3">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/" class="project-link">Home</a></li>
                <li class="breadcrumb-item"><a href="/projects" class="project-link">Projects</a></li>
                <li class="breadcrumb-item"><a href="/projects/{{ project_name }}" class="project-link">{{ project_name }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ package_name }}</li>
            </ol>
        </nav>

        <!-- Package Details -->
        <div class="card border-0 shadow mb-4">
            <div class="card-header bg-gradient border-0">
                <h2 class="mb-0">
                    <i class="fas fa-box text-primary"></i> {{ package_name }}
                </h2>
            </div>

            <div class="card-body">
                {% if error_message %}
                <div class="alert alert-danger" role="alert">
                    <i class="fas fa-exclamation-circle"></i>
                    <strong>{{ error_message }}</strong>
                </div>
                {% elif is_legacy %}
                <div class="alert alert-warning" role="alert">
                    <i class="fas fa-exclamation-triangle"></i>
                    <strong>Legacy Package</strong> - This package does not have SCM synchronization configured.
                </div>
                {% elif is_not_synced %}
                <div class="alert alert-info" role="alert">
                    <i class="fas fa-info-circle"></i>
                    <strong>Not Yet Synced</strong> - This package has SCM synchronization configured but has not been synced yet.
                </div>
                {% endif %}

                {% if source_url and branch_name %}
                <div class="mb-4">
                    <h5 class="text-muted mb-2">Source Information</h5>
                    <div class="card bg-light p-3 mb-3">
                        <p class="mb-2"><strong>Repository:</strong> <a href="{{ source_url }}" target="_blank" rel="noopener"><code class="text-info">{{ source_url }}</code></a></p>
                        {% if source_commit %}
                        <p class="mb-2"><strong>Commit:</strong> <code class="text-info">{{ source_commit }}</code></p>
                        {% endif %}
                        {% if commit_time %}
                        <p class="mb-3"><strong>Commit Time:</strong> <span>{{ commit_time }}</span></p>
                        {% elif source_commit %}
                        <p class="mb-3"></p>
                        {% endif %}
                        <div class="mb-3">
                            {% if source_commit %}
                            <a href="{{ source_url }}/src/commit/{{ source_commit }}" target="_blank" class="btn btn-info">
                                <i class="fas fa-file-code"></i> View current source
                            </a>
                            {% endif %}
                            <a href="{{ gitea_branch_url }}" target="_blank" class="btn btn-primary ms-2">
                                <i class="fas fa-code-branch"></i> Work on branch {{ branch_name }}
                            </a>
                        </div>

                        {% if open_issues is not none or open_prs is not none %}
                        <div>
                            {% if open_issues is not none %}
                            <a href="{{ source_url }}/issues" target="_blank" class="btn btn-sm btn-outline-warning">
                                <i class="fas fa-exclamation-circle"></i> Issues: {{ open_issues }}
                            </a>
                            {% endif %}
                            {% if open_prs is not none %}
                            <a href="{{ source_url }}/pulls" target="_blank" class="btn btn-sm btn-outline-info ms-2">
                                <i class="fas fa-code-branch"></i> Pull Requests: {{ open_prs }}
                            </a>
                            {% endif %}
                        </div>
                        {% endif %}
                    </div>

                    {% if enable_iframe %}
                    <div class="mb-4">
                        <h5 class="text-muted mb-2">Source Browser</h5>
                        <iframe src="{{ gitea_branch_url }}" style="width: 100%; height: 600px; border: 1px solid #333; border-radius: 5px;"></iframe>
                    </div>
                    {% else %}
                    <div class="mb-4">
                        <div class="alert alert-info" role="alert">
                            <i class="fas fa-info-circle"></i>
                            <strong>Source Browser Embedding Disabled</strong>
                        </div>
                    </div>
                    {% endif %}
                </div>
                {% elif scmsync_url %}
                <div class="mb-4">
                    <h5 class="text-muted mb-2">Source Repository</h5>
                    <a href="{{ scmsync_url }}" target="_blank" class="btn btn-sm btn-outline-primary" title="View in Gitea">
                        <i class="fab fa-git-alt"></i>
                    </a>
                </div>
                {% endif %}

                {% if build_results %}
                <div class="mb-4">
                    <h5 class="text-muted mb-2">Build Results</h5>

                    <!-- Filter Buttons -->
                    <div class="mb-3 p-3 bg-light rounded">
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-sm btn-success active" id="filterBuildSuccess" onclick="toggleBuildFilter('success')">
                                <i class="fas fa-check-circle"></i> Success
                            </button>
                            <button type="button" class="btn btn-sm btn-danger active" id="filterBuildFail" onclick="toggleBuildFilter('fail')">
                                <i class="fas fa-times-circle"></i> Failure
                            </button>
                            <button type="button" class="btn btn-sm btn-warning active" id="filterBuildBlocked" onclick="toggleBuildFilter('blocked')">
                                <i class="fas fa-pause-circle"></i> Blocked
                            </button>
                            <button type="button" class="btn btn-sm btn-primary active" id="filterBuildWIP" onclick="toggleBuildFilter('wip')">
                                <i class="fas fa-spinner"></i> Active
                            </button>
                            <button type="button" class="btn btn-sm btn-secondary" id="filterBuildInactive" onclick="toggleBuildFilter('inactive')">
                                <i class="fas fa-ban"></i> Inactive
                            </button>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-striped table-sm">
                            <thead>
                                <tr>
                                    <th>Repository</th>
                                    <th>Architecture</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% set prev_repo = {'name': ''} %}
                                {% set repo_count = {} %}
                                {% for result in build_results %}
                                    {% if result.repository not in repo_count %}
                                        {% set _ = repo_count.update({result.repository: build_results | selectattr('repository', 'equalto', result.repository) | list | length}) %}
                                    {% endif %}
                                {% endfor %}
                                {% set prev_repo = {'name': ''} %}
                                {% for result in build_results %}
                                {% set status_parts = result.status.split(':', 1) %}
                                {% set main_status = status_parts[0] %}
                                {% set status_detail = status_parts[1] if status_parts|length > 1 else (result.details or '') %}
                                <tr class="build-result-row" data-status="{{ main_status }}"
                                    {% if main_status == 'succeeded' %}
                                    data-category="success"
                                    {% elif main_status in ['failed', 'unresolvable', 'broken'] %}
                                    data-category="fail"
                                    {% elif main_status == 'blocked' %}
                                    data-category="blocked"
                                    {% elif main_status in ['building', 'dispatching', 'signing', 'scheduled', 'finished'] %}
                                    data-category="wip"
                                    {% elif main_status in ['disabled', 'excluded', 'unknown', 'locked', 'deleting'] %}
                                    data-category="inactive"
                                    {% endif %}>
                                    {% if result.repository != prev_repo.name %}
                                        <td rowspan="{{ repo_count[result.repository] }}">{{ result.repository }}</td>
                                        {% set _ = prev_repo.update({'name': result.repository}) %}
                                    {% endif %}
                                    <td><code class="text-info">{{ result.arch }}</code></td>
                                    <td>
                                        {% if main_status == 'succeeded' %}
                                            <span class="badge bg-success" {% if status_detail %}title="{{ status_detail }}"{% endif %} style="cursor: pointer;" onclick="showBuildLog('{{ project_name }}', '{{ result.repository }}', '{{ result.arch }}', '{{ package_name }}', '{{ main_status }}')">✓ {{ main_status }}</span>
                                        {% elif main_status in ['failed', 'unresolvable', 'broken'] %}
                                            <span class="badge bg-danger" {% if status_detail %}title="{{ status_detail }}"{% endif %} style="cursor: pointer;" onclick="showBuildLog('{{ project_name }}', '{{ result.repository }}', '{{ result.arch }}', '{{ package_name }}', '{{ main_status }}')">✗ {{ main_status }}</span>
                                        {% elif main_status == 'blocked' %}
                                            <span class="badge bg-warning text-dark" {% if status_detail %}title="{{ status_detail }}"{% endif %} style="cursor: pointer;" onclick="showBuildLog('{{ project_name }}', '{{ result.repository }}', '{{ result.arch }}', '{{ package_name }}', '{{ main_status }}')">▌ {{ main_status }}</span>
                                        {% elif main_status in ['building', 'dispatching', 'signing'] %}
                                            <span class="badge bg-primary" {% if status_detail %}title="{{ status_detail }}"{% endif %} style="cursor: pointer;" onclick="showBuildLog('{{ project_name }}', '{{ result.repository }}', '{{ result.arch }}', '{{ package_name }}', '{{ main_status }}')"><i class="fas fa-circle-notch fa-spin"></i> {{ main_status }}</span>
                                        {% elif main_status in ['scheduled', 'finished'] %}
                                            <span class="badge bg-info" {% if status_detail %}title="{{ status_detail }}"{% endif %} style="cursor: pointer;" onclick="showBuildLog('{{ project_name }}', '{{ result.repository }}', '{{ result.arch }}', '{{ package_name }}', '{{ main_status }}')">{{ main_status }}</span>
                                        {% elif main_status in ['disabled', 'excluded', 'unknown', 'locked', 'deleting'] %}
                                            <span class="badge bg-secondary" {% if status_detail %}title="{{ status_detail }}"{% endif %}>{{ main_status }}</span>
                                        {% else %}
                                            <span class="badge bg-secondary" {% if status_detail %}title="{{ status_detail }}"{% endif %}>{{ main_status }}</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                {% endif %}

                <div class="mt-4">
                    <a href="/projects/{{ project_name }}" class="btn btn-outline-primary">
                        <i class="fas fa-arrow-left"></i> Back to Project
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Build Log Modal -->
<div class="modal fade" id="buildLogModal" tabindex="-1" aria-labelledby="buildLogModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" style="max-height: 95vh; margin: 2.5vh auto;">
        <div class="modal-content" style="max-height: 95vh; display: flex; flex-direction: column;">
            <div class="modal-header" style="flex-shrink: 0;">
                <h5 class="modal-title" id="buildLogModalLabel">
                    <i class="fas fa-file-alt"></i> <span id="logTitle"></span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0" style="overflow: hidden; flex: 1; min-height: 0; display: flex; flex-direction: column;">
                <div id="buildLogLoader" class="text-center py-5">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="text-muted mt-2">Loading build log...</p>
                </div>
                <div id="buildLogError" class="alert alert-danger m-3" style="display: none;">
                    <i class="fas fa-exclamation-triangle"></i> <span id="buildLogErrorMsg"></span>
                </div>
                <!-- Error details for broken/unresolvable builds -->
                <div id="buildErrorDetails" class="alert alert-danger m-3" style="display: none; flex-shrink: 0; max-height: 30vh; overflow-y: auto;">
                    <h6 class="alert-heading"><i class="fas fa-exclamation-triangle"></i> Build Error Details</h6>
                    <hr>
                    <pre id="buildErrorDetailsContent" class="mb-0" style="white-space: pre-wrap; font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace; font-size: 0.85rem; background: transparent; border: none; padding: 0; color: inherit;"></pre>
                    <hr class="my-2">
                    <small class="text-muted"><i class="fas fa-info-circle"></i> Note: The build log below (if present) is from a previous build attempt.</small>
                </div>
                <pre id="buildLogContent" class="bg-light border m-0 p-3" style="flex: 1; min-height: 0; overflow-y: auto; font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace; font-size: 0.85rem; display: none; color: #2c3e50;"></pre>
            </div>
            <div class="modal-footer" style="flex-shrink: 0; flex-direction: column; align-items: stretch;">
                <div class="d-flex w-100 mb-2">
                    <div class="me-auto">
                        <button type="button" class="btn btn-outline-danger me-2" id="logJumpToError" title="Jump to next error">
                            <i class="fas fa-exclamation-triangle"></i> Next Error
                        </button>
                        <button type="button" class="btn btn-outline-secondary" id="logJumpToBottom" title="Jump to bottom" style="display: none;">
                            <i class="fas fa-arrow-down"></i> Jump to Bottom
                        </button>
                    </div>
                    <a id="logDownloadLink" class="btn btn-outline-secondary me-2" href="#" download title="Download raw build log">
                        <i class="fas fa-download"></i> Raw Download
                    </a>
                    <button type="button" class="btn btn-outline-primary" id="logShareLink" title="Copy link to this log">
                        <i class="fas fa-share-alt"></i> Share Log
                    </button>
                </div>
                <div class="d-flex w-100 align-items-center">
                    <div class="form-check me-3">
                        <input class="form-check-input" type="checkbox" id="logSearchBackward" checked>
                        <label class="form-check-label" for="logSearchBackward">
                            Backward search
                        </label>
                    </div>
                    <div class="input-group flex-grow-1 me-3">
                        <input type="text" class="form-control search-box" id="logSearchInput" placeholder="Search in log...">
                        <button class="btn btn-outline-primary" type="button" id="logSearchPrev" title="Previous match">
                            <i class="fas fa-chevron-up"></i>
                        </button>
                        <button class="btn btn-outline-primary" type="button" id="logSearchNext" title="Next match">
                            <i class="fas fa-chevron-down"></i>
                        </button>
                        <button class="btn btn-outline-secondary" type="button" id="logSearchClear" title="Clear search">
                            <i class="fas fa-times"></i>
                        </button>
                        <span class="input-group-text" id="logSearchCount">0/0</span>
                    </div>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Build log syntax highlighting */
#buildLogContent {
    line-height: 1.4;
}

#buildLogContent .log-error {
    background-color: #fee;
    color: #c00;
    display: block;
    padding: 1px 0;
}

#buildLogContent .log-error-current {
    background-color: #fcc;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.4);
}

#buildLogContent .log-warning {
    background-color: #fff3cd;
    color: #856404;
    display: block;
    padding: 1px 0;
}

#buildLogContent .log-info {
    color: #0066cc;
    display: block;
}

#buildLogContent .log-success {
    color: #28a745;
    display: block;
}

#buildLogContent .log-debug {
    color: #6c757d;
    display: block;
}
</style>

<script>
// Set page title
document.title = '{{ project_name }}/{{ package_name }}';

// Syntax highlighting for build logs
function highlightLogText(text) {
    if (!text) return '';

    const lines = text.split('\n');
    const highlightedLines = lines.map(line => {
        // Escape HTML entities
        const escaped = line
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');

        const lowerLine = line.toLowerCase();

        // Exclude false positives (not errors or warnings, just normal output)
        if (lowerLine.match(/failed to start.*virtual console setup/i) ||
            lowerLine.match(/dmesg.*may have more information after failed mount/i)) {
            return escaped;
        }

        // Warning patterns (check first to avoid being caught by error patterns)
        if (lowerLine.match(/\bwarning\b.*:/i) ||
            lowerLine.match(/\bwarn\b:/i) ||
            lowerLine.match(/\bdeprecated\b/i) ||
            line.match(/^warning:/i)) {
            return `<span class="log-warning">${escaped}</span>`;
        }

        // Error patterns (highest priority after warnings)
        if (lowerLine.match(/\berror\b.*:/i) ||
            lowerLine.match(/\bfailed\b/i) ||
            lowerLine.match(/\bfailure\b/i) ||
            lowerLine.match(/\bcritical\b/i) ||
            lowerLine.match(/\bfatal\b/i) ||
            lowerLine.match(/\bsegmentation fault\b/i) ||
            lowerLine.match(/\bcore dumped\b/i) ||
            line.match(/^make.*:\s*\*\*\*/i) ||
            line.match(/^error:/i)) {
            return `<span class="log-error">${escaped}</span>`;
        }

        // Success patterns
        if (lowerLine.match(/\bsuccess\b/i) ||
            lowerLine.match(/\bsucceed/i) ||
            lowerLine.match(/\bcompleted successfully\b/i) ||
            lowerLine.match(/\b\d+ tests? passed\b/i) ||
            line.match(/^\[.*ok.*\]/i)) {
            return `<span class="log-success">${escaped}</span>`;
        }

        // Info patterns
        if (lowerLine.match(/^info:/i) ||
            lowerLine.match(/^note:/i) ||
            lowerLine.match(/^\[.*info.*\]/i)) {
            return `<span class="log-info">${escaped}</span>`;
        }

        // Debug patterns
        if (lowerLine.match(/^debug:/i) ||
            lowerLine.match(/^\[.*debug.*\]/i)) {
            return `<span class="log-debug">${escaped}</span>`;
        }

        // Default: return escaped line
        return escaped;
    });

    return highlightedLines.join('\n');
}

// Build result filter state
let buildFilters = {
    success: true,
    fail: true,
    blocked: true,
    wip: true,
    inactive: false
};

// Toggle build filter
function toggleBuildFilter(filterName) {
    buildFilters[filterName] = !buildFilters[filterName];

    // Update button state
    const button = document.getElementById('filterBuild' + filterName.charAt(0).toUpperCase() + filterName.slice(1));
    if (buildFilters[filterName]) {
        button.classList.add('active');
    } else {
        button.classList.remove('active');
    }

    // Apply filters
    applyBuildFilters();
}

// Apply build filters
function applyBuildFilters() {
    const rows = document.querySelectorAll('.build-result-row');

    rows.forEach(row => {
        const category = row.getAttribute('data-category');
        let shouldShow = false;

        if (category === 'success' && buildFilters.success) {
            shouldShow = true;
        } else if (category === 'fail' && buildFilters.fail) {
            shouldShow = true;
        } else if (category === 'blocked' && buildFilters.blocked) {
            shouldShow = true;
        } else if (category === 'wip' && buildFilters.wip) {
            shouldShow = true;
        } else if (category === 'inactive' && buildFilters.inactive) {
            shouldShow = true;
        }

        if (shouldShow) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });
}

// Initialize filters on page load
document.addEventListener('DOMContentLoaded', function() {
    applyBuildFilters();
});

// Show build log in modal
// TEMPLATE VERSION: 2026-03-26-DEBUG-v1
// Global variables to store current log parameters for sharing
let currentLogParams = null;

function showBuildLog(project, repo, arch, pkg, status) {
    console.log('═════════════════════════════════════════════════════════════');
    console.log('[BUILD LOG v1] Function called');
    console.log('[BUILD LOG v1] Project:', project);
    console.log('[BUILD LOG v1] Repo:', repo);
    console.log('[BUILD LOG v1] Arch:', arch);
    console.log('[BUILD LOG v1] Package:', pkg);
    console.log('[BUILD LOG v1] Status:', status);
    console.log('═════════════════════════════════════════════════════════════');

    // Store current log parameters for sharing
    currentLogParams = { project, repo, arch, pkg, status };

    // Update download link
    const downloadUrl = `/obs/build/${encodeURIComponent(project)}/${encodeURIComponent(repo)}/${encodeURIComponent(arch)}/${encodeURIComponent(pkg)}/_log?nostream=1&start=0`;
    const downloadLink = document.getElementById('logDownloadLink');
    downloadLink.href = downloadUrl;
    downloadLink.download = `${pkg}_${repo}_${arch}.log`;

    // Update modal title
    const isLive = ['building', 'dispatching', 'signing', 'scheduled'].includes(status);
    const liveIndicator = isLive ? ' <span class="badge bg-primary"><i class="fas fa-circle-notch fa-spin"></i> LIVE</span>' : '';
    document.getElementById('logTitle').innerHTML = `${pkg} @ ${repo}/${arch} (${status})${liveIndicator}`;

    // Reset modal state
    document.getElementById('buildLogLoader').style.display = 'block';
    document.getElementById('buildLogError').style.display = 'none';
    document.getElementById('buildErrorDetails').style.display = 'none';
    document.getElementById('buildLogContent').style.display = 'none';
    document.getElementById('buildLogContent').textContent = '';
    document.getElementById('buildErrorDetailsContent').textContent = '';

    // Show modal
    const modal = new bootstrap.Modal(document.getElementById('buildLogModal'));
    modal.show();

    // Focus search input when modal is shown
    document.getElementById('buildLogModal').addEventListener('shown.bs.modal', function() {
        document.getElementById('logSearchInput').focus();
    }, { once: true });

    // For broken/unresolvable states, fetch error details from /_result first
    const showErrorDetails = ['broken', 'unresolvable'].includes(status);
    console.log('[BUILD LOG] Status:', status, 'Show error details:', showErrorDetails);

    if (showErrorDetails) {
        const resultUrl = `/obs/build/${encodeURIComponent(project)}/${encodeURIComponent(repo)}/${encodeURIComponent(arch)}/${encodeURIComponent(pkg)}/_result`;
        console.log('[BUILD LOG] Fetching error details from:', resultUrl);

        fetch(resultUrl)
            .then(response => {
                console.log('[BUILD LOG] Result response status:', response.status);
                return response.text();
            })
            .then(resultXml => {
                console.log('[BUILD LOG] Result XML length:', resultXml.length);
                // Parse XML to extract details
                const parser = new DOMParser();
                const xmlDoc = parser.parseFromString(resultXml, 'text/xml');
                const statusElem = xmlDoc.querySelector('status');
                const details = statusElem ? statusElem.getAttribute('details') : null;
                console.log('[BUILD LOG] Extracted details:', details);

                // Now fetch the log (might be from a previous build)
                fetchBuildLog(project, repo, arch, pkg, status, isLive, details);
            })
            .catch(error => {
                console.error('[BUILD LOG] Error fetching result details:', error);
                // Continue with log fetch even if result fetch fails
                fetchBuildLog(project, repo, arch, pkg, status, isLive, null);
            });
    } else {
        console.log('[BUILD LOG] Not an error status, fetching log directly');
        // For other statuses, just fetch the log
        fetchBuildLog(project, repo, arch, pkg, status, isLive, null);
    }
}

// Fetch build log with optional error details in separate section
function fetchBuildLog(project, repo, arch, pkg, status, isLive, errorDetails) {
    console.log('[FETCH LOG] Called with errorDetails:', errorDetails ? errorDetails.substring(0, 50) + '...' : 'null');

    // Build log URL - use streaming for active builds, nostream for finished
    let logUrl = `/obs/build/${encodeURIComponent(project)}/${encodeURIComponent(repo)}/${encodeURIComponent(arch)}/${encodeURIComponent(pkg)}/_log`;
    if (!isLive) {
        logUrl += '?nostream=1&start=0';
    }
    console.log('[FETCH LOG] Fetching log from:', logUrl, isLive ? '(streaming)' : '(static)');

    // Determine if this is an error or active build
    const isError = ['broken', 'unresolvable', 'failed'].includes(status);
    const isActive = ['building', 'dispatching', 'signing', 'scheduled'].includes(status);

    // Show details in separate section if available
    const detailsBox = document.getElementById('buildErrorDetails');
    if (errorDetails) {
        document.getElementById('buildErrorDetailsContent').textContent = errorDetails;

        // Style differently for errors vs active builds
        if (isError) {
            detailsBox.className = 'alert alert-danger m-3';
            detailsBox.innerHTML = `
                <h6 class="alert-heading"><i class="fas fa-exclamation-triangle"></i> Build Error Details</h6>
                <hr>
                <pre id="buildErrorDetailsContent" class="mb-0" style="white-space: pre-wrap; font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace; font-size: 0.85rem; background: transparent; border: none; padding: 0; color: inherit;">${errorDetails}</pre>
                <hr class="my-2">
                <small class="text-muted"><i class="fas fa-info-circle"></i> Note: The build log below (if present) is from a previous build attempt.</small>
            `;
        } else if (isActive) {
            detailsBox.className = 'alert alert-info m-3';
            detailsBox.innerHTML = `
                <pre id="buildErrorDetailsContent" class="mb-0" style="white-space: pre-wrap; font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace; font-size: 0.85rem; background: transparent; border: none; padding: 0; color: inherit;">${errorDetails}</pre>
            `;
        } else {
            // Other statuses - neutral styling
            detailsBox.className = 'alert alert-warning m-3';
            detailsBox.innerHTML = `
                <pre id="buildErrorDetailsContent" class="mb-0" style="white-space: pre-wrap; font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace; font-size: 0.85rem; background: transparent; border: none; padding: 0; color: inherit;">${errorDetails}</pre>
            `;
        }
        detailsBox.style.display = 'block';
    } else {
        detailsBox.style.display = 'none';
    }

    fetch(logUrl)
        .then(response => {
            console.log('[FETCH LOG] Log response status:', response.status, 'OK:', response.ok);

            // If log not found (404), show message
            if (!response.ok && response.status === 404) {
                console.log('[FETCH LOG] Build log not found (404)');
                const logContent = document.getElementById('buildLogContent');
                document.getElementById('buildLogLoader').style.display = 'none';
                logContent.style.display = 'block';

                if (errorDetails) {
                    logContent.textContent = 'No build log available (no previous build attempt).';
                } else {
                    logContent.textContent = `Build Status: ${status}\n\nNo build log available for this status.`;
                }

                // Return a marker to indicate we handled this case
                return { handled: true };
            }

            // For other errors, throw
            if (!response.ok) {
                console.log('[FETCH LOG] HTTP error:', response.status, response.statusText);
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            }

            console.log('[FETCH LOG] Log response OK, proceeding to display');
            // Return response and a flag indicating this needs further processing
            return { response: response, handled: false };
        })
        .then(result => {
            // If we already handled the 404 case, skip further processing
            if (result && result.handled) {
                console.log('[FETCH LOG] Already handled (404 case), skipping');
                return;
            }

            console.log('[FETCH LOG] Processing log response');
            const response = result.response;
            const logContent = document.getElementById('buildLogContent');
            document.getElementById('buildLogLoader').style.display = 'none';
            logContent.style.display = 'block';

            if (!isLive || !response.body) {
                console.log('[FETCH LOG] Non-streaming mode, fetching text');
                // Non-streaming: just get text
                return response.text().then(text => {
                    console.log('[FETCH LOG] Got log text, length:', text.length);
                    logContent.innerHTML = highlightLogText(text);
                    // Scroll to first error if found, otherwise scroll to bottom
                    setTimeout(() => {
                        const firstError = logContent.querySelector('.log-error');
                        if (firstError) {
                            console.log('[FETCH LOG] Scrolling to first error');
                            firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
                        } else {
                            console.log('[FETCH LOG] No errors found, scrolling to bottom');
                            logContent.scrollTop = logContent.scrollHeight;
                        }
                    }, 100);
                });
            }

            console.log('[FETCH LOG] Streaming mode');
            // Streaming: read chunks as they arrive
            const reader = response.body.getReader();
            const decoder = new TextDecoder();
            let wasAtBottom = true;
            let isFirstChunk = true;
            let accumulatedText = ''; // Accumulate raw text for highlighting

            // Track if user scrolls away from bottom
            logContent.addEventListener('scroll', function() {
                const isAtBottom = logContent.scrollHeight - logContent.scrollTop - logContent.clientHeight < 10;
                wasAtBottom = isAtBottom;
            });

            function readChunk() {
                reader.read().then(({ done, value }) => {
                    if (done) {
                        console.log('Stream complete');
                        // Remove LIVE badge when stream finishes
                        document.getElementById('logTitle').innerHTML = `${pkg} @ ${repo}/${arch} (${status})`;
                        return;
                    }

                    // Append chunk to accumulated text
                    const chunk = decoder.decode(value, { stream: true });
                    accumulatedText += chunk;

                    // Apply syntax highlighting to entire accumulated text
                    logContent.innerHTML = highlightLogText(accumulatedText);

                    // Auto-scroll to bottom if user was at bottom
                    if (wasAtBottom) {
                        logContent.scrollTop = logContent.scrollHeight;
                    }

                    // On first chunk, scroll to bottom
                    if (isFirstChunk) {
                        isFirstChunk = false;
                        setTimeout(() => {
                            logContent.scrollTop = logContent.scrollHeight;
                        }, 0);
                        setTimeout(() => {
                            logContent.scrollTop = logContent.scrollHeight;
                        }, 50);
                    }

                    // Read next chunk
                    readChunk();
                }).catch(error => {
                    console.error('Stream error:', error);
                    document.getElementById('buildLogError').style.display = 'block';
                    document.getElementById('buildLogErrorMsg').textContent = 'Stream interrupted: ' + error.message;
                });
            }

            readChunk();
        })
        .catch(error => {
            console.error('[FETCH LOG] ✗ Error loading build log:', error);
            console.error('[FETCH LOG] Error stack:', error.stack);
            document.getElementById('buildLogLoader').style.display = 'none';
            document.getElementById('buildLogError').style.display = 'block';
            document.getElementById('buildLogErrorMsg').textContent = error.message;
        });
}

// Add global error handler for JavaScript errors
window.addEventListener('error', function(e) {
    console.error('[GLOBAL ERROR]', e.message, 'at', e.filename, 'line', e.lineno);
});

// Log search functionality
let logSearchMatches = [];
let logSearchCurrentIndex = -1;
let logSearchOriginalText = '';
let logSearchTerm = '';

function performLogSearch(searchTerm) {
    const logContent = document.getElementById('buildLogContent');

    // Get current text (either from original or current content)
    const currentText = logContent.textContent;
    logSearchOriginalText = currentText;
    logSearchTerm = searchTerm;

    logSearchMatches = [];
    logSearchCurrentIndex = -1;

    if (!searchTerm) {
        // Clear search highlights but restore syntax highlighting
        logContent.innerHTML = highlightLogText(currentText);
        document.getElementById('logSearchCount').textContent = '0/0';
        return;
    }

    const text = currentText;
    const lowerText = text.toLowerCase();
    const lowerSearch = searchTerm.toLowerCase();

    // Find all matches
    let pos = 0;
    while ((pos = lowerText.indexOf(lowerSearch, pos)) !== -1) {
        logSearchMatches.push(pos);
        pos += searchTerm.length;
    }

    if (logSearchMatches.length > 0) {
        // Start from bottom if backward search is enabled
        const isBackward = document.getElementById('logSearchBackward').checked;
        logSearchCurrentIndex = isBackward ? logSearchMatches.length - 1 : 0;
        highlightLogMatches(searchTerm);
        scrollToCurrentMatch();
    }

    if (logSearchMatches.length > 0) {
        const currentPos = logSearchCurrentIndex + 1;
        document.getElementById('logSearchCount').textContent = `${currentPos}/${logSearchMatches.length}`;
    } else {
        document.getElementById('logSearchCount').textContent = '0/0';
    }
}

function highlightLogMatches(searchTerm) {
    const logContent = document.getElementById('buildLogContent');
    const text = logSearchOriginalText || logContent.textContent;

    // First get syntax-highlighted HTML
    let html = highlightLogText(text);

    // Then add search match highlighting on top
    // Replace search term with marked version (case-insensitive)
    const searchRegex = new RegExp(searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi');
    let matchCount = 0;

    html = html.replace(searchRegex, (match) => {
        const matchClass = matchCount === logSearchCurrentIndex ? 'log-search-current' : 'log-search-match';
        matchCount++;
        return `<mark class="${matchClass}">${match}</mark>`;
    });

    // Preserve scroll position
    const scrollPos = logContent.scrollTop;
    logContent.innerHTML = html;
    logContent.scrollTop = scrollPos;
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

function scrollToCurrentMatch() {
    const logContent = document.getElementById('buildLogContent');
    const currentMark = logContent.querySelector('.log-search-current');
    if (currentMark) {
        // Scroll to center the match
        const markTop = currentMark.offsetTop;
        logContent.scrollTop = markTop - logContent.clientHeight / 2;
    }
}

function navigateLogSearch(direction) {
    if (logSearchMatches.length === 0) return;

    logSearchCurrentIndex += direction;

    // Wrap around
    if (logSearchCurrentIndex < 0) {
        logSearchCurrentIndex = logSearchMatches.length - 1;
    } else if (logSearchCurrentIndex >= logSearchMatches.length) {
        logSearchCurrentIndex = 0;
    }

    const searchTerm = document.getElementById('logSearchInput').value;
    highlightLogMatches(searchTerm);
    scrollToCurrentMatch();

    document.getElementById('logSearchCount').textContent =
        `${logSearchCurrentIndex + 1}/${logSearchMatches.length}`;
}

// Search event listeners
document.getElementById('logSearchInput').addEventListener('input', function(e) {
    performLogSearch(e.target.value);
});

document.getElementById('logSearchNext').addEventListener('click', function() {
    navigateLogSearch(1);
});

document.getElementById('logSearchPrev').addEventListener('click', function() {
    navigateLogSearch(-1);
});

document.getElementById('logSearchClear').addEventListener('click', function() {
    document.getElementById('logSearchInput').value = '';
    const logContent = document.getElementById('buildLogContent');
    if (logSearchOriginalText) {
        logContent.textContent = logSearchOriginalText;
    }
    logSearchMatches = [];
    logSearchCurrentIndex = -1;
    logSearchOriginalText = '';
    document.getElementById('logSearchCount').textContent = '0/0';
});

// Jump to next error
let currentErrorIndex = -1;
document.getElementById('logJumpToError').addEventListener('click', function() {
    const logContent = document.getElementById('buildLogContent');
    const errors = logContent.querySelectorAll('.log-error');

    if (errors.length === 0) {
        return;
    }

    currentErrorIndex = (currentErrorIndex + 1) % errors.length;
    errors[currentErrorIndex].scrollIntoView({ behavior: 'smooth', block: 'center' });

    // Briefly highlight the current error
    const prevHighlighted = logContent.querySelector('.log-error-current');
    if (prevHighlighted) {
        prevHighlighted.classList.remove('log-error-current');
    }
    errors[currentErrorIndex].classList.add('log-error-current');
});

// Jump to bottom button
document.getElementById('logJumpToBottom').addEventListener('click', function() {
    const logContent = document.getElementById('buildLogContent');
    logContent.scrollTop = logContent.scrollHeight;
});

// Show/hide "Jump to Bottom" button based on scroll position
let logScrollTimeout;
document.getElementById('buildLogContent').addEventListener('scroll', function() {
    // Debounce the scroll event for better performance
    clearTimeout(logScrollTimeout);
    logScrollTimeout = setTimeout(() => {
        const logContent = this;
        const jumpToBottomBtn = document.getElementById('logJumpToBottom');

        // Check if user is near the bottom (within 100px)
        const isNearBottom = (logContent.scrollHeight - logContent.scrollTop - logContent.clientHeight) < 100;

        // Show button only when not at bottom
        if (isNearBottom) {
            jumpToBottomBtn.style.display = 'none';
        } else {
            jumpToBottomBtn.style.display = 'inline-block';
        }
    }, 100); // 100ms debounce
});

// Share log link
document.getElementById('logShareLink').addEventListener('click', function() {
    console.log('[SHARE LOG] Button clicked');
    console.log('[SHARE LOG] currentLogParams:', currentLogParams);

    if (!currentLogParams) {
        console.error('[SHARE LOG] currentLogParams is not set!');
        alert('Error: Log parameters not available. Please try reopening the log.');
        return;
    }

    const { project, repo, arch, pkg, status } = currentLogParams;
    console.log('[SHARE LOG] Extracted params:', { project, repo, arch, pkg, status });

    // Create link to project page with parameters to auto-open the log modal
    const params = new URLSearchParams({
        show_log: 'true',
        package: pkg,
        repository: repo,
        arch: arch,
        status: status
    });
    const fullUrl = `${window.location.origin}/projects/${encodeURIComponent(project)}?${params.toString()}`;
    console.log('[SHARE LOG] Full URL:', fullUrl);

    // Copy to clipboard with fallback for HTTP (non-secure) contexts
    function copyToClipboard(text) {
        // Try modern Clipboard API first (requires HTTPS)
        if (navigator.clipboard && navigator.clipboard.writeText) {
            return navigator.clipboard.writeText(text);
        }

        // Fallback for HTTP: use older execCommand method
        return new Promise((resolve, reject) => {
            const textArea = document.createElement('textarea');
            textArea.value = text;

            // Make it visible but off-screen for better browser compatibility
            textArea.style.position = 'absolute';
            textArea.style.left = '-9999px';
            textArea.style.top = '0';
            textArea.style.opacity = '0';
            textArea.setAttribute('readonly', '');

            document.body.appendChild(textArea);

            // For iOS compatibility
            if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
                const range = document.createRange();
                range.selectNodeContents(textArea);
                const selection = window.getSelection();
                selection.removeAllRanges();
                selection.addRange(range);
                textArea.setSelectionRange(0, 999999);
            } else {
                textArea.select();
                textArea.focus();
            }

            try {
                const successful = document.execCommand('copy');
                console.log('[SHARE LOG] execCommand result:', successful);
                document.body.removeChild(textArea);

                if (successful) {
                    resolve();
                } else {
                    reject(new Error('execCommand returned false'));
                }
            } catch (err) {
                console.error('[SHARE LOG] execCommand exception:', err);
                document.body.removeChild(textArea);
                reject(err);
            }
        });
    }

    copyToClipboard(fullUrl).then(() => {
        console.log('[SHARE LOG] Successfully copied to clipboard');
        // Show success notification
        const notification = document.createElement('div');
        notification.style.cssText = 'position: fixed; top: 20px; right: 20px; background: #28a745; color: white; padding: 15px 20px; border-radius: 5px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); z-index: 10000; font-size: 14px; max-width: 500px; word-break: break-all;';
        notification.innerHTML = `<i class="fas fa-check-circle me-2"></i> Build log link copied to clipboard!<br><small class="mt-1 d-block" style="opacity: 0.9;">${fullUrl}</small>`;
        document.body.appendChild(notification);

        setTimeout(() => {
            notification.style.transition = 'opacity 0.3s';
            notification.style.opacity = '0';
            setTimeout(() => {
                document.body.removeChild(notification);
            }, 300);
        }, 3000);
    }).catch(err => {
        console.error('Failed to copy link:', err);
        // Show a modal with selectable text as fallback
        const modal = document.createElement('div');
        modal.style.cssText = 'position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 10001; max-width: 80%;';
        modal.innerHTML = `
            <h5 style="margin-top: 0; color: #333;">Copy Build Log Link</h5>
            <p style="color: #666; margin-bottom: 10px;">Click the text below to select it, then press Ctrl+C (Cmd+C on Mac) to copy:</p>
            <input type="text" value="${fullUrl.replace(/"/g, '&quot;')}" readonly
                   style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-family: monospace; font-size: 12px;"
                   onclick="this.select()">
            <button onclick="this.parentElement.remove()"
                    style="margin-top: 15px; padding: 8px 16px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer;">
                Close
            </button>
        `;
        document.body.appendChild(modal);

        // Auto-select the input
        const input = modal.querySelector('input');
        input.select();
        input.focus();
    });
});

// Clear search when modal is closed
document.getElementById('buildLogModal').addEventListener('hidden.bs.modal', function() {
    document.getElementById('logSearchInput').value = '';
    logSearchMatches = [];
    logSearchCurrentIndex = -1;
    logSearchOriginalText = '';
    currentErrorIndex = -1;
    document.getElementById('logSearchCount').textContent = '0/0';
});

// Auto-open build log modal from URL parameters (for shared links)
window.addEventListener('DOMContentLoaded', function() {
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('show_log') === 'true') {
        const pkg = urlParams.get('package');
        const repo = urlParams.get('repository');
        const arch = urlParams.get('arch');
        const status = urlParams.get('status');

        if (pkg && repo && arch && status) {
            const project = '{{ project_name }}';

            // Open the modal after a short delay to ensure page is fully loaded
            setTimeout(() => {
                showBuildLog(project, repo, arch, pkg, status);
                const modal = new bootstrap.Modal(document.getElementById('buildLogModal'));
                modal.show();

                // Remove the URL parameters after opening to clean up the URL
                const cleanUrl = window.location.origin + window.location.pathname;
                window.history.replaceState({}, document.title, cleanUrl);
            }, 500);
        }
    }
});
</script>
{% endblock %}