{% extends "base.html" %}

{% block title %}Audyt IT - {{ company.name }} - Norda Biznes Partner{% endblock %}

{% block extra_css %}
<style>
    .audit-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: var(--spacing-xl);
        flex-wrap: wrap;
        gap: var(--spacing-md);
    }

    .audit-header-info h1 {
        font-size: var(--font-size-2xl);
        color: var(--text-primary);
        margin-bottom: var(--spacing-xs);
    }

    .audit-header-info p {
        color: var(--text-secondary);
        font-size: var(--font-size-sm);
    }

    .data-source-info {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        margin-top: var(--spacing-sm);
        padding: var(--spacing-xs) var(--spacing-sm);
        background: var(--info-light, #e0f2fe);
        border-radius: var(--radius);
        font-size: var(--font-size-sm);
        color: var(--info, #0284c7);
    }

    .data-source-info svg {
        flex-shrink: 0;
    }

    .header-actions {
        display: flex;
        gap: var(--spacing-sm);
        align-items: center;
    }

    /* Score Section */
    .score-section {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: var(--spacing-xl);
        margin-bottom: var(--spacing-xl);
        background: var(--surface);
        padding: var(--spacing-xl);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
    }

    @media (max-width: 768px) {
        .score-section {
            grid-template-columns: 1fr;
            text-align: center;
        }
    }

    .score-circle {
        width: 180px;
        height: 180px;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        background: conic-gradient(
            var(--score-color, var(--secondary)) calc(var(--score-percent, 0) * 3.6deg),
            #e2e8f0 0deg
        );
        margin: 0 auto;
    }

    .score-circle::before {
        content: '';
        position: absolute;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: var(--surface);
    }

    .score-value {
        position: relative;
        z-index: 1;
        font-size: 3rem;
        font-weight: 700;
        line-height: 1;
    }

    /* Unified 5-level color scale: 0-29 red, 30-49 orange, 50-69 amber, 70-89 lime, 90-100 green */
    .score-value.score-excellent { color: #10b981; }
    .score-value.score-good { color: #84cc16; }
    .score-value.score-average { color: #f59e0b; }
    .score-value.score-needs-work { color: #f97316; }
    .score-value.score-poor { color: #ef4444; }

    .score-label {
        position: relative;
        z-index: 1;
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        margin-top: var(--spacing-xs);
    }

    .score-details {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .score-category {
        font-size: var(--font-size-xl);
        font-weight: 600;
        margin-bottom: var(--spacing-sm);
    }

    /* Unified 5-level color scale */
    .score-category.excellent { color: #10b981; }
    .score-category.good { color: #84cc16; }
    .score-category.average { color: #f59e0b; }
    .score-category.needs-work { color: #f97316; }
    .score-category.poor { color: #ef4444; }

    .score-description {
        color: var(--text-secondary);
        line-height: 1.6;
        margin-bottom: var(--spacing-md);
    }

    .audit-meta {
        display: flex;
        gap: var(--spacing-lg);
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        flex-wrap: wrap;
    }

    .audit-meta-item {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
    }

    .maturity-badge {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        padding: var(--spacing-xs) var(--spacing-sm);
        border-radius: var(--radius);
        font-size: var(--font-size-sm);
        font-weight: 500;
    }

    .maturity-badge.basic { background: #fee2e2; color: #dc2626; }
    .maturity-badge.developing { background: #fef3c7; color: #d97706; }
    .maturity-badge.established { background: #dbeafe; color: #2563eb; }
    .maturity-badge.advanced { background: #dcfce7; color: #16a34a; }

    /* Metrics Grid */
    .metrics-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-xl);
    }

    .metric-card {
        background: var(--surface);
        border-radius: var(--radius-lg);
        padding: var(--spacing-lg);
        box-shadow: var(--shadow-sm);
        text-align: center;
        border-left: 4px solid var(--border);
    }

    .metric-card.good { border-left-color: var(--success); }
    .metric-card.medium { border-left-color: var(--warning); }
    .metric-card.poor { border-left-color: var(--error); }
    .metric-card.none { border-left-color: var(--border); }

    .metric-icon {
        width: 48px;
        height: 48px;
        margin: 0 auto var(--spacing-sm);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .metric-icon.good { background: #dcfce7; color: #16a34a; }
    .metric-icon.medium { background: #fef3c7; color: #d97706; }
    .metric-icon.poor { background: #fee2e2; color: #dc2626; }
    .metric-icon.none { background: var(--bg-tertiary); color: var(--text-tertiary); }

    .metric-name {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        margin-bottom: var(--spacing-xs);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .metric-value {
        font-size: var(--font-size-2xl);
        font-weight: 700;
    }

    .metric-value.good { color: var(--success); }
    .metric-value.medium { color: var(--warning); }
    .metric-value.poor { color: var(--error); }
    .metric-value.none { color: var(--text-tertiary); }

    /* Section styling */
    .section {
        background: var(--surface);
        padding: var(--spacing-xl);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
        margin-bottom: var(--spacing-xl);
    }

    .section-title {
        font-size: var(--font-size-xl);
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: var(--spacing-md);
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

    /* Technology Flags Grid */
    .tech-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: var(--spacing-md);
    }

    .tech-item {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) var(--spacing-md);
        background: var(--bg-tertiary);
        border-radius: var(--radius);
    }

    .tech-item.active {
        background: #dcfce7;
    }

    .tech-item.inactive {
        background: var(--bg-tertiary);
        opacity: 0.6;
    }

    .tech-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }

    .tech-icon.active { background: #16a34a; color: white; }
    .tech-icon.inactive { background: var(--border); color: var(--text-secondary); }

    .tech-name {
        font-size: var(--font-size-sm);
        font-weight: 500;
    }

    /* Collaboration Flags */
    .collab-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: var(--spacing-md);
    }

    .collab-item {
        display: flex;
        align-items: flex-start;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
        background: var(--bg-tertiary);
        border-radius: var(--radius);
        border-left: 3px solid var(--border);
    }

    .collab-item.open {
        background: #f0fdf4;
        border-left-color: var(--success);
    }

    .collab-item.closed {
        opacity: 0.6;
    }

    .collab-icon {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }

    .collab-icon.open { color: var(--success); }
    .collab-icon.closed { color: var(--text-tertiary); }

    .collab-content {
        flex: 1;
    }

    .collab-name {
        font-weight: 500;
        font-size: var(--font-size-sm);
        margin-bottom: 2px;
    }

    .collab-desc {
        font-size: var(--font-size-xs);
        color: var(--text-secondary);
    }

    /* No Audit State */
    .no-audit-state {
        text-align: center;
        padding: var(--spacing-2xl);
        background: var(--surface);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
    }

    .no-audit-state svg {
        width: 80px;
        height: 80px;
        color: var(--text-secondary);
        opacity: 0.5;
        margin-bottom: var(--spacing-md);
    }

    .no-audit-state h2 {
        font-size: var(--font-size-xl);
        color: var(--text-primary);
        margin-bottom: var(--spacing-sm);
    }

    .no-audit-state p {
        color: var(--text-secondary);
        margin-bottom: var(--spacing-lg);
    }

    /* Breadcrumb */
    .breadcrumb {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        margin-bottom: var(--spacing-md);
    }

    .breadcrumb a {
        color: var(--primary);
        text-decoration: none;
    }

    .breadcrumb a:hover {
        text-decoration: underline;
    }

    .breadcrumb-separator {
        color: var(--border);
    }
</style>
{% endblock %}

{% block content %}
<!-- Breadcrumb -->
<div class="breadcrumb">
    <a href="{{ url_for('index') }}">Firmy</a>
    <span class="breadcrumb-separator">/</span>
    <a href="{{ url_for('company_detail', company_id=company.id) }}">{{ company.name }}</a>
    <span class="breadcrumb-separator">/</span>
    <span>Audyt IT</span>
</div>

<div class="audit-header">
    <div class="audit-header-info">
        <h1>Audyt Infrastruktury IT</h1>
        <p>{{ company.name }}</p>
        <div class="data-source-info">
            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/>
            </svg>
            <span>Analiza infrastruktury IT i bezpieczenstwa</span>
        </div>
    </div>
    <div class="header-actions">
        <a href="{{ url_for('company_detail', company_id=company.id) }}" class="btn btn-outline btn-sm">
            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
            </svg>
            Profil firmy
        </a>
        {% if can_edit %}
        <a href="{{ url_for('it_audit_form', company_id=company.id) }}" class="btn btn-primary btn-sm">
            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
            </svg>
            {% if audit_data %}Edytuj audyt{% else %}Wypelnij audyt{% endif %}
        </a>
        {% endif %}
    </div>
</div>

{% if audit_data %}
<!-- Score Section -->
{# Unified 5-level color scale: 0-29 red, 30-49 orange, 50-69 amber, 70-89 lime, 90-100 green #}
{% set score = audit_data.overall_score or 0 %}
<div class="score-section">
    <div class="score-circle" style="--score-percent: {{ score }}; --score-color: {% if score >= 90 %}#10b981{% elif score >= 70 %}#84cc16{% elif score >= 50 %}#f59e0b{% elif score >= 30 %}#f97316{% else %}#ef4444{% endif %};">
        <span class="score-value" style="color: {% if score >= 90 %}#10b981{% elif score >= 70 %}#84cc16{% elif score >= 50 %}#f59e0b{% elif score >= 30 %}#f97316{% else %}#ef4444{% endif %};">{{ score }}</span>
        <span class="score-label">/ 100</span>
    </div>
    <div class="score-details">
        <div class="score-category" style="color: {% if score >= 90 %}#10b981{% elif score >= 70 %}#84cc16{% elif score >= 50 %}#f59e0b{% elif score >= 30 %}#f97316{% else %}#ef4444{% endif %};">
            {% if score >= 90 %}
            Doskonala infrastruktura IT
            {% elif score >= 70 %}
            Dobra infrastruktura IT
            {% elif score >= 50 %}
            Przecietna infrastruktura IT
            {% elif score >= 30 %}
            Infrastruktura IT wymaga rozwoju
            {% else %}
            Slaba infrastruktura IT
            {% endif %}
        </div>
        <p class="score-description">
            {% if score >= 75 %}
            Firma posiada dojrzala infrastrukture IT z wysokim poziomem bezpieczenstwa. Doskonaly kandydat do wspolpracy.
            {% elif score >= 50 %}
            Solidna infrastruktura IT z dobrymi praktykami bezpieczenstwa. Potencjal do wspolpracy.
            {% elif score >= 25 %}
            Infrastruktura IT w fazie rozwoju. Warto zainwestowac w bezpieczenstwo i automatyzacje.
            {% else %}
            Podstawowa infrastruktura IT. Zalecane wdrozenie podstawowych srodkow bezpieczenstwa.
            {% endif %}
        </p>
        <div class="audit-meta">
            <div class="audit-meta-item">
                <span class="maturity-badge {{ audit_data.maturity_level }}">
                    {{ audit_data.maturity_label }}
                </span>
            </div>
            <div class="audit-meta-item">
                <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                </svg>
                <span>Ostatni audyt: {{ audit_data.audit_date.strftime('%d.%m.%Y') if audit_data.audit_date else 'Brak danych' }}</span>
            </div>
            {% if audit_data.audit_source %}
            <div class="audit-meta-item">
                <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
                <span>Zrodlo: {{ audit_data.audit_source }}</span>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Metrics Grid -->
<h2 class="section-title">
    <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
    </svg>
    Szczegolowe wyniki
</h2>

<div class="metrics-grid">
    <!-- Overall Score -->
    {% set overall = audit_data.overall_score %}
    {% set overall_class = 'good' if overall and overall >= 75 else ('medium' if overall and overall >= 50 else ('poor' if overall else 'none')) %}
    <div class="metric-card {{ overall_class }}">
        <div class="metric-icon {{ overall_class }}">
            <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
            </svg>
        </div>
        <div class="metric-name">Wynik ogolny</div>
        <div class="metric-value {{ overall_class }}">{{ overall if overall else '-' }}</div>
    </div>

    <!-- Security Score -->
    {% set security = audit_data.security_score %}
    {% set security_class = 'good' if security and security >= 75 else ('medium' if security and security >= 50 else ('poor' if security else 'none')) %}
    <div class="metric-card {{ security_class }}">
        <div class="metric-icon {{ security_class }}">
            <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
            </svg>
        </div>
        <div class="metric-name">Bezpieczenstwo</div>
        <div class="metric-value {{ security_class }}">{{ security if security else '-' }}</div>
    </div>

    <!-- Collaboration Score -->
    {% set collab = audit_data.collaboration_score %}
    {% set collab_class = 'good' if collab and collab >= 75 else ('medium' if collab and collab >= 50 else ('poor' if collab else 'none')) %}
    <div class="metric-card {{ collab_class }}">
        <div class="metric-icon {{ collab_class }}">
            <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
            </svg>
        </div>
        <div class="metric-name">Wspolpraca</div>
        <div class="metric-value {{ collab_class }}">{{ collab if collab else '-' }}</div>
    </div>

    <!-- Completeness Score -->
    {% set compl = audit_data.completeness_score %}
    {% set compl_class = 'good' if compl and compl >= 75 else ('medium' if compl and compl >= 50 else ('poor' if compl else 'none')) %}
    <div class="metric-card {{ compl_class }}">
        <div class="metric-icon {{ compl_class }}">
            <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
            </svg>
        </div>
        <div class="metric-name">Kompletnosc</div>
        <div class="metric-value {{ compl_class }}">{{ compl if compl else '-' }}</div>
    </div>
</div>

<!-- Technology Section -->
<div class="section">
    <h2 class="section-title">
        <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/>
        </svg>
        Technologie i rozwiazania
    </h2>
    <div class="tech-grid">
        <div class="tech-item {{ 'active' if audit_data.has_azure_ad else 'inactive' }}">
            <div class="tech-icon {{ 'active' if audit_data.has_azure_ad else 'inactive' }}">
                {% if audit_data.has_azure_ad %}&#10003;{% else %}&#10007;{% endif %}
            </div>
            <span class="tech-name">Azure AD / Entra ID</span>
        </div>
        <div class="tech-item {{ 'active' if audit_data.has_m365 else 'inactive' }}">
            <div class="tech-icon {{ 'active' if audit_data.has_m365 else 'inactive' }}">
                {% if audit_data.has_m365 %}&#10003;{% else %}&#10007;{% endif %}
            </div>
            <span class="tech-name">Microsoft 365</span>
        </div>
        <div class="tech-item {{ 'active' if audit_data.has_google_workspace else 'inactive' }}">
            <div class="tech-icon {{ 'active' if audit_data.has_google_workspace else 'inactive' }}">
                {% if audit_data.has_google_workspace %}&#10003;{% else %}&#10007;{% endif %}
            </div>
            <span class="tech-name">Google Workspace</span>
        </div>
        <div class="tech-item {{ 'active' if audit_data.has_local_ad else 'inactive' }}">
            <div class="tech-icon {{ 'active' if audit_data.has_local_ad else 'inactive' }}">
                {% if audit_data.has_local_ad %}&#10003;{% else %}&#10007;{% endif %}
            </div>
            <span class="tech-name">Local Active Directory</span>
        </div>
        <div class="tech-item {{ 'active' if audit_data.has_edr else 'inactive' }}">
            <div class="tech-icon {{ 'active' if audit_data.has_edr else 'inactive' }}">
                {% if audit_data.has_edr %}&#10003;{% else %}&#10007;{% endif %}
            </div>
            <span class="tech-name">EDR / XDR</span>
        </div>
        <div class="tech-item {{ 'active' if audit_data.has_mfa else 'inactive' }}">
            <div class="tech-icon {{ 'active' if audit_data.has_mfa else 'inactive' }}">
                {% if audit_data.has_mfa %}&#10003;{% else %}&#10007;{% endif %}
            </div>
            <span class="tech-name">MFA (2FA)</span>
        </div>
        <div class="tech-item {{ 'active' if audit_data.has_vpn else 'inactive' }}">
            <div class="tech-icon {{ 'active' if audit_data.has_vpn else 'inactive' }}">
                {% if audit_data.has_vpn %}&#10003;{% else %}&#10007;{% endif %}
            </div>
            <span class="tech-name">VPN</span>
        </div>
        <div class="tech-item {{ 'active' if audit_data.has_proxmox_pbs else 'inactive' }}">
            <div class="tech-icon {{ 'active' if audit_data.has_proxmox_pbs else 'inactive' }}">
                {% if audit_data.has_proxmox_pbs %}&#10003;{% else %}&#10007;{% endif %}
            </div>
            <span class="tech-name">Proxmox PBS</span>
        </div>
        <div class="tech-item {{ 'active' if audit_data.has_dr_plan else 'inactive' }}">
            <div class="tech-icon {{ 'active' if audit_data.has_dr_plan else 'inactive' }}">
                {% if audit_data.has_dr_plan %}&#10003;{% else %}&#10007;{% endif %}
            </div>
            <span class="tech-name">Plan Disaster Recovery</span>
        </div>
        <div class="tech-item {{ 'active' if audit_data.has_mdm else 'inactive' }}">
            <div class="tech-icon {{ 'active' if audit_data.has_mdm else 'inactive' }}">
                {% if audit_data.has_mdm %}&#10003;{% else %}&#10007;{% endif %}
            </div>
            <span class="tech-name">MDM</span>
        </div>
    </div>
</div>

<!-- Collaboration Section -->
<div class="section">
    <h2 class="section-title">
        <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
        </svg>
        Otwartosc na wspolprace
    </h2>
    <div class="collab-grid">
        <div class="collab-item {{ 'open' if audit_data.open_to_shared_licensing else 'closed' }}">
            <svg class="collab-icon {{ 'open' if audit_data.open_to_shared_licensing else 'closed' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                {% if audit_data.open_to_shared_licensing %}
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                {% else %}
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                {% endif %}
            </svg>
            <div class="collab-content">
                <div class="collab-name">Wspoldzielone licencje M365</div>
                <div class="collab-desc">Grupowy zakup licencji Microsoft 365</div>
            </div>
        </div>
        <div class="collab-item {{ 'open' if audit_data.open_to_backup_replication else 'closed' }}">
            <svg class="collab-icon {{ 'open' if audit_data.open_to_backup_replication else 'closed' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                {% if audit_data.open_to_backup_replication %}
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                {% else %}
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                {% endif %}
            </svg>
            <div class="collab-content">
                <div class="collab-name">Replikacja backupow</div>
                <div class="collab-desc">Wymiana backupow miedzy firmami (off-site)</div>
            </div>
        </div>
        <div class="collab-item {{ 'open' if audit_data.open_to_teams_federation else 'closed' }}">
            <svg class="collab-icon {{ 'open' if audit_data.open_to_teams_federation else 'closed' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                {% if audit_data.open_to_teams_federation %}
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                {% else %}
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                {% endif %}
            </svg>
            <div class="collab-content">
                <div class="collab-name">Federacja Teams</div>
                <div class="collab-desc">Wspolna komunikacja przez MS Teams</div>
            </div>
        </div>
        <div class="collab-item {{ 'open' if audit_data.open_to_shared_monitoring else 'closed' }}">
            <svg class="collab-icon {{ 'open' if audit_data.open_to_shared_monitoring else 'closed' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                {% if audit_data.open_to_shared_monitoring %}
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                {% else %}
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                {% endif %}
            </svg>
            <div class="collab-content">
                <div class="collab-name">Wspolny monitoring</div>
                <div class="collab-desc">Wspolna infrastruktura Zabbix</div>
            </div>
        </div>
        <div class="collab-item {{ 'open' if audit_data.open_to_collective_purchasing else 'closed' }}">
            <svg class="collab-icon {{ 'open' if audit_data.open_to_collective_purchasing else 'closed' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                {% if audit_data.open_to_collective_purchasing %}
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                {% else %}
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                {% endif %}
            </svg>
            <div class="collab-content">
                <div class="collab-name">Zakupy grupowe</div>
                <div class="collab-desc">Wspolne zakupy sprzetu i uslug IT</div>
            </div>
        </div>
        <div class="collab-item {{ 'open' if audit_data.open_to_knowledge_sharing else 'closed' }}">
            <svg class="collab-icon {{ 'open' if audit_data.open_to_knowledge_sharing else 'closed' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                {% if audit_data.open_to_knowledge_sharing %}
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                {% else %}
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                {% endif %}
            </svg>
            <div class="collab-content">
                <div class="collab-name">Wymiana wiedzy</div>
                <div class="collab-desc">Spotkania i szkolenia IT</div>
            </div>
        </div>
    </div>
</div>

{% if audit_data.recommendations %}
<!-- Recommendations Section -->
<div class="section">
    <h2 class="section-title">
        <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
        </svg>
        Rekomendacje
    </h2>
    <p style="color: var(--text-secondary); line-height: 1.8;">{{ audit_data.recommendations }}</p>
</div>
{% endif %}

{% else %}
<!-- No Audit State -->
<div class="no-audit-state">
    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/>
    </svg>
    <h2>Brak danych audytu IT</h2>
    <p>Nie przeprowadzono jeszcze audytu infrastruktury IT dla tej firmy.</p>
    {% if can_edit %}
    <a href="{{ url_for('it_audit_form', company_id=company.id) }}" class="btn btn-primary">
        <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
        </svg>
        Wypelnij formularz audytu
    </a>
    {% endif %}
</div>
{% endif %}
{% endblock %}
