{% extends "base.html" %}
{% block body_class %}dashboard-page{% endblock %}
{% block content %}
<button class="sidebar-toggle" onclick="document.querySelector('.sidebar').classList.toggle('open')">☰</button>
<div class="layout">
{% include "_sidebar.html" %}
<main class="main">
    {% if shs_alert %}
    <div class="shs-alert critical">⚠ {{ shs_alert }}</div>
    {% endif %}

    <div class="card-grid">
        <a href="/service/objects" class="card card-link">
            <div class="card-label">Активные объекты</div>
            <div class="card-value value-accent">{{ stats.objects }}</div>
        </a>
        <a href="/service/tasks" class="card card-link">
            <div class="card-label">Активные задачи</div>
            <div class="card-value {% if stats.tasks > 0 %}value-yellow{% else %}value-green{% endif %}">{{ stats.tasks }}</div>
        </a>
        <a href="/service/incidents" class="card card-link">
            <div class="card-label">Открытые инциденты</div>
            <div class="card-value {% if stats.incidents > 0 %}value-red{% else %}value-green{% endif %}">{{ stats.incidents }}</div>
        </a>
        <a href="/service/sla" class="card card-link">
            <div class="card-label">SLA контракты</div>
            <div class="card-value value-info">{{ stats.sla_count }}</div>
        </a>
        <a href="/service/sla" class="card card-link">
            <div class="card-label">SLA Compliance</div>
            <div class="card-value {% if stats.sla_compliance >= 90 %}value-green{% elif stats.sla_compliance >= 70 %}value-yellow{% else %}value-red{% endif %}">{{ stats.sla_compliance }}%</div>
        </a>
        {% if stats.shs %}
        <a href="/service/ceo" class="card card-link">
            <div class="card-label">SHS (System Health)</div>
            <div class="card-value {% if stats.shs.shs_status in ['Growth', 'Stable'] %}value-green{% else %}value-red{% endif %}">{{ stats.shs.shs_score }}</div>
            <div class="card-label"><span class="badge badge-{{ stats.shs.shs_status|lower }}">{{ stats.shs.shs_status }}</span></div>
        </a>
        {% endif %}
        {% if stats.my_tasks is defined %}
        <a href="/service/tasks" class="card card-link">
            <div class="card-label">Мои задачи</div>
            <div class="card-value">{{ stats.my_tasks }}</div>
        </a>
        {% endif %}
    </div>
    <div style="text-align:right;margin-top:12px;">
        <button class="btn btn-secondary btn-sm" onclick="loadDashSettings();document.getElementById('modal-dash-settings').classList.add('open')">Настроить</button>
    </div>
</main>
</div>
<div class="modal-overlay" id="modal-dash-settings"><div class="modal">
    <button type="button" class="modal-close" onclick="this.closest('.modal-overlay').classList.remove('open')">✕</button>
    <h2>Настройка дашборда</h2>
    <p style="color:var(--text-muted);font-size:13px;">Выберите показатели для отображения</p>
    <div id="dash-settings-list"></div>
    <div class="form-actions">
        <button type="button" class="btn btn-primary" onclick="saveDashSettings()">Сохранить</button>
        <button type="button" class="btn btn-secondary" onclick="this.closest('.modal-overlay').classList.remove('open')">Отмена</button>
    </div>
</div></div>
<script>
function getDashCards(){
    return document.querySelectorAll('.card-grid > .card-link');
}
function loadDashSettings(){
    var hidden = JSON.parse(localStorage.getItem('dash_hidden_cards') || '[]');
    var cards = getDashCards();
    var list = document.getElementById('dash-settings-list');
    list.innerHTML = '';
    cards.forEach(function(card){
        var label = card.querySelector('.card-label')?.textContent || 'Показатель';
        var key = label.trim();
        var checked = hidden.indexOf(key) === -1;
        var div = document.createElement('div');
        div.style.cssText = 'padding:6px 0;';
        div.innerHTML = '<label><input type="checkbox" class="dash-card-toggle" data-key="' + key.replace(/"/g,'&quot;') + '" ' + (checked?'checked':'') + '> ' + key + '</label>';
        list.appendChild(div);
    });
}
function saveDashSettings(){
    var hidden = [];
    document.querySelectorAll('.dash-card-toggle').forEach(function(cb){
        if(!cb.checked) hidden.push(cb.dataset.key);
    });
    localStorage.setItem('dash_hidden_cards', JSON.stringify(hidden));
    applyDashSettings();
    document.getElementById('modal-dash-settings').classList.remove('open');
}
function applyDashSettings(){
    var hidden = JSON.parse(localStorage.getItem('dash_hidden_cards') || '[]');
    var cards = getDashCards();
    cards.forEach(function(card){
        var label = card.querySelector('.card-label')?.textContent || '';
        card.style.display = hidden.indexOf(label.trim()) !== -1 ? 'none' : '';
    });
}
document.addEventListener('DOMContentLoaded', applyDashSettings);
</script>
<style>
.card-link { text-decoration:none; color:inherit; display:block; transition:transform 0.2s, box-shadow 0.2s; }
.card-link:hover { transform:translateY(-2px); box-shadow:var(--shadow); cursor:pointer; }
</style>
{% endblock %}