{% extends "base.html" %}

{% block title %}Линтинг {{ role_name }} - DevOpsLab{% endblock %}
{% block page_title %}Проверка синтаксиса: {{ role_name }}{% endblock %}

{% block header_actions %}
<a href="/lint" class="btn btn-secondary btn-sm">
    <i class="fas fa-arrow-left me-2"></i>
    Назад
</a>
<button type="button" class="btn btn-primary btn-sm" onclick="startLint()">
    <i class="fas fa-check-circle me-2"></i>
    Запустить проверку
</button>
{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h5 class="mb-0">Логи проверки</h5>
    </div>
    <div class="card-body p-0">
        <div class="log-container" id="lint-logs" style="height: 600px; overflow-y: auto; background: #1e1e1e; color: #d4d4d4; padding: 1rem; font-family: 'Courier New', monospace; font-size: 0.875rem;">
            <div class="text-muted text-center py-5">
                Нажмите "Запустить проверку" для начала
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function startLint() {
    const logsContainer = document.getElementById('lint-logs');
    logsContainer.innerHTML = '';
    
    // Создаем WebSocket подключение
    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
    const ws = new WebSocket(`${protocol}//${window.location.host}/ws/lint/{{ role_name }}`);
    
    ws.onmessage = (event) => {
        const data = JSON.parse(event.data);
        
        if (data.type === 'log' || data.type === 'info') {
            const logLine = document.createElement('div');
            logLine.className = `log-line log-${data.level || 'info'}`;
            logLine.textContent = data.data;
            logsContainer.appendChild(logLine);
            
            // Автоскролл
            logsContainer.scrollTop = logsContainer.scrollHeight;
        } else if (data.type === 'error') {
            const errorLine = document.createElement('div');
            errorLine.className = 'log-line log-error';
            errorLine.textContent = data.data;
            logsContainer.appendChild(errorLine);
        } else if (data.type === 'complete') {
            const completeLine = document.createElement('div');
            completeLine.className = 'log-line log-info';
            completeLine.textContent = data.data || '✅ Проверка завершена';
            logsContainer.appendChild(completeLine);
            ws.close();
        }
    };
    
    ws.onerror = (error) => {
        const errorLine = document.createElement('div');
        errorLine.className = 'log-line log-error';
        errorLine.textContent = `❌ Ошибка подключения: ${error}`;
        logsContainer.appendChild(errorLine);
    };
    
    ws.onclose = () => {
        console.log('WebSocket закрыт');
    };
}
</script>
{% endblock %}