nordabiz/templates/company_detail.html
Maciej Pienczyn a73117ad4a feat: Add dedicated 'Dane z rejestrów urzędowych' section to company profile
- Display all CEIDG data: status, owner, PKD codes, contacts, addresses
- Display all KRS data: legal form, capital, KRS number
- Show data source banner with fetch timestamp and registry link
- Display additional business locations from CEIDG
- Show succession manager (zarządca sukcesyjny) if present
- All PKD codes displayed as tags with main PKD highlighted

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-01 07:37:06 +01:00

3694 lines
240 KiB
HTML
Executable File
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{% extends "base.html" %}
{% block title %}{{ company.name }} - Norda Biznes Partner{% endblock %}
{% block extra_css %}
<style>
.company-header {
background: white;
padding: var(--spacing-2xl);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
margin-bottom: var(--spacing-xl);
}
.company-category-badge {
display: inline-block;
padding: var(--spacing-xs) var(--spacing-md);
background: var(--primary);
color: white;
border-radius: var(--radius);
font-size: var(--font-size-sm);
margin-bottom: var(--spacing-md);
}
.company-logo-header {
width: 240px;
height: 240px;
background: var(--background);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
box-shadow: var(--shadow);
margin-bottom: var(--spacing-md);
}
.company-logo-header img {
max-width: 90%;
max-height: 90%;
object-fit: contain;
}
.company-name {
font-size: var(--font-size-3xl);
color: var(--text-primary);
margin-bottom: var(--spacing-md);
}
.company-description {
font-size: var(--font-size-lg);
color: var(--text-secondary);
line-height: 1.8;
margin-bottom: var(--spacing-xl);
}
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-md);
padding: var(--spacing-lg);
background: var(--background);
border-radius: var(--radius-lg);
}
.contact-item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
font-size: var(--font-size-base);
}
.contact-item svg {
color: var(--primary);
}
.contact-item a {
color: var(--primary);
text-decoration: none;
}
.contact-item a:hover {
text-decoration: underline;
}
.company-section {
background: white;
padding: var(--spacing-xl);
border-radius: var(--radius-xl);
box-shadow: var(--shadow);
margin-bottom: var(--spacing-xl);
}
.section-title {
font-size: var(--font-size-2xl);
color: var(--text-primary);
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-md);
border-bottom: 2px solid var(--border);
}
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-lg);
}
.info-item {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.info-label {
font-size: var(--font-size-sm);
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.info-value {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--text-primary);
}
.tags-container {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
}
.tag {
padding: var(--spacing-xs) var(--spacing-md);
background: var(--background);
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
.tag.primary {
background: var(--primary);
color: white;
border-color: var(--primary);
}
.back-link {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
color: var(--text-secondary);
text-decoration: none;
margin-bottom: var(--spacing-lg);
transition: var(--transition);
}
.back-link:hover {
color: var(--primary);
}
/* Quality Badge */
.quality-badge {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-xs) var(--spacing-md);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: var(--radius);
font-size: var(--font-size-sm);
margin-left: var(--spacing-sm);
font-weight: 600;
}
.quality-badge.verified {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}
.quality-badge.needs-review {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
/* AI Enrichment Button */
.ai-enrich-btn {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-lg);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: var(--radius);
font-size: var(--font-size-sm);
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.ai-enrich-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.ai-enrich-btn:disabled {
background: #ccc;
cursor: not-allowed;
opacity: 0.7;
}
/* AI Progress Modal */
.ai-progress-modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 2000;
align-items: center;
justify-content: center;
backdrop-filter: blur(4px);
}
.ai-progress-modal.active {
display: flex;
}
.ai-progress-content {
background: white;
border-radius: var(--radius-xl);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
width: 90%;
max-width: 600px;
max-height: 80vh;
overflow: hidden;
animation: modalSlideIn 0.3s ease;
}
@keyframes modalSlideIn {
from { transform: translateY(-30px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.ai-progress-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-lg) var(--spacing-xl);
border-bottom: 1px solid var(--border);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.ai-progress-header h3 {
margin: 0;
font-size: var(--font-size-xl);
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.ai-progress-header .spinner-icon {
width: 24px;
height: 24px;
border: 3px solid rgba(255,255,255,0.3);
border-top-color: white;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
.ai-cancel-btn {
padding: var(--spacing-sm) var(--spacing-lg);
background: rgba(255,255,255,0.2);
color: white;
border: 1px solid rgba(255,255,255,0.3);
border-radius: var(--radius);
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
}
.ai-cancel-btn:hover {
background: rgba(255,255,255,0.3);
}
.ai-progress-body {
padding: var(--spacing-xl);
}
.ai-progress-bar-container {
margin-bottom: var(--spacing-lg);
}
.ai-progress-bar-bg {
height: 28px;
background: var(--background);
border-radius: 14px;
overflow: hidden;
position: relative;
}
.ai-progress-bar {
height: 100%;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
border-radius: 14px;
transition: width 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
min-width: 50px;
}
.ai-progress-bar span {
color: white;
font-weight: 700;
font-size: var(--font-size-sm);
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.ai-progress-status {
font-size: var(--font-size-base);
color: var(--text-secondary);
margin-bottom: var(--spacing-lg);
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.ai-progress-status .status-icon {
font-size: 1.2em;
}
.ai-progress-log {
background: var(--background);
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
max-height: 300px;
overflow-y: auto;
font-family: monospace;
font-size: var(--font-size-sm);
}
.ai-log-entry {
padding: var(--spacing-sm) 0;
border-bottom: 1px solid var(--border);
display: flex;
align-items: flex-start;
gap: var(--spacing-sm);
}
.ai-log-entry:last-child {
border-bottom: none;
}
.ai-log-entry.step {
color: var(--text-primary);
font-weight: 600;
}
.ai-log-entry.success {
color: var(--success);
}
.ai-log-entry.error {
color: var(--error);
}
.ai-log-entry.info {
color: var(--text-secondary);
padding-left: var(--spacing-lg);
}
.ai-log-icon {
flex-shrink: 0;
width: 20px;
text-align: center;
}
.ai-progress-footer {
padding: var(--spacing-lg) var(--spacing-xl);
border-top: 1px solid var(--border);
background: var(--background);
display: flex;
justify-content: flex-end;
gap: var(--spacing-md);
}
.ai-progress-footer .btn {
padding: var(--spacing-sm) var(--spacing-xl);
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.ai-analyzing {
animation: pulse 1.5s ease-in-out infinite;
}
.quality-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: var(--spacing-xl);
border-radius: var(--radius-xl);
color: white;
margin-bottom: var(--spacing-xl);
}
.quality-section.verified {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}
.quality-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-md);
margin-top: var(--spacing-md);
}
.quality-stat {
background: rgba(255, 255, 255, 0.2);
padding: var(--spacing-md);
border-radius: var(--radius);
}
.quality-stat-value {
font-size: var(--font-size-3xl);
font-weight: 700;
margin-bottom: var(--spacing-xs);
}
.quality-stat-label {
font-size: var(--font-size-sm);
opacity: 0.9;
}
/* Contact Bar - Quick Access */
.contact-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-lg);
background: white;
border-radius: var(--radius-xl);
box-shadow: var(--shadow);
margin-bottom: var(--spacing-xl);
}
.contact-bar-item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-md);
background: var(--background);
border-radius: var(--radius);
font-size: var(--font-size-base);
color: var(--text-secondary);
text-decoration: none;
transition: var(--transition);
border: 1px solid var(--border);
}
.contact-bar-item:hover {
background: var(--primary);
color: white;
border-color: var(--primary);
}
.contact-bar-item.disabled {
opacity: 0.5;
cursor: default;
pointer-events: none;
}
.contact-bar-item svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* Social Media Colors */
.contact-bar-item.social-facebook { color: #1877f2; border-color: #1877f2; }
.contact-bar-item.social-facebook:hover { background: #1877f2; color: white; }
.contact-bar-item.social-instagram { color: #e4405f; border-color: #e4405f; }
.contact-bar-item.social-instagram:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: white; border-color: #e4405f; }
.contact-bar-item.social-linkedin { color: #0a66c2; border-color: #0a66c2; }
.contact-bar-item.social-linkedin:hover { background: #0a66c2; color: white; }
.contact-bar-item.social-youtube { color: #ff0000; border-color: #ff0000; }
.contact-bar-item.social-youtube:hover { background: #ff0000; color: white; }
.contact-bar-item.social-twitter { color: #000000; border-color: #000000; }
.contact-bar-item.social-twitter:hover { background: #000000; color: white; }
.contact-bar-item.social-tiktok { color: #000000; border-color: #000000; }
.contact-bar-item.social-tiktok:hover { background: #000000; color: white; }
/* GBP Audit link - styled as action button */
.contact-bar-item.gbp-audit { color: #4285f4; border-color: #4285f4; background: rgba(66, 133, 244, 0.05); }
.contact-bar-item.gbp-audit:hover { background: #4285f4; color: white; }
/* SEO Audit link - styled as action button */
.contact-bar-item.seo-audit { color: #16a34a; border-color: #16a34a; background: rgba(22, 163, 74, 0.05); }
.contact-bar-item.seo-audit:hover { background: #16a34a; color: white; }
/* Social Media Audit link - styled as action button */
.contact-bar-item.social-audit { color: #a855f7; border-color: #a855f7; background: rgba(168, 85, 247, 0.05); }
.contact-bar-item.social-audit:hover { background: #a855f7; color: white; }
/* IT Infrastructure Audit link - styled as action button (teal/cyan) */
.contact-bar-item.it-audit { color: #0891b2; border-color: #0891b2; background: rgba(8, 145, 178, 0.05); }
.contact-bar-item.it-audit:hover { background: #0891b2; color: white; }
@media (max-width: 768px) {
.contact-bar {
justify-content: center;
}
.contact-bar-item {
flex: 1 1 calc(50% - var(--spacing-md));
justify-content: center;
min-width: 140px;
}
}
/* SEO Section Responsive Styles */
@media (max-width: 1024px) {
#seo-metrics [style*="grid-template-columns: repeat(4"] {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 640px) {
#seo-metrics [style*="grid-template-columns: repeat(4"],
#seo-metrics [style*="grid-template-columns: repeat(3"],
#seo-metrics [style*="grid-template-columns: repeat(2"] {
grid-template-columns: 1fr !important;
}
}
</style>
{% endblock %}
{% block content %}
<a href="{{ url_for('index') }}" class="back-link">
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
<path d="M19 12H5M12 19l-7-7 7-7"/>
</svg>
Powrót do katalogu
</a>
<div class="company-header">
<div class="company-logo-header">
<img src="{{ url_for('static', filename='img/companies/' ~ company.slug ~ '.webp') }}"
alt="{{ company.name }}"
onerror="if(!this.dataset.triedSvg){this.dataset.triedSvg='1';this.src=this.src.replace('.webp','.svg')}else{this.parentElement.style.display='none'}">
</div>
{% if company.category %}
<span class="company-category-badge">{{ company.category.name }}</span>
{% endif %}
{% if quality_data %}
<span class="quality-badge {% if quality_data.quality_score >= 95 %}verified{% elif quality_data.quality_score < 80 %}needs-review{% endif %}">
✓ Zweryfikowano {{ quality_data.verification_count }}x | Jakość: {{ quality_data.quality_score }}%
</span>
{% else %}
<span class="quality-badge needs-review">
⏳ Niezweryfikowana
</span>
{% endif %}
<h1 class="company-name">{{ company.name }}</h1>
<!-- AI Enrichment Button -->
<div style="margin: var(--spacing-md) 0;">
<button
id="aiEnrichBtn"
class="ai-enrich-btn"
data-company-id="{{ company.id }}"
{% if not can_enrich %}disabled title="Tylko administrator lub właściciel firmy może wzbogacić dane"{% endif %}
>
<span class="spinner"></span>
<svg class="btn-text" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
<path d="M2 17l10 5 10-5"/>
<path d="M2 12l10 5 10-5"/>
</svg>
<span class="btn-text">Wzbogac dane AI</span>
</button>
{% if not can_enrich %}
<span style="font-size: var(--font-size-sm); color: var(--text-secondary); margin-left: var(--spacing-sm);">
(tylko admin lub wlasciciel)
</span>
{% endif %}
</div>
{% if company.description_short %}
<p class="company-description">{{ company.description_short }}</p>
{% endif %}
</div>
<!-- Convert social_media list to dict for contact bar -->
{% set sm_bar = {} %}
{% if social_media %}
{% for sm in social_media %}
{% if sm.is_valid != false %}
{% set _ = sm_bar.update({sm.platform: sm}) %}
{% endif %}
{% endfor %}
{% endif %}
<!-- PASEK KONTAKTOWY - szybki dostep -->
<div class="contact-bar">
{% if company.website %}
<a href="{{ company.website }}" class="contact-bar-item" target="_blank" rel="noopener noreferrer">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"/>
<path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
</svg>
<span>WWW</span>
</a>
{% else %}
<span class="contact-bar-item disabled">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"/>
<path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
</svg>
<span>Brak WWW</span>
</span>
{% endif %}
{% if company.email %}
<a href="mailto:{{ company.email }}" class="contact-bar-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
<polyline points="22,6 12,13 2,6"/>
</svg>
<span>Email</span>
</a>
{% else %}
<span class="contact-bar-item disabled">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
<polyline points="22,6 12,13 2,6"/>
</svg>
<span>Brak email</span>
</span>
{% endif %}
{% if company.phone %}
<a href="tel:{{ company.phone }}" class="contact-bar-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
</svg>
<span>Telefon</span>
</a>
{% else %}
<span class="contact-bar-item disabled">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
</svg>
<span>Brak telefonu</span>
</span>
{% endif %}
{% if company.address_city %}
<span class="contact-bar-item" style="cursor: default;">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
<circle cx="12" cy="10" r="3"/>
</svg>
<span>{{ company.address_city }}</span>
</span>
{% else %}
<span class="contact-bar-item disabled">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
<circle cx="12" cy="10" r="3"/>
</svg>
<span>Brak lokalizacji</span>
</span>
{% endif %}
<!-- Social Media buttons - only show if company has profile -->
{% if sm_bar.get('facebook') %}
<a href="{{ sm_bar.facebook.url }}" class="contact-bar-item social-facebook" target="_blank" rel="noopener noreferrer" title="Facebook">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
</svg>
<span>Facebook</span>
</a>
{% endif %}
{% if sm_bar.get('instagram') %}
<a href="{{ sm_bar.instagram.url }}" class="contact-bar-item social-instagram" target="_blank" rel="noopener noreferrer" title="Instagram">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/>
</svg>
<span>Instagram</span>
</a>
{% endif %}
{% if sm_bar.get('linkedin') %}
<a href="{{ sm_bar.linkedin.url }}" class="contact-bar-item social-linkedin" target="_blank" rel="noopener noreferrer" title="LinkedIn">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
<span>LinkedIn</span>
</a>
{% endif %}
{% if sm_bar.get('youtube') %}
<a href="{{ sm_bar.youtube.url }}" class="contact-bar-item social-youtube" target="_blank" rel="noopener noreferrer" title="YouTube">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
</svg>
<span>YouTube</span>
</a>
{% endif %}
{% if sm_bar.get('twitter') %}
<a href="{{ sm_bar.twitter.url }}" class="contact-bar-item social-twitter" target="_blank" rel="noopener noreferrer" title="X (Twitter)">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
</svg>
<span>X</span>
</a>
{% endif %}
{% if sm_bar.get('tiktok') %}
<a href="{{ sm_bar.tiktok.url }}" class="contact-bar-item social-tiktok" target="_blank" rel="noopener noreferrer" title="TikTok">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/>
</svg>
<span>TikTok</span>
</a>
{% endif %}
{# GBP Audit link - visible to admins (all profiles) or regular users (own company only) #}
{% if current_user.is_authenticated %}
{% if current_user.is_admin or (current_user.company_id and current_user.company_id == company.id) %}
<a href="{{ url_for('gbp_audit_dashboard', slug=company.slug) }}" class="contact-bar-item gbp-audit" title="Audyt Google Business Profile">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<span>Audyt GBP</span>
</a>
{% endif %}
{% endif %}
{# SEO Audit link - visible to admins (all profiles) or regular users (own company only) #}
{% if current_user.is_authenticated %}
{% if current_user.is_admin or (current_user.company_id and current_user.company_id == company.id) %}
<a href="{{ url_for('seo_audit_dashboard', slug=company.slug) }}" class="contact-bar-item seo-audit" title="Audyt SEO strony WWW">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
</svg>
<span>Audyt SEO</span>
</a>
{% endif %}
{% endif %}
{# Social Media Audit link - visible to admins (all profiles) or regular users (own company only) #}
{% if current_user.is_authenticated %}
{% if current_user.is_admin or (current_user.company_id and current_user.company_id == company.id) %}
<a href="{{ url_for('social_audit_dashboard', slug=company.slug) }}" class="contact-bar-item social-audit" title="Audyt Social Media">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"/>
</svg>
<span>Audyt Social</span>
</a>
{% endif %}
{% endif %}
{# IT Infrastructure Audit link - visible to admins (all profiles) or regular users (own company only) #}
{% if current_user.is_authenticated %}
{% if current_user.is_admin or (current_user.company_id and current_user.company_id == company.id) %}
<a href="{{ url_for('it_audit_form', company_id=company.id) }}" class="contact-bar-item it-audit" title="Audyt Infrastruktury IT">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/>
</svg>
<span>Audyt IT</span>
</a>
{% endif %}
{% endif %}
</div>
<!-- O firmie - Single Description (prioritized sources) -->
{% set about_description = company.description_full or (ai_insights.business_summary if ai_insights else none) or (website_analysis.content_summary if website_analysis else none) %}
{% if about_description %}
<div class="company-section">
<h2 class="section-title">O firmie</h2>
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 1px solid var(--border);">
<div style="display: flex; align-items: flex-start; gap: var(--spacing-md);">
<div style="width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--primary), #6366f1); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<svg width="24" height="24" fill="white" viewBox="0 0 24 24">
<path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"/>
</svg>
</div>
<div style="flex: 1; line-height: 1.8; color: var(--text-secondary);">
{{ about_description }}
</div>
</div>
</div>
</div>
{% endif %}
<!-- Usługi i kompetencje - Combined Section -->
{# Collect all services from all sources #}
{% set all_services = [] %}
{% if website_analysis and website_analysis.services_extracted %}
{% for s in website_analysis.services_extracted %}{% set _ = all_services.append(s) %}{% endfor %}
{% endif %}
{% if ai_insights and ai_insights.services_list %}
{% for s in ai_insights.services_list %}
{% if s not in all_services %}{% set _ = all_services.append(s) %}{% endif %}
{% endfor %}
{% endif %}
{# Add keywords/tags #}
{% set all_keywords = [] %}
{% if website_analysis and website_analysis.main_keywords %}
{% for t in website_analysis.main_keywords %}{% set _ = all_keywords.append(t) %}{% endfor %}
{% endif %}
{% if ai_insights and ai_insights.industry_tags %}
{% for t in ai_insights.industry_tags %}
{% if t not in all_keywords %}{% set _ = all_keywords.append(t) %}{% endif %}
{% endfor %}
{% endif %}
{% if all_services or all_keywords or company.services or company.competencies %}
<div class="company-section">
<h2 class="section-title">Usługi i kompetencje</h2>
{# Services from AI/website analysis #}
{% if all_services %}
<div style="margin-bottom: var(--spacing-lg);">
<div style="display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-md);">
<div style="width: 32px; height: 32px; border-radius: 8px; background: var(--primary); display: flex; align-items: center; justify-content: center;">
<svg width="16" height="16" fill="white" viewBox="0 0 24 24">
<path d="M19.5 3.5L18 2l-1.5 1.5L15 2l-1.5 1.5L12 2l-1.5 1.5L9 2 7.5 3.5 6 2 4.5 3.5 3 2v20l1.5-1.5L6 22l1.5-1.5L9 22l1.5-1.5L12 22l1.5-1.5L15 22l1.5-1.5L18 22l1.5-1.5L21 22V2l-1.5 1.5zM19 19H5V5h14v14zM6 15h12v2H6v-2zm0-4h12v2H6v-2zm0-4h12v2H6V7z"/>
</svg>
</div>
<h3 style="font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin: 0;">Oferta</h3>
</div>
<div class="tags-container">
{% for service in all_services %}
<span class="tag" style="background: var(--primary); color: white;">{{ service }}</span>
{% endfor %}
</div>
</div>
{% endif %}
{# Company services from database #}
{% if company.services %}
<div style="margin-bottom: var(--spacing-lg);">
<div style="display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-md);">
<div style="width: 32px; height: 32px; border-radius: 8px; background: #10b981; display: flex; align-items: center; justify-content: center;">
<svg width="16" height="16" fill="white" viewBox="0 0 24 24">
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
</svg>
</div>
<h3 style="font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin: 0;">Usługi</h3>
</div>
<div class="tags-container">
{% for cs in company.services %}
{% if cs.service %}
<span class="tag {% if cs.is_primary %}primary{% endif %}">{{ cs.service.name }}</span>
{% endif %}
{% endfor %}
</div>
</div>
{% endif %}
{# Company competencies from database #}
{% if company.competencies %}
<div style="margin-bottom: var(--spacing-lg);">
<div style="display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-md);">
<div style="width: 32px; height: 32px; border-radius: 8px; background: #6366f1; display: flex; align-items: center; justify-content: center;">
<svg width="16" height="16" fill="white" viewBox="0 0 24 24">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
</div>
<h3 style="font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin: 0;">Kompetencje</h3>
</div>
<div class="tags-container">
{% for cc in company.competencies %}
{% if cc.competency %}
<span class="tag">{{ cc.competency.name }}</span>
{% endif %}
{% endfor %}
</div>
</div>
{% endif %}
{# Keywords/tags #}
{% if all_keywords %}
<div>
<div style="display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-md);">
<div style="width: 32px; height: 32px; border-radius: 8px; background: #8b5cf6; display: flex; align-items: center; justify-content: center;">
<svg width="16" height="16" fill="white" viewBox="0 0 24 24">
<path d="M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z"/>
</svg>
</div>
<h3 style="font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin: 0;">Słowa kluczowe</h3>
</div>
<div class="tags-container">
{% for tag in all_keywords %}
<span class="tag">{{ tag }}</span>
{% endfor %}
</div>
</div>
{% endif %}
</div>
{% endif %}
<!-- Business Profile Additional Data -->
{% if website_analysis or ai_insights %}
{# Category & Target Market Cards Grid #}
{% if ai_insights and (ai_insights.target_market or ai_insights.suggested_category) %}
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-lg); margin-bottom: var(--spacing-lg);">
{% if ai_insights.suggested_category %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid var(--primary);">
<div style="display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-md);">
<div style="width: 40px; height: 40px; border-radius: 10px; background: var(--primary); display: flex; align-items: center; justify-content: center;">
<svg width="20" height="20" fill="white" viewBox="0 0 24 24">
<path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/>
</svg>
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; font-weight: 500;">Kategoria</div>
</div>
<div style="font-size: var(--font-size-xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--spacing-xs);">{{ ai_insights.suggested_category }}</div>
{% if ai_insights.category_confidence %}
<div style="font-size: var(--font-size-sm); color: var(--text-secondary);">Pewność: {{ (ai_insights.category_confidence * 100)|round(1) }}%</div>
{% endif %}
</div>
{% endif %}
{% if ai_insights.target_market %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #10b981;">
<div style="display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-md);">
<div style="width: 40px; height: 40px; border-radius: 10px; background: #10b981; display: flex; align-items: center; justify-content: center;">
<svg width="20" height="20" fill="white" viewBox="0 0 24 24">
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
</svg>
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; font-weight: 500;">Rynek docelowy</div>
</div>
<div style="font-size: var(--font-size-base); color: var(--text-primary); line-height: 1.5;">{{ ai_insights.target_market }}</div>
</div>
{% endif %}
</div>
{% endif %}
{# Wyróżniki - Combined USPs and Values #}
{% if ai_insights and (ai_insights.unique_selling_points or ai_insights.company_values) %}
<div class="company-section">
<h2 class="section-title">Wyróżniki</h2>
{# Unique Selling Points #}
{% if ai_insights.unique_selling_points %}
<div style="margin-bottom: {% if ai_insights.company_values %}var(--spacing-lg){% else %}0{% endif %};">
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--spacing-sm);">
{% for usp in ai_insights.unique_selling_points %}
<div style="padding: var(--spacing-sm) var(--spacing-md); background: #dcfce7; color: #166534; border-radius: var(--radius); font-size: var(--font-size-sm); display: flex; align-items: center; gap: var(--spacing-xs);">
<svg width="16" height="16" fill="#16a34a" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
{{ usp }}
</div>
{% endfor %}
</div>
</div>
{% endif %}
{# Company Values as tags #}
{% if ai_insights.company_values %}
<div>
<div style="display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-md);">
<div style="width: 24px; height: 24px; border-radius: 6px; background: #f59e0b; display: flex; align-items: center; justify-content: center;">
<svg width="12" height="12" fill="white" viewBox="0 0 24 24">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>
</div>
<span style="font-size: var(--font-size-sm); font-weight: 500; color: var(--text-secondary);">Wartości</span>
</div>
<div class="tags-container">
{% for value in ai_insights.company_values %}
<span class="tag" style="background: #fef3c7; color: #92400e; border: 1px solid #fcd34d;">
{{ value }}
</span>
{% endfor %}
</div>
</div>
{% endif %}
</div>
{% endif %}
{# Certifications Card #}
{% if ai_insights and ai_insights.certifications %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); margin-bottom: var(--spacing-lg); border: 1px solid var(--border);">
<div style="display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-md);">
<div style="width: 32px; height: 32px; border-radius: 8px; background: #6366f1; display: flex; align-items: center; justify-content: center;">
<svg width="16" height="16" fill="white" viewBox="0 0 24 24">
<path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"/>
</svg>
</div>
<h3 style="font-size: var(--font-size-lg); font-weight: 600; color: var(--text-primary); margin: 0;">
Certyfikaty i uprawnienia
</h3>
</div>
<div class="tags-container">
{% for cert in ai_insights.certifications %}
<span class="tag" style="background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd;">
🏆 {{ cert }}
</span>
{% endfor %}
</div>
</div>
{% endif %}
{# Data source info card #}
{% if website_content or ai_insights %}
<div style="background: linear-gradient(135deg, #f8fafc, #f1f5f9); border-radius: var(--radius-lg); padding: var(--spacing-md) var(--spacing-lg); border: 1px solid #e2e8f0;">
<div style="display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-lg); font-size: var(--font-size-sm); color: var(--text-secondary);">
{% if website_content and website_content.url %}
<div style="display: flex; align-items: center; gap: var(--spacing-xs);">
<svg width="16" height="16" fill="#64748b" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/></svg>
<span>Źródło: <a href="{{ website_content.url }}" target="_blank" rel="noopener noreferrer" style="color: var(--primary); text-decoration: none;">{{ website_content.url|replace('https://', '')|replace('http://', '') }}</a></span>
</div>
{% endif %}
{% if website_content and website_content.scraped_at %}
<div style="display: flex; align-items: center; gap: var(--spacing-xs);">
<svg width="16" height="16" fill="#64748b" viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM9 10H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm-8 4H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2z"/></svg>
<span>Analiza: {{ website_content.scraped_at.strftime('%d.%m.%Y') }}</span>
</div>
{% endif %}
{% if ai_insights and ai_insights.ai_confidence_score %}
<div style="display: flex; align-items: center; gap: var(--spacing-xs);">
<svg width="16" height="16" fill="#64748b" viewBox="0 0 24 24"><path d="M21 10.12h-6.78l2.74-2.82c-2.73-2.7-7.15-2.8-9.88-.1-2.73 2.71-2.73 7.08 0 9.79s7.15 2.71 9.88 0C18.32 15.65 19 14.08 19 12.1h2c0 1.98-.88 4.55-2.64 6.29-3.51 3.48-9.21 3.48-12.72 0-3.5-3.47-3.53-9.11-.02-12.58s9.14-3.47 12.65 0L21 3v7.12zM12.5 8v4.25l3.5 2.08-.72 1.21L11 13V8h1.5z"/></svg>
<span>Pewność AI: {{ (ai_insights.ai_confidence_score * 100)|round(1) }}%</span>
</div>
{% endif %}
</div>
</div>
{% endif %}
{% endif %}
<!-- Zarząd i Wspólnicy Section -->
{% if people %}
<div class="company-section">
<h2 class="section-title">Zarząd i Wspólnicy</h2>
{% set role_colors = {'zarzad': '#e74c3c', 'wspolnik': '#2ecc71', 'prokurent': '#f39c12', 'wlasciciel_jdg': '#9b59b6'} %}
{% set role_icons = {'zarzad': 'briefcase', 'wspolnik': 'users', 'prokurent': 'file-signature', 'wlasciciel_jdg': 'user-tie'} %}
{% set role_names = {'zarzad': 'Zarząd', 'wspolnik': 'Wspólnicy', 'prokurent': 'Prokurenci', 'wlasciciel_jdg': 'Właściciel JDG'} %}
{# Group people by role_category #}
{% set grouped = {} %}
{% for cp in people %}
{% if cp.role_category not in grouped %}
{% set _ = grouped.update({cp.role_category: []}) %}
{% endif %}
{% set _ = grouped[cp.role_category].append(cp) %}
{% endfor %}
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-lg);">
{% for category in ['zarzad', 'wspolnik', 'prokurent', 'wlasciciel_jdg'] %}
{% if category in grouped %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border-left: 4px solid {{ role_colors[category] }};">
<h3 style="margin: 0 0 var(--spacing-md) 0; font-size: var(--font-size-lg); color: {{ role_colors[category] }}; display: flex; align-items: center; gap: var(--spacing-sm);">
{% if category == 'zarzad' %}
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M20 7h-4V4c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v3H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zM10 4h4v3h-4V4z"/></svg>
{% elif category == 'wspolnik' %}
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
{% elif category == 'prokurent' %}
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13z"/></svg>
{% else %}
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
{% endif %}
{{ role_names[category] }}
</h3>
{% for cp in grouped[category] %}
<a href="{{ url_for('person_detail', person_id=cp.person.id) }}" style="display: block; padding: var(--spacing-sm) 0; {% if not loop.last %}border-bottom: 1px solid var(--border);{% endif %} text-decoration: none; transition: background 0.2s; margin: 0 calc(-1 * var(--spacing-sm)); padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); border-radius: var(--radius);" onmouseover="this.style.background='var(--border)'" onmouseout="this.style.background='transparent'">
<div style="font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: var(--spacing-xs);">
{{ cp.person.imiona }} {{ cp.person.nazwisko }}
<svg width="14" height="14" fill="none" stroke="var(--text-secondary)" viewBox="0 0 24 24" style="opacity: 0.5;">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg>
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary);">
{{ cp.role }}
{% if cp.shares_percent %}
<span style="margin-left: var(--spacing-sm); background: {{ role_colors[category] }}20; color: {{ role_colors[category] }}; padding: 2px 8px; border-radius: 4px; font-weight: 500;">
{{ '{:.2f}'.format(cp.shares_percent) }}% udziałów
</span>
{% endif %}
</div>
</a>
{% endfor %}
{# Source attribution for this category #}
{% set first_cp = grouped[category][0] %}
{% if first_cp.source %}
<div style="margin-top: var(--spacing-md); padding-top: var(--spacing-sm); border-top: 1px dashed var(--border); font-size: var(--font-size-xs); color: var(--text-secondary);">
Źródło: <strong style="color: {% if 'ekrs' in first_cp.source %}#10b981{% elif 'dane.biznes' in first_cp.source %}#3b82f6{% else %}#6b7280{% endif %};">
{% if 'ekrs' in first_cp.source %}ekrs.ms.gov.pl (KRS){% elif 'dane.biznes' in first_cp.source %}dane.biznes.gov.pl (CEIDG){% else %}{{ first_cp.source }}{% endif %}
</strong>
{% if first_cp.fetched_at %}
&middot; Pobrano: {{ first_cp.fetched_at.strftime('%Y-%m-%d') }}
{% endif %}
</div>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% endif %}
<!-- Właściciel JDG Section (for sole proprietorships without KRS) -->
{% if company.owner_first_name and not company.krs and not people %}
<div class="company-section">
<h2 class="section-title">Właściciel</h2>
<div style="display: flex; align-items: center; gap: var(--spacing-lg); padding: var(--spacing-lg); background: var(--background); border-radius: var(--radius-lg); border-left: 4px solid #9b59b6;">
<div style="width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #9b59b6, #3498db); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<svg width="32" height="32" fill="white" viewBox="0 0 24 24">
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
</svg>
</div>
<div>
<div style="font-weight: 700; font-size: var(--font-size-xl); color: var(--text-primary);">
{{ company.owner_first_name }} {{ company.owner_last_name }}
</div>
<div style="font-size: var(--font-size-base); color: var(--text-secondary); margin-top: 4px;">
Właściciel jednoosobowej działalności gospodarczej
</div>
</div>
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-muted); margin-top: var(--spacing-md);">
Źródło: <a href="https://dane.biznes.gov.pl" target="_blank" style="color: #9b59b6;">CEIDG</a> &bull; Dane publiczne
</div>
</div>
{% endif %}
<!-- ============================================================ -->
<!-- DANE Z REJESTRÓW URZĘDOWYCH (CEIDG / KRS) -->
<!-- ============================================================ -->
{% if company.ceidg_id or (company.krs and company.data_source == 'KRS API') %}
<div class="company-section">
<h2 class="section-title">
Dane z rejestrów urzędowych
{% if company.ceidg_id %}
<span style="background: #059669; color: white; font-size: 11px; padding: 4px 10px; border-radius: 20px; margin-left: 12px; font-weight: 600;">CEIDG</span>
{% elif company.krs and company.data_source == 'KRS API' %}
<span style="background: #2563eb; color: white; font-size: 11px; padding: 4px 10px; border-radius: 20px; margin-left: 12px; font-weight: 600;">KRS</span>
{% endif %}
</h2>
<!-- Source Info Banner -->
<div style="background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%); border: 1px solid #86efac; border-radius: var(--radius-lg); padding: var(--spacing-md); margin-bottom: var(--spacing-lg); display: flex; align-items: center; gap: var(--spacing-md); flex-wrap: wrap;">
<svg width="20" height="20" fill="#059669" viewBox="0 0 24 24">
<path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"/>
</svg>
<div style="flex: 1;">
<div style="font-size: var(--font-size-sm); color: #166534; font-weight: 600;">
{% if company.ceidg_id %}
Dane pobrane z Centralnej Ewidencji i Informacji o Działalności Gospodarczej (CEIDG)
{% else %}
Dane pobrane z Krajowego Rejestru Sądowego (KRS)
{% endif %}
</div>
<div style="font-size: var(--font-size-xs); color: #15803d; margin-top: 2px;">
{% if company.ceidg_fetched_at %}
Pobrano: {{ company.ceidg_fetched_at.strftime('%d.%m.%Y %H:%M') }} &bull;
{% elif company.last_verified_at %}
Zweryfikowano: {{ company.last_verified_at.strftime('%d.%m.%Y %H:%M') }} &bull;
{% endif %}
{% if company.ceidg_id %}
ID: {{ company.ceidg_id[:8] }}...
{% elif company.krs %}
KRS: {{ company.krs }}
{% endif %}
</div>
</div>
<a href="{% if company.ceidg_id %}https://aplikacja.ceidg.gov.pl/ceidg/ceidg.public.ui/SearchDetails.aspx?Id={{ company.ceidg_id }}{% else %}https://ekrs.ms.gov.pl/web/wyszukiwarka-krs/strona-glowna/index.html{% endif %}"
target="_blank"
style="background: white; border: 1px solid #86efac; color: #166534; padding: 6px 12px; border-radius: var(--radius); font-size: var(--font-size-sm); text-decoration: none; font-weight: 500;">
Sprawdź w rejestrze →
</a>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-lg);">
<!-- ===== DANE CEIDG ===== -->
{% if company.ceidg_id %}
<!-- Status CEIDG -->
{% if company.ceidg_status %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border-left: 4px solid {% if company.ceidg_status == 'AKTYWNY' %}#22c55e{% elif company.ceidg_status == 'ZAWIESZONY' %}#f59e0b{% else %}#ef4444{% endif %};">
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">Status działalności</div>
<div style="font-size: var(--font-size-xl); font-weight: 700; color: {% if company.ceidg_status == 'AKTYWNY' %}#22c55e{% elif company.ceidg_status == 'ZAWIESZONY' %}#f59e0b{% else %}#ef4444{% endif %}; margin-top: 4px;">
{{ company.ceidg_status }}
</div>
</div>
{% endif %}
<!-- Właściciel JDG -->
{% if company.owner_first_name %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border-left: 4px solid #8b5cf6;">
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">Właściciel</div>
<div style="font-size: var(--font-size-xl); font-weight: 700; color: #8b5cf6; margin-top: 4px;">
{{ company.owner_first_name }} {{ company.owner_last_name }}
</div>
<div style="font-size: var(--font-size-xs); color: var(--text-muted); margin-top: 4px;">Jednoosobowa działalność gospodarcza</div>
</div>
{% endif %}
<!-- Data rozpoczęcia -->
{% if company.business_start_date %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border-left: 4px solid #059669;">
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">Data rozpoczęcia działalności</div>
<div style="font-size: var(--font-size-xl); font-weight: 700; color: #059669; margin-top: 4px;">
{{ company.business_start_date.strftime('%d.%m.%Y') }}
</div>
{% set years_active = ((now.date() - company.business_start_date).days / 365.25)|int %}
{% if years_active > 0 %}
<div style="font-size: var(--font-size-xs); color: var(--text-muted); margin-top: 4px;">{{ years_active }} lat na rynku</div>
{% endif %}
</div>
{% endif %}
<!-- PKD główny -->
{% if company.pkd_code %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border-left: 4px solid #7c3aed;">
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">PKD główny</div>
<div style="font-size: var(--font-size-xl); font-weight: 700; color: #7c3aed; font-family: monospace; margin-top: 4px;">
{{ company.pkd_code }}
</div>
{% if company.pkd_description %}
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); margin-top: 4px;">{{ company.pkd_description }}</div>
{% endif %}
</div>
{% endif %}
<!-- Dane kontaktowe z CEIDG (jeśli są w raw_data) -->
{% if company.ceidg_raw_data %}
{% set raw = company.ceidg_raw_data %}
{% if raw.email or raw.telefon or raw.www %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border-left: 4px solid #0ea5e9; grid-column: span 2;">
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--spacing-md);">Dane kontaktowe z CEIDG</div>
<div style="display: flex; flex-wrap: wrap; gap: var(--spacing-lg);">
{% if raw.email %}
<div>
<div style="font-size: var(--font-size-xs); color: var(--text-muted);">Email</div>
<a href="mailto:{{ raw.email }}" style="color: #0ea5e9; font-weight: 600;">{{ raw.email }}</a>
</div>
{% endif %}
{% if raw.telefon %}
<div>
<div style="font-size: var(--font-size-xs); color: var(--text-muted);">Telefon</div>
<a href="tel:{{ raw.telefon }}" style="color: #0ea5e9; font-weight: 600;">{{ raw.telefon }}</a>
</div>
{% endif %}
{% if raw.www %}
<div>
<div style="font-size: var(--font-size-xs); color: var(--text-muted);">Strona WWW</div>
<a href="https://{{ raw.www }}" target="_blank" style="color: #0ea5e9; font-weight: 600;">{{ raw.www }}</a>
</div>
{% endif %}
</div>
</div>
{% endif %}
<!-- Wszystkie PKD z CEIDG -->
{% if raw.pkd and raw.pkd|length > 1 %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border-left: 4px solid #a855f7; grid-column: span 2;">
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--spacing-md);">
Wszystkie kody PKD ({{ raw.pkd|length }})
</div>
<div style="display: flex; flex-wrap: wrap; gap: var(--spacing-sm); max-height: 200px; overflow-y: auto;">
{% for pkd in raw.pkd %}
<span style="background: {% if pkd.kod == company.pkd_code %}#7c3aed; color: white;{% else %}var(--surface); color: var(--text-secondary);{% endif %} padding: 4px 10px; border-radius: var(--radius); font-size: var(--font-size-sm); border: 1px solid var(--border);" title="{{ pkd.nazwa }}">
{{ pkd.kod }}{% if pkd.kod == company.pkd_code %} ★{% endif %}
</span>
{% endfor %}
</div>
</div>
{% endif %}
<!-- Zarządca sukcesyjny -->
{% if raw.zarzadcaSukcesyjny %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border-left: 4px solid #f59e0b;">
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">Zarządca sukcesyjny</div>
<div style="font-size: var(--font-size-lg); font-weight: 600; color: #f59e0b; margin-top: 4px;">
{{ raw.zarzadcaSukcesyjny.imie }} {{ raw.zarzadcaSukcesyjny.nazwisko }}
</div>
</div>
{% endif %}
<!-- Dodatkowe adresy działalności -->
{% if raw.adresyDzialalnosciDodatkowe and raw.adresyDzialalnosciDodatkowe|length > 0 %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border-left: 4px solid #64748b; grid-column: span 2;">
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--spacing-md);">
Dodatkowe miejsca działalności ({{ raw.adresyDzialalnosciDodatkowe|length }})
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-md);">
{% for addr in raw.adresyDzialalnosciDodatkowe %}
<div style="font-size: var(--font-size-sm); color: var(--text-primary);">
<strong>{{ addr.opisNietypowegoMiejsca|default('Lokalizacja') }}</strong><br>
{{ addr.ulica }} {{ addr.budynek }}{% if addr.lokal %}/{{ addr.lokal }}{% endif %}<br>
{{ addr.kod }} {{ addr.miasto }}
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% endif %}
{% endif %}
<!-- ===== KONIEC DANE CEIDG ===== -->
<!-- ===== DANE KRS ===== -->
{% if company.krs and company.data_source == 'KRS API' and not company.ceidg_id %}
<!-- Forma prawna -->
{% if company.legal_form %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border-left: 4px solid #2563eb;">
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">Forma prawna</div>
<div style="font-size: var(--font-size-lg); font-weight: 700; color: #2563eb; margin-top: 4px;">
{{ company.legal_form }}
</div>
</div>
{% endif %}
<!-- Kapitał zakładowy -->
{% if company.capital_amount %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border-left: 4px solid #22c55e;">
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">Kapitał zakładowy</div>
<div style="font-size: var(--font-size-xl); font-weight: 700; color: #22c55e; margin-top: 4px;">
{{ '{:,.2f}'.format(company.capital_amount).replace(',', ' ') }} PLN
</div>
</div>
{% endif %}
<!-- Numer KRS -->
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border-left: 4px solid #6366f1;">
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">Numer KRS</div>
<div style="font-size: var(--font-size-xl); font-weight: 700; color: #6366f1; font-family: monospace; margin-top: 4px;">
{{ company.krs }}
</div>
</div>
{% endif %}
<!-- ===== KONIEC DANE KRS ===== -->
</div>
</div>
{% endif %}
<!-- ============================================================ -->
<!-- KONIEC: DANE Z REJESTRÓW URZĘDOWYCH -->
<!-- ============================================================ -->
<!-- Legacy: Legal & Business Info - Card Based -->
<div class="company-section">
<h2 class="section-title">Informacje prawne i biznesowe</h2>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-lg);">
<!-- Legal Name Card (full width) -->
{% if company.legal_name %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #10b981; grid-column: span 2;">
<div style="display: flex; align-items: center; gap: var(--spacing-md);">
<div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #10b981; color: white;">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"/>
</svg>
</div>
<div style="flex: 1;">
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">Pełna nazwa prawna</div>
<div style="font-size: var(--font-size-lg); font-weight: 600; color: var(--text-primary);">{{ company.legal_name }}</div>
</div>
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px; margin-top: var(--spacing-sm);">
Źródło: <strong style="color: #10b981;">Rejestr KRS</strong>
</div>
</div>
{% endif %}
<!-- Legal Form Card -->
{# Determine legal form from database or infer from name/KRS #}
{% set legal_form = company.legal_form %}
{% if not legal_form %}
{% if 'sp. z o.o' in company.name|lower or 'spółka z ograniczoną odpowiedzialnością' in company.name|lower %}
{% set legal_form = 'Spółka z ograniczoną odpowiedzialnością (sp. z o.o.)' %}
{% elif 's.a.' in company.name|lower or 'spółka akcyjna' in company.name|lower %}
{% set legal_form = 'Spółka akcyjna (S.A.)' %}
{% elif 'sp.j.' in company.name|lower or 'spółka jawna' in company.name|lower %}
{% set legal_form = 'Spółka jawna (sp.j.)' %}
{% elif 'sp.k.' in company.name|lower or 'spółka komandytowa' in company.name|lower %}
{% set legal_form = 'Spółka komandytowa (sp.k.)' %}
{% elif 'sp.p.' in company.name|lower or 'spółka partnerska' in company.name|lower %}
{% set legal_form = 'Spółka partnerska (sp.p.)' %}
{% elif company.krs %}
{% set legal_form = 'Spółka prawa handlowego' %}
{% else %}
{% set legal_form = 'Jednoosobowa działalność gospodarcza (JDG)' %}
{% endif %}
{% endif %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #06b6d4;">
<div style="display: flex; align-items: center; gap: var(--spacing-md);">
<div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #06b6d4; color: white;">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z"/>
</svg>
</div>
<div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">Forma prawna</div>
<div style="font-size: var(--font-size-lg); font-weight: 600; color: #06b6d4;">{{ legal_form }}</div>
</div>
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px; margin-top: var(--spacing-sm);">
{% if company.legal_form %}
Źródło: <strong style="color: #10b981;">Dane zweryfikowane</strong>
{% elif company.krs %}
Źródło: <strong style="color: #f59e0b;">Ustalono z KRS/nazwy</strong>
{% else %}
Źródło: <strong style="color: #f59e0b;">Ustalono automatycznie</strong>
{% endif %}
</div>
</div>
<!-- NIP Card -->
{% if company.nip %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #3b82f6;">
<div style="display: flex; align-items: center; gap: var(--spacing-md);">
<div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #3b82f6; color: white;">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>
</svg>
</div>
<div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">NIP</div>
<div style="font-size: var(--font-size-xl); font-weight: 700; color: #3b82f6; font-family: monospace;">{{ company.nip[:3] }}-{{ company.nip[3:6] }}-{{ company.nip[6:8] }}-{{ company.nip[8:] }}</div>
</div>
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px; margin-top: var(--spacing-sm);">
Źródło: <strong style="color: #10b981;">Rejestr KRS</strong>
</div>
</div>
{% endif %}
<!-- REGON Card -->
{% if company.regon %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #8b5cf6;">
<div style="display: flex; align-items: center; gap: var(--spacing-md);">
<div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #8b5cf6; color: white;">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
</svg>
</div>
<div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">REGON</div>
<div style="font-size: var(--font-size-xl); font-weight: 700; color: #8b5cf6; font-family: monospace;">{{ company.regon }}</div>
</div>
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px; margin-top: var(--spacing-sm);">
Źródło: <strong style="color: #10b981;">GUS REGON</strong>
</div>
</div>
{% endif %}
<!-- KRS Card -->
{% if company.krs %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #ef4444;">
<div style="display: flex; align-items: center; gap: var(--spacing-md); flex-wrap: wrap;">
<div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #ef4444; color: white;">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/>
</svg>
</div>
<div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">KRS</div>
<div style="font-size: var(--font-size-xl); font-weight: 700; color: #ef4444; font-family: monospace;">{{ company.krs }}</div>
</div>
<div style="margin-left: auto; display: flex; gap: var(--spacing-sm); flex-wrap: wrap;">
{% if company.krs_pdf_path %}
<a href="/admin/krs-api/pdf/{{ company.id }}" target="_blank" rel="noopener noreferrer"
style="padding: 8px 16px; background: #ef4444; color: white; border-radius: var(--radius); text-decoration: none; font-size: var(--font-size-sm); font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;"
title="Pobierz odpis pełny KRS w formacie PDF">
<svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20M10,13H7V11H10V13M14,13H11V11H14V13M10,16H7V14H10V16M14,16H11V14H14V16Z"/></svg>
Odpis PDF
</a>
{% endif %}
<a href="https://rejestr.io/krs/{{ company.krs|int }}" target="_blank" rel="noopener noreferrer"
style="padding: 8px 16px; background: #10b981; color: white; border-radius: var(--radius); text-decoration: none; font-size: var(--font-size-sm); font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;"
title="Powiązania osobowe, władze, beneficjenci, pomoc publiczna">
<svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></svg>
Sprawdź w rejestr.io
</a>
</div>
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px; margin-top: var(--spacing-sm);">
Źródło: <strong style="color: #10b981;">Krajowy Rejestr Sądowy</strong>
{% if company.krs_last_audit_at %}
<span style="margin-left: var(--spacing-md); color: #6366f1;">
<svg width="12" height="12" fill="currentColor" viewBox="0 0 24 24" style="vertical-align: middle;"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>
Audyt KRS: {{ company.krs_last_audit_at.strftime('%d.%m.%Y') }}
</span>
{% endif %}
</div>
</div>
{% else %}
<!-- Search in registries for companies without KRS -->
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px dashed #94a3b8;">
<div style="display: flex; align-items: center; gap: var(--spacing-md); flex-wrap: wrap;">
<div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #94a3b8; color: white;">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
</svg>
</div>
<div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">Szukaj w rejestrach</div>
<div style="font-size: var(--font-size-base); color: var(--text-secondary);">Firma bez KRS - wyszukaj po NIP</div>
</div>
<div style="margin-left: auto;">
<a href="https://rejestr.io/szukaj?q={{ company.nip }}" target="_blank" rel="noopener noreferrer"
style="padding: 8px 16px; background: #10b981; color: white; border-radius: var(--radius); text-decoration: none; font-size: var(--font-size-sm); font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;"
title="Szukaj firmy po NIP w rejestr.io">
<svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
Szukaj w rejestr.io
</a>
</div>
</div>
</div>
{% endif %}
<!-- Year Established Card -->
{% if company.year_established %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #f59e0b;">
<div style="display: flex; align-items: center; gap: var(--spacing-md);">
<div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #f59e0b; color: white;">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zM9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm-8 4H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2z"/>
</svg>
</div>
<div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">Rok założenia</div>
<div style="font-size: var(--font-size-xl); font-weight: 700; color: #f59e0b;">{{ company.year_established }}</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary);">{{ 2025 - company.year_established }} lat na rynku</div>
</div>
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px; margin-top: var(--spacing-sm);">
Źródło: <strong style="color: #10b981;">Rejestr KRS</strong>
</div>
</div>
{% endif %}
<!-- Business Start Date Card (from CEIDG) -->
{% if company.business_start_date %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #059669;">
<div style="display: flex; align-items: center; gap: var(--spacing-md);">
<div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #059669; color: white;">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
</svg>
</div>
<div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">Data rozpoczęcia</div>
<div style="font-size: var(--font-size-xl); font-weight: 700; color: #059669;">{{ company.business_start_date.strftime('%d.%m.%Y') }}</div>
</div>
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px; margin-top: var(--spacing-sm);">
Źródło: <a href="https://dane.biznes.gov.pl" target="_blank" style="color: #059669; font-weight: bold;">CEIDG</a>
</div>
</div>
{% endif %}
<!-- Member Since Card (Norda Biznes membership) -->
{% if company.member_since %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #10b981;">
<div style="display: flex; align-items: center; gap: var(--spacing-md);">
<div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #10b981; color: white;">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>
</div>
<div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">Członek Izby NORDA od</div>
<div style="font-size: var(--font-size-xl); font-weight: 700; color: #10b981;">{{ company.member_since.strftime('%d.%m.%Y') }}</div>
{% set years_member = ((now.date() - company.member_since).days / 365.25)|int %}
{% if years_member > 0 %}
<div style="font-size: var(--font-size-sm); color: var(--text-secondary);">{{ years_member }} lat w Izbie</div>
{% endif %}
<div style="font-size: var(--font-size-xs); color: var(--text-muted); margin-top: var(--spacing-xs);">Źródło: <strong style="color: #10b981;">Izba NORDA</strong></div>
</div>
</div>
</div>
{% endif %}
<!-- PKD Card (from KRS/CEIDG) -->
{% if pkd_codes or company.pkd_code %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #7c3aed;">
<div style="display: flex; align-items: flex-start; gap: var(--spacing-md);">
<div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #7c3aed; color: white; flex-shrink: 0;">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
</svg>
</div>
<div style="flex: 1;">
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--spacing-sm);">PKD - Przedmiot działalności</div>
{% if pkd_codes %}
<!-- PKD codes from KRS audit -->
{% for pkd in pkd_codes %}
<div style="{% if pkd.is_primary %}margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--border);{% elif not loop.last %}margin-bottom: var(--spacing-sm);{% endif %}">
<div style="display: flex; align-items: center; gap: var(--spacing-sm);">
{% if pkd.is_primary %}
<span style="background: #7c3aed; color: white; font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 600;">GŁÓWNY</span>
{% endif %}
<span style="font-size: {% if pkd.is_primary %}var(--font-size-xl){% else %}var(--font-size-base){% endif %}; font-weight: {% if pkd.is_primary %}700{% else %}600{% endif %}; color: {% if pkd.is_primary %}#7c3aed{% else %}var(--text-primary){% endif %}; font-family: monospace;">{{ pkd.pkd_code }}</span>
</div>
{% if pkd.pkd_description %}
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); margin-top: 4px; {% if not pkd.is_primary %}padding-left: 0;{% endif %}">{{ pkd.pkd_description }}</div>
{% endif %}
</div>
{% endfor %}
{% else %}
<!-- Fallback to company.pkd_code (from CEIDG) -->
<div style="font-size: var(--font-size-xl); font-weight: 700; color: #7c3aed; font-family: monospace;">{{ company.pkd_code }}</div>
{% if company.pkd_description %}
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); margin-top: 4px;">{{ company.pkd_description }}</div>
{% endif %}
{% endif %}
</div>
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px; margin-top: var(--spacing-sm);">
Źródło: {% if pkd_codes %}<a href="https://ekrs.ms.gov.pl" target="_blank" style="color: #7c3aed; font-weight: bold;">eKRS</a>{% else %}<a href="https://dane.biznes.gov.pl" target="_blank" style="color: #7c3aed; font-weight: bold;">CEIDG</a>{% endif %}
{% if pkd_codes %}<span style="margin-left: var(--spacing-sm); color: var(--text-muted);">({{ pkd_codes|length }} {% if pkd_codes|length == 1 %}kod{% elif pkd_codes|length < 5 %}kody{% else %}kodów{% endif %})</span>{% endif %}
</div>
</div>
{% endif %}
<!-- Employees Count Card -->
{% if company.employees_count or company.employee_count_range %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #06b6d4;">
<div style="display: flex; align-items: center; gap: var(--spacing-md);">
<div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #06b6d4; color: white;">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
</svg>
</div>
<div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">Liczba pracowników</div>
<div style="font-size: var(--font-size-xl); font-weight: 700; color: #06b6d4;">
{% if company.employees_count %}{{ company.employees_count }}{% else %}{{ company.employee_count_range }}{% endif %}
</div>
</div>
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px; margin-top: var(--spacing-sm);">
Źródło: <strong style="color: #667eea;">Dane deklarowane</strong>
</div>
</div>
{% endif %}
<!-- Capital Card -->
{% if company.capital_amount %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #22c55e;">
<div style="display: flex; align-items: center; gap: var(--spacing-md);">
<div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #22c55e; color: white;">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"/>
</svg>
</div>
<div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">Kapitał zakładowy</div>
<div style="font-size: var(--font-size-xl); font-weight: 700; color: #22c55e;">{{ '{:,.2f}'.format(company.capital_amount).replace(',', ' ') }} PLN</div>
</div>
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px; margin-top: var(--spacing-sm);">
Źródło: <strong style="color: #10b981;">Rejestr KRS</strong>
</div>
</div>
{% endif %}
</div>
</div>
<!-- Contact Information - Card Based -->
<div class="company-section">
<h2 class="section-title">Dane kontaktowe</h2>
{% set source_names = {'website': 'Strona WWW', 'krs': 'Rejestr KRS', 'google_business': 'Google Business', 'facebook': 'Facebook', 'manual': 'Wprowadzono ręcznie', 'brave_search': 'Wyszukiwarka', 'ceidg': 'CEIDG', 'norda_biznes': 'Norda Biznes', 'website_scrape': 'Strona WWW (auto)'} %}
{% set source_colors = {'website': '#3b82f6', 'krs': '#10b981', 'google_business': '#f59e0b', 'facebook': '#1877f2', 'manual': '#6366f1', 'brave_search': '#ef4444', 'ceidg': '#10b981', 'norda_biznes': '#667eea', 'website_scrape': '#06b6d4'} %}
{# Collect all known phones for deduplication #}
{% set known_phones = [] %}
{% set phones_from_contacts = contacts|selectattr('contact_type', 'equalto', 'phone')|list if contacts else [] %}
{% for c in phones_from_contacts %}{% set _ = known_phones.append(c.value|replace(' ', '')|replace('+48', '')|replace('-', '')) %}{% endfor %}
{% if company.phone %}{% set _ = known_phones.append(company.phone|replace(' ', '')|replace('+48', '')|replace('-', '')) %}{% endif %}
{# Collect all known emails for deduplication #}
{% set known_emails = [] %}
{% set emails_from_contacts = contacts|selectattr('contact_type', 'equalto', 'email')|list if contacts else [] %}
{% for c in emails_from_contacts %}{% set _ = known_emails.append(c.value|lower) %}{% endfor %}
{% if company.email %}{% set _ = known_emails.append(company.email|lower) %}{% endif %}
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-lg);">
<!-- Phone Cards from contacts table -->
{% set phones = contacts|selectattr('contact_type', 'equalto', 'phone')|list if contacts else [] %}
{% if phones %}
{% for contact in phones %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid {% if contact.is_primary %}#10b981{% else %}#e5e7eb{% endif %};">
<div style="display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md);">
<div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: {% if contact.is_primary %}#10b981{% else %}#3b82f6{% endif %}; color: white;">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56a.977.977 0 0 0-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/>
</svg>
</div>
<div style="flex: 1;">
<div style="font-weight: 600; color: var(--text-primary);">
Telefon{% if contact.purpose %} - {{ contact.purpose }}{% endif %}
</div>
<a href="tel:{{ contact.value }}" style="color: {% if contact.is_primary %}#10b981{% else %}#3b82f6{% endif %}; font-size: var(--font-size-lg); text-decoration: none;">
{{ contact.value }}
</a>
</div>
{% if contact.is_primary %}
<span style="padding: 4px 8px; background: #dcfce7; color: #166534; border-radius: 4px; font-size: 11px; font-weight: 600;">GŁÓWNY</span>
{% endif %}
</div>
{% if contact.source %}
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px;">
<span style="display: inline-flex; align-items: center; gap: 4px;">
<svg width="12" height="12" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>
Źródło: <strong style="color: {{ source_colors.get(contact.source, '#6b7280') }};">{{ source_names.get(contact.source, contact.source) }}</strong>
</span>
{% if contact.source_date %}
<span style="margin-left: 8px;">({{ contact.source_date.strftime('%d.%m.%Y') }})</span>
{% endif %}
</div>
{% endif %}
</div>
{% endfor %}
{% endif %}
<!-- Additional phones from website scraping (deduplicated) -->
{% if website_content and website_content.phone_numbers %}
{% for phone in website_content.phone_numbers %}
{% set phone_normalized = phone|replace(' ', '')|replace('+48', '')|replace('-', '') %}
{% if phone_normalized not in known_phones %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #06b6d4;">
<div style="display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md);">
<div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #06b6d4; color: white;">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56a.977.977 0 0 0-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/>
</svg>
</div>
<div style="flex: 1;">
<div style="font-weight: 600; color: var(--text-primary);">Telefon</div>
<a href="tel:{{ phone }}" style="color: #06b6d4; font-size: var(--font-size-lg); text-decoration: none;">{{ phone }}</a>
</div>
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px;">
Źródło: <strong style="color: #06b6d4;">Strona WWW (auto)</strong>
{% if website_content.scraped_at %}
<span style="margin-left: 8px;">({{ website_content.scraped_at.strftime('%d.%m.%Y') }})</span>
{% endif %}
</div>
</div>
{% endif %}
{% endfor %}
{% endif %}
<!-- Fallback: Phone from company record (if not in contacts) -->
{% if company.phone %}
{% set phone_normalized = company.phone|replace(' ', '')|replace('+48', '')|replace('-', '') %}
{% set phone_in_contacts = phones_from_contacts|selectattr('value', 'search', phone_normalized)|list|length > 0 if phones_from_contacts else false %}
{% if not phone_in_contacts %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #10b981;">
<div style="display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md);">
<div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #10b981; color: white;">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56a.977.977 0 0 0-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/>
</svg>
</div>
<div style="flex: 1;">
<div style="font-weight: 600; color: var(--text-primary);">Telefon</div>
<a href="tel:{{ company.phone }}" style="color: #10b981; font-size: var(--font-size-lg); text-decoration: none;">
{{ company.phone }}
</a>
</div>
<span style="padding: 4px 8px; background: #dcfce7; color: #166534; border-radius: 4px; font-size: 11px; font-weight: 600;">GŁÓWNY</span>
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px;">
Źródło: <strong style="color: #667eea;">Dane firmy</strong>
</div>
</div>
{% endif %}
{% endif %}
<!-- Email Cards from contacts table -->
{% set emails = contacts|selectattr('contact_type', 'equalto', 'email')|list if contacts else [] %}
{% if emails %}
{% for contact in emails %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid {% if contact.is_primary %}#10b981{% else %}#e5e7eb{% endif %};">
<div style="display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md);">
<div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: {% if contact.is_primary %}#10b981{% else %}#ef4444{% endif %}; color: white;">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
</svg>
</div>
<div style="flex: 1; overflow: hidden;">
<div style="font-weight: 600; color: var(--text-primary);">
Email{% if contact.purpose %} - {{ contact.purpose }}{% endif %}
</div>
<a href="mailto:{{ contact.value }}" style="color: {% if contact.is_primary %}#10b981{% else %}#ef4444{% endif %}; font-size: var(--font-size-base); text-decoration: none; word-break: break-all;">
{{ contact.value }}
</a>
</div>
{% if contact.is_primary %}
<span style="padding: 4px 8px; background: #dcfce7; color: #166534; border-radius: 4px; font-size: 11px; font-weight: 600;">GŁÓWNY</span>
{% endif %}
</div>
{% if contact.source %}
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px;">
<span style="display: inline-flex; align-items: center; gap: 4px;">
<svg width="12" height="12" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>
Źródło: <strong style="color: {{ source_colors.get(contact.source, '#6b7280') }};">{{ source_names.get(contact.source, contact.source) }}</strong>
</span>
{% if contact.source_date %}
<span style="margin-left: 8px;">({{ contact.source_date.strftime('%d.%m.%Y') }})</span>
{% endif %}
</div>
{% endif %}
</div>
{% endfor %}
{% endif %}
<!-- Additional emails from website scraping (deduplicated) -->
{% if website_content and website_content.email_addresses %}
{% for email in website_content.email_addresses %}
{% if email|lower not in known_emails %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #06b6d4;">
<div style="display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md);">
<div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #06b6d4; color: white;">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
</svg>
</div>
<div style="flex: 1; overflow: hidden;">
<div style="font-weight: 600; color: var(--text-primary);">Email</div>
<a href="mailto:{{ email }}" style="color: #06b6d4; font-size: var(--font-size-base); text-decoration: none; word-break: break-all;">{{ email }}</a>
</div>
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px;">
Źródło: <strong style="color: #06b6d4;">Strona WWW (auto)</strong>
{% if website_content.scraped_at %}
<span style="margin-left: 8px;">({{ website_content.scraped_at.strftime('%d.%m.%Y') }})</span>
{% endif %}
</div>
</div>
{% endif %}
{% endfor %}
{% endif %}
<!-- Fallback: Email from company record (if not in contacts) -->
{% if company.email %}
{% set email_in_contacts = emails_from_contacts|selectattr('value', 'equalto', company.email)|list|length > 0 if emails_from_contacts else false %}
{% if not email_in_contacts %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #10b981;">
<div style="display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md);">
<div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #10b981; color: white;">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
</svg>
</div>
<div style="flex: 1; overflow: hidden;">
<div style="font-weight: 600; color: var(--text-primary);">Email</div>
<a href="mailto:{{ company.email }}" style="color: #10b981; font-size: var(--font-size-base); text-decoration: none; word-break: break-all;">
{{ company.email }}
</a>
</div>
<span style="padding: 4px 8px; background: #dcfce7; color: #166534; border-radius: 4px; font-size: 11px; font-weight: 600;">GŁÓWNY</span>
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px;">
Źródło: <strong style="color: #667eea;">Dane firmy</strong>
</div>
</div>
{% endif %}
{% endif %}
<!-- Address Card (full address - header only shows city) -->
{% if company.address_full or company.address_street %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #8b5cf6;">
<div style="display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md);">
<div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #8b5cf6; color: white;">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
</svg>
</div>
<div style="flex: 1;">
<div style="font-weight: 600; color: var(--text-primary);">Adres siedziby</div>
<div style="color: #8b5cf6; font-size: var(--font-size-base);">
{% if company.address_full %}
{{ company.address_full }}
{% else %}
{{ company.address_street }}, {{ company.address_postal }} {{ company.address_city }}
{% endif %}
</div>
</div>
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px;">
Źródło: <strong style="color: #10b981;">Rejestr KRS</strong>
</div>
</div>
{% endif %}
</div>
</div>
<!-- Social Media Section - Always show all platforms -->
<div class="company-section">
<h2 class="section-title">Social Media</h2>
{% set platforms = ['facebook', 'instagram', 'youtube', 'linkedin', 'tiktok', 'twitter'] %}
{% set platform_names = {'facebook': 'Facebook', 'instagram': 'Instagram', 'youtube': 'YouTube', 'linkedin': 'LinkedIn', 'tiktok': 'TikTok', 'twitter': 'X (Twitter)'} %}
{% set platform_colors = {'facebook': '#1877f2', 'instagram': '#E4405F', 'youtube': '#ff0000', 'linkedin': '#0a66c2', 'tiktok': '#000000', 'twitter': '#000000'} %}
<!-- Convert social_media list to dict for easy lookup -->
{% set sm_dict = {} %}
{% if social_media %}
{% for sm in social_media %}
{% set _ = sm_dict.update({sm.platform: sm}) %}
{% endfor %}
{% endif %}
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-lg);">
{% for platform in platforms %}
{% set sm = sm_dict.get(platform) %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid {% if sm %}{{ platform_colors[platform] }}{% else %}#e5e7eb{% endif %};">
<!-- Platform Header -->
<div style="display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md);">
<!-- Icon -->
<div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
background: {% if sm %}{{ platform_colors[platform] }}{% else %}#f3f4f6{% endif %}; color: {% if sm %}white{% else %}#9ca3af{% endif %};">
{% if platform == 'facebook' %}
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
{% elif platform == 'instagram' %}
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
{% elif platform == 'youtube' %}
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
{% elif platform == 'linkedin' %}
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
{% elif platform == 'tiktok' %}
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>
{% elif platform == 'twitter' %}
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
{% endif %}
</div>
<!-- Platform Name & Status -->
<div style="flex: 1;">
<div style="font-weight: 600; font-size: var(--font-size-lg); color: var(--text-primary);">
{{ platform_names[platform] }}
</div>
{% if sm %}
<div style="color: var(--success, #10b981); font-size: var(--font-size-sm); display: flex; align-items: center; gap: 4px;">
<svg width="14" height="14" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
Aktywny profil
</div>
{% else %}
<div style="color: #dc2626; font-size: var(--font-size-sm); display: flex; align-items: center; gap: 4px;">
<svg width="14" height="14" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
Brak profilu
</div>
{% endif %}
</div>
</div>
{% if sm %}
<!-- Profile Details -->
<div style="background: white; border-radius: var(--radius); padding: var(--spacing-md); margin-bottom: var(--spacing-md);">
{% if sm.page_name %}
<div style="margin-bottom: var(--spacing-sm);">
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Nazwa profilu:</span>
<div style="font-weight: 500; color: var(--text-primary);">{{ sm.page_name }}</div>
</div>
{% endif %}
<div style="margin-bottom: var(--spacing-sm);">
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Link:</span>
<div style="font-size: var(--font-size-sm); word-break: break-all;">
<a href="{{ sm.url }}" target="_blank" rel="noopener noreferrer" style="color: {{ platform_colors[platform] }}; text-decoration: none;">
{{ sm.url|replace('https://', '')|replace('http://', '')|truncate(40) }}
</a>
</div>
</div>
{% if sm.followers_count %}
<div style="display: flex; gap: var(--spacing-lg); margin-top: var(--spacing-md); padding-top: var(--spacing-md); border-top: 1px solid var(--border);">
<div style="text-align: center;">
<div style="font-size: var(--font-size-xl); font-weight: 700; color: {{ platform_colors[platform] }};">
{{ sm.followers_count|default(0) }}
</div>
<div style="font-size: var(--font-size-xs); color: var(--text-secondary);">
{% if platform == 'youtube' %}Subskrybentów{% else %}Obserwujących{% endif %}
</div>
</div>
{% if sm.total_posts %}
<div style="text-align: center;">
<div style="font-size: var(--font-size-xl); font-weight: 700; color: var(--text-primary);">
{{ sm.total_posts }}
</div>
<div style="font-size: var(--font-size-xs); color: var(--text-secondary);">
{% if platform == 'youtube' %}Filmów{% else %}Postów{% endif %}
</div>
</div>
{% endif %}
</div>
{% endif %}
</div>
<!-- Visit Button -->
<a href="{{ sm.url }}" target="_blank" rel="noopener noreferrer"
style="display: block; text-align: center; padding: var(--spacing-sm) var(--spacing-md);
background: {{ platform_colors[platform] }}; color: white; border-radius: var(--radius);
text-decoration: none; font-weight: 500; font-size: var(--font-size-sm);
transition: opacity 0.2s;">
Odwiedź profil
</a>
{% else %}
<!-- No Profile Message -->
<div style="text-align: center; padding: var(--spacing-lg); color: var(--text-secondary);">
<div style="font-size: 48px; margin-bottom: var(--spacing-sm); opacity: 0.3;">
<svg width="48" height="48" fill="currentColor" viewBox="0 0 20 20" style="color: #dc2626;"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
</div>
<div style="font-size: var(--font-size-sm);">
Firma nie posiada profilu na {{ platform_names[platform] }}
</div>
</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>
<!-- Recommendations Section -->
<div class="company-section">
<h2 class="section-title">⭐ REKOMENDACJE {% if recommendations %}({{ recommendations|length }} rekomendacji){% endif %}</h2>
{% if current_user.is_authenticated %}
<!-- Add Recommendation Button -->
<div style="margin-bottom: var(--spacing-lg);">
<a href="{{ url_for('company_recommend', slug=company.slug) }}"
style="display: inline-flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-md) var(--spacing-lg);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: var(--radius);
text-decoration: none; font-weight: 600; font-size: var(--font-size-base); transition: opacity 0.2s;">
<svg width="20" height="20" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"/>
</svg>
Dodaj rekomendację
</a>
</div>
{% endif %}
{% if recommendations %}
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: var(--spacing-lg);">
{% for rec in recommendations %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-xl); border: 2px solid #e5e7eb;">
<!-- Recommender Header -->
<div style="display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-md); border-bottom: 2px solid var(--border);">
<div style="width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; font-weight: 700; font-size: var(--font-size-lg);">
{{ rec.user.first_name[0] if rec.user.first_name else rec.user.email[0].upper() }}
</div>
<div style="flex: 1;">
<div style="font-weight: 600; font-size: var(--font-size-lg); color: var(--text-primary);">
{{ rec.user.first_name }} {{ rec.user.last_name }}
</div>
{% if rec.user.company %}
<a href="{{ url_for('company_detail_by_slug', slug=rec.user.company.slug) }}"
style="color: var(--primary); font-size: var(--font-size-sm); text-decoration: none;">
{{ rec.user.company.name }}
</a>
{% endif %}
</div>
<div style="text-align: right; font-size: var(--font-size-sm); color: var(--text-secondary);">
{{ rec.created_at.strftime('%d.%m.%Y') }}
</div>
</div>
<!-- Service Category (if provided) -->
{% if rec.service_category %}
<div style="margin-bottom: var(--spacing-md);">
<span style="display: inline-block; padding: 4px 12px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white; border-radius: var(--radius); font-size: var(--font-size-sm); font-weight: 500;">
{{ rec.service_category }}
</span>
</div>
{% endif %}
<!-- Recommendation Text -->
<div style="margin-bottom: var(--spacing-lg); line-height: 1.6; color: var(--text-primary); font-size: var(--font-size-base);">
{{ rec.recommendation_text }}
</div>
<!-- Contact Information (if enabled) -->
{% if rec.show_contact %}
<div style="background: white; border-radius: var(--radius); padding: var(--spacing-md); margin-bottom: var(--spacing-md);">
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: var(--spacing-sm); font-weight: 600;">
Kontakt z rekomendującym:
</div>
<div style="display: flex; flex-direction: column; gap: var(--spacing-xs);">
{% if rec.user.email %}
<div style="display: flex; align-items: center; gap: var(--spacing-sm);">
<svg width="16" height="16" fill="#3b82f6" viewBox="0 0 20 20">
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
</svg>
<a href="mailto:{{ rec.user.email }}" style="color: var(--primary); text-decoration: none; font-size: var(--font-size-sm);">
{{ rec.user.email }}
</a>
</div>
{% endif %}
{% if rec.user.phone %}
<div style="display: flex; align-items: center; gap: var(--spacing-sm);">
<svg width="16" height="16" fill="#10b981" viewBox="0 0 20 20">
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"/>
</svg>
<a href="tel:{{ rec.user.phone }}" style="color: #10b981; text-decoration: none; font-size: var(--font-size-sm);">
{{ rec.user.phone }}
</a>
</div>
{% endif %}
</div>
</div>
{% endif %}
<!-- Edit/Delete buttons for own recommendations -->
{% if current_user.is_authenticated and current_user.id == rec.user_id %}
<div style="display: flex; gap: var(--spacing-sm); margin-top: var(--spacing-md); padding-top: var(--spacing-md); border-top: 1px solid var(--border);">
<button onclick="editRecommendation({{ rec.id }})"
style="flex: 1; padding: var(--spacing-sm); background: var(--primary); color: white; border: none;
border-radius: var(--radius); cursor: pointer; font-size: var(--font-size-sm); font-weight: 500;">
Edytuj
</button>
<button onclick="deleteRecommendation({{ rec.id }})"
style="flex: 1; padding: var(--spacing-sm); background: #dc2626; color: white; border: none;
border-radius: var(--radius); cursor: pointer; font-size: var(--font-size-sm); font-weight: 500;">
Usuń
</button>
</div>
{% endif %}
</div>
{% endfor %}
</div>
{% else %}
<!-- Empty State -->
<div style="text-align: center; padding: var(--spacing-2xl); background: var(--background); border-radius: var(--radius-lg); border: 2px dashed var(--border);">
<div style="font-size: 64px; margin-bottom: var(--spacing-md); opacity: 0.3;"></div>
<div style="font-size: var(--font-size-lg); color: var(--text-secondary); font-weight: 500;">
Brak rekomendacji. Bądź pierwszy!
</div>
{% if current_user.is_authenticated %}
<a href="{{ url_for('company_recommend', slug=company.slug) }}"
style="display: inline-flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-md) var(--spacing-lg);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: var(--radius);
text-decoration: none; font-weight: 600; font-size: var(--font-size-base); margin-top: var(--spacing-md);">
<svg width="20" height="20" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"/>
</svg>
Dodaj pierwszą rekomendację
</a>
{% endif %}
</div>
{% endif %}
</div>
<!-- Unified Website Section -->
{% if company.website and website_analysis %}
<div class="company-section">
<h2 class="section-title">Strona WWW</h2>
<!-- Website URL - prominent display -->
<div style="margin-bottom: var(--spacing-lg); padding: var(--spacing-lg); background: linear-gradient(135deg, #3b82f6, #1d4ed8); border-radius: var(--radius-lg); display: flex; align-items: center; gap: var(--spacing-md);">
<div style="width: 56px; height: 56px; border-radius: 12px; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center;">
<svg width="28" height="28" fill="white" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10" fill="none" stroke="white" stroke-width="2"/>
<path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" fill="none" stroke="white" stroke-width="2"/>
</svg>
</div>
<div style="flex: 1;">
<div style="font-size: var(--font-size-sm); color: rgba(255,255,255,0.8); margin-bottom: 4px;">Adres strony</div>
<a href="{{ company.website|ensure_url }}" target="_blank" rel="noopener noreferrer"
style="font-size: var(--font-size-xl); font-weight: 600; color: white; text-decoration: none; display: flex; align-items: center; gap: var(--spacing-sm);">
{{ company.website|replace('https://', '')|replace('http://', '')|replace('www.', '') }}
<svg width="20" height="20" fill="white" viewBox="0 0 24 24" style="opacity: 0.8;">
<path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
</svg>
</a>
</div>
<a href="{{ company.website|ensure_url }}" target="_blank" rel="noopener noreferrer"
style="padding: var(--spacing-sm) var(--spacing-lg); background: white; color: #1d4ed8; border-radius: var(--radius); text-decoration: none; font-weight: 600; font-size: var(--font-size-sm);">
Odwiedź stronę
</a>
</div>
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg);">
<!-- SSL Certificate Card -->
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid {% if website_analysis.has_ssl %}#10b981{% else %}#dc2626{% endif %};">
<div style="display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md);">
<div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
background: {% if website_analysis.has_ssl %}#10b981{% else %}#dc2626{% endif %}; color: white;">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
</svg>
</div>
<div>
<div style="font-weight: 600; color: var(--text-primary);">Certyfikat SSL</div>
{% if website_analysis.has_ssl %}
<div style="color: #10b981; font-size: var(--font-size-sm);">Aktywny</div>
{% else %}
<div style="color: #dc2626; font-size: var(--font-size-sm);">Brak</div>
{% endif %}
</div>
</div>
{% if website_analysis.has_ssl %}
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px;">
{% if website_analysis.ssl_issuer %}
<div style="margin-bottom: 2px;">Wystawca: <strong>{{ website_analysis.ssl_issuer }}</strong></div>
{% endif %}
{% if website_analysis.ssl_expires_at %}
<div>Ważny do {{ website_analysis.ssl_expires_at.strftime('%d.%m.%Y') }}</div>
{% endif %}
</div>
{% endif %}
</div>
<!-- Mobile Responsive Card -->
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid {% if website_analysis.is_mobile_friendly %}#10b981{% else %}#f59e0b{% endif %};">
<div style="display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md);">
<div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
background: {% if website_analysis.is_mobile_friendly %}#10b981{% else %}#f59e0b{% endif %}; color: white;">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path d="M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"/>
</svg>
</div>
<div>
<div style="font-weight: 600; color: var(--text-primary);">Wersja mobilna</div>
{% if website_analysis.is_mobile_friendly %}
<div style="color: #10b981; font-size: var(--font-size-sm);">Responsywna</div>
{% else %}
<div style="color: #f59e0b; font-size: var(--font-size-sm);">Brak</div>
{% endif %}
</div>
</div>
</div>
<!-- Load Time Card -->
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid {% if website_analysis.load_time_ms and website_analysis.load_time_ms < 1000 %}#10b981{% elif website_analysis.load_time_ms and website_analysis.load_time_ms < 2000 %}#22c55e{% elif website_analysis.load_time_ms and website_analysis.load_time_ms < 3000 %}#84cc16{% elif website_analysis.load_time_ms and website_analysis.load_time_ms < 4000 %}#f59e0b{% elif website_analysis.load_time_ms %}#dc2626{% else %}#e5e7eb{% endif %};">
<div style="display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md);">
<div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
background: {% if website_analysis.load_time_ms and website_analysis.load_time_ms < 1000 %}#10b981{% elif website_analysis.load_time_ms and website_analysis.load_time_ms < 2000 %}#22c55e{% elif website_analysis.load_time_ms and website_analysis.load_time_ms < 3000 %}#84cc16{% elif website_analysis.load_time_ms and website_analysis.load_time_ms < 4000 %}#f59e0b{% elif website_analysis.load_time_ms %}#dc2626{% else %}#9ca3af{% endif %}; color: white;">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
</svg>
</div>
<div>
<div style="font-weight: 600; color: var(--text-primary);">Czas ładowania</div>
{% if website_analysis.load_time_ms %}
<div style="color: {% if website_analysis.load_time_ms < 1000 %}#10b981{% elif website_analysis.load_time_ms < 2000 %}#22c55e{% elif website_analysis.load_time_ms < 3000 %}#84cc16{% elif website_analysis.load_time_ms < 4000 %}#f59e0b{% else %}#dc2626{% endif %}; font-size: var(--font-size-sm);">
{{ (website_analysis.load_time_ms / 1000)|round(2) }}s
</div>
{% else %}
<div style="color: #9ca3af; font-size: var(--font-size-sm);">Brak danych</div>
{% endif %}
</div>
</div>
{% if website_analysis.load_time_ms %}
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px;">
{% if website_analysis.load_time_ms < 500 %}
<span style="color: #10b981;">Doskonały</span> - błyskawicznie
{% elif website_analysis.load_time_ms < 1000 %}
<span style="color: #10b981;">Bardzo dobry</span> - poniżej 1s
{% elif website_analysis.load_time_ms < 2000 %}
<span style="color: #22c55e;">Dobry</span> - akceptowalny
{% elif website_analysis.load_time_ms < 3000 %}
<span style="color: #84cc16;">Przeciętny</span> - do poprawy
{% elif website_analysis.load_time_ms < 4000 %}
<span style="color: #f59e0b;">Wolny</span> - wymaga optymalizacji
{% else %}
<span style="color: #dc2626;">Bardzo wolny</span> - krytyczny
{% endif %}
</div>
{% endif %}
</div>
<!-- CMS/Technology Card -->
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid {% if website_analysis.cms_detected %}#10b981{% else %}#e5e7eb{% endif %};">
<div style="display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md);">
<div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
background: {% if website_analysis.cms_detected %}#10b981{% else %}#9ca3af{% endif %}; color: white;">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/>
</svg>
</div>
<div>
<div style="font-weight: 600; color: var(--text-primary);">Technologia / CMS</div>
{% if website_analysis.cms_detected %}
<div style="color: #10b981; font-size: var(--font-size-sm);">{{ website_analysis.cms_detected }}</div>
{% else %}
<div style="color: #9ca3af; font-size: var(--font-size-sm);">Nieznany</div>
{% endif %}
</div>
</div>
</div>
<!-- Hosting Card -->
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid {% if website_analysis.hosting_provider %}#3b82f6{% else %}#e5e7eb{% endif %};">
<div style="display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md);">
<div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
background: {% if website_analysis.hosting_provider %}#3b82f6{% else %}#9ca3af{% endif %}; color: white;">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path d="M2 9h20v12H2V9zm2 2v8h16v-8H4zm6 2h4v4h-4v-4zM2 3h20v4H2V3z"/>
</svg>
</div>
<div>
<div style="font-weight: 600; color: var(--text-primary);">Hosting</div>
{% if website_analysis.hosting_provider %}
<div style="color: #3b82f6; font-size: var(--font-size-sm);">{{ website_analysis.hosting_provider }}</div>
{% else %}
<div style="color: #9ca3af; font-size: var(--font-size-sm);">Nieznany</div>
{% endif %}
</div>
</div>
</div>
<!-- Server Card -->
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid {% if website_analysis.server_software %}#8b5cf6{% else %}#e5e7eb{% endif %};">
<div style="display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md);">
<div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
background: {% if website_analysis.server_software %}#8b5cf6{% else %}#9ca3af{% endif %}; color: white;">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path d="M20 13H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 19c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM20 3H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/>
</svg>
</div>
<div>
<div style="font-weight: 600; color: var(--text-primary);">Serwer</div>
{% if website_analysis.server_software %}
<div style="color: #8b5cf6; font-size: var(--font-size-sm);">{{ website_analysis.server_software }}</div>
{% else %}
<div style="color: #9ca3af; font-size: var(--font-size-sm);">Nieznany</div>
{% endif %}
</div>
</div>
</div>
<!-- Website Author Card - Full Width -->
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid {% if website_analysis.site_author %}#6366f1{% else %}#e5e7eb{% endif %}; grid-column: span 2;">
<div style="display: flex; align-items: center; gap: var(--spacing-md);">
<div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
background: {% if website_analysis.site_author %}#6366f1{% else %}#9ca3af{% endif %}; color: white;">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
</svg>
</div>
<div style="flex: 1;">
<div style="font-weight: 600; color: var(--text-primary);">Wykonawca strony</div>
{% if website_analysis.site_author %}
<div style="color: #6366f1; font-size: var(--font-size-sm);">{{ website_analysis.site_author }}</div>
{% else %}
<div style="color: #9ca3af; font-size: var(--font-size-sm);">Nieznany</div>
{% endif %}
</div>
{% if website_analysis.site_author %}
{# Extract domain from site_author - look for word containing .pl/.com/.eu #}
{% set author_text = website_analysis.site_author %}
{% set extracted_domain = namespace(value='') %}
{% for word in author_text.replace('/', ' ').replace('', ' ').replace('-', ' ').replace(',', ' ').split() %}
{% set word_lower = word|lower|trim %}
{% if extracted_domain.value == '' and (word_lower.endswith('.pl') or word_lower.endswith('.com') or word_lower.endswith('.eu') or word_lower.endswith('.net') or word_lower.endswith('.org')) %}
{% set extracted_domain.value = word_lower %}
{% endif %}
{% endfor %}
{% if extracted_domain.value %}
{% set author_url = 'https://' ~ extracted_domain.value %}
<a href="{{ author_url }}" target="_blank" rel="noopener noreferrer"
style="padding: var(--spacing-xs) var(--spacing-md); background: #6366f1; color: white; border-radius: var(--radius);
text-decoration: none; font-size: var(--font-size-sm); white-space: nowrap;">
Odwiedź
</a>
{% endif %}
{% endif %}
</div>
</div>
<!-- Google Rating Card -->
{% if website_analysis.google_rating %}
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #f59e0b;">
<div style="display: flex; align-items: center; gap: var(--spacing-md);">
<div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
background: #f59e0b; color: white;">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
</svg>
</div>
<div>
<div style="font-weight: 600; color: var(--text-primary);">Ocena Google</div>
<div style="color: #f59e0b; font-size: var(--font-size-sm);">
{{ website_analysis.google_rating }}/5
{% if website_analysis.google_reviews_count %}({{ website_analysis.google_reviews_count }} opinii){% endif %}
</div>
</div>
</div>
</div>
{% endif %}
</div>
<!-- Website Features -->
{% if website_analysis.has_blog or website_analysis.has_portfolio or website_analysis.has_contact_form or website_analysis.has_live_chat or website_analysis.has_google_analytics %}
<div style="margin-top: var(--spacing-xl); padding-top: var(--spacing-lg); border-top: 1px solid var(--border);">
<h3 style="font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin-bottom: var(--spacing-md);">
Funkcje strony
</h3>
<div style="display: flex; flex-wrap: wrap; gap: var(--spacing-sm);">
{% if website_analysis.has_blog %}
<span style="padding: 6px 12px; background: #dcfce7; color: #166534; border-radius: 20px; font-size: var(--font-size-sm);">Blog</span>
{% endif %}
{% if website_analysis.has_portfolio %}
<span style="padding: 6px 12px; background: #dcfce7; color: #166534; border-radius: 20px; font-size: var(--font-size-sm);">Portfolio</span>
{% endif %}
{% if website_analysis.has_contact_form %}
<span style="padding: 6px 12px; background: #dcfce7; color: #166534; border-radius: 20px; font-size: var(--font-size-sm);">Formularz kontaktowy</span>
{% endif %}
{% if website_analysis.has_live_chat %}
<span style="padding: 6px 12px; background: #dcfce7; color: #166534; border-radius: 20px; font-size: var(--font-size-sm);">Live Chat</span>
{% endif %}
{% if website_analysis.has_google_analytics %}
<span style="padding: 6px 12px; background: #dbeafe; color: #1e40af; border-radius: 20px; font-size: var(--font-size-sm);">Google Analytics</span>
{% endif %}
</div>
</div>
{% endif %}
<!-- Last Modified -->
{% if website_analysis.last_modified_at %}
<div style="margin-top: var(--spacing-md); font-size: var(--font-size-sm); color: var(--text-secondary); text-align: right;">
Ostatnia modyfikacja: {{ website_analysis.last_modified_at.strftime('%d.%m.%Y %H:%M') }}
</div>
{% endif %}
</div>
{% elif company.website %}
<!-- Website URL only (no analysis yet) -->
<div class="company-section">
<h2 class="section-title">Strona WWW</h2>
<div style="padding: var(--spacing-lg); background: linear-gradient(135deg, #3b82f6, #1d4ed8); border-radius: var(--radius-lg); display: flex; align-items: center; gap: var(--spacing-md);">
<div style="width: 56px; height: 56px; border-radius: 12px; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center;">
<svg width="28" height="28" fill="white" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10" fill="none" stroke="white" stroke-width="2"/>
<path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" fill="none" stroke="white" stroke-width="2"/>
</svg>
</div>
<div style="flex: 1;">
<div style="font-size: var(--font-size-sm); color: rgba(255,255,255,0.8); margin-bottom: 4px;">Adres strony</div>
<a href="{{ company.website|ensure_url }}" target="_blank" rel="noopener noreferrer"
style="font-size: var(--font-size-xl); font-weight: 600; color: white; text-decoration: none; display: flex; align-items: center; gap: var(--spacing-sm);">
{{ company.website|replace('https://', '')|replace('http://', '')|replace('www.', '') }}
<svg width="20" height="20" fill="white" viewBox="0 0 24 24" style="opacity: 0.8;">
<path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
</svg>
</a>
</div>
<a href="{{ company.website|ensure_url }}" target="_blank" rel="noopener noreferrer"
style="padding: var(--spacing-sm) var(--spacing-lg); background: white; color: #1d4ed8; border-radius: var(--radius); text-decoration: none; font-weight: 600; font-size: var(--font-size-sm);">
Odwiedź stronę
</a>
</div>
</div>
{% else %}
<!-- No Website Section -->
<div class="company-section">
<h2 class="section-title">Strona WWW</h2>
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--spacing-xl); text-align: center;">
<div style="width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #f3f4f6, #e5e7eb); display: flex; align-items: center; justify-content: center; margin-bottom: var(--spacing-lg);">
<svg width="40" height="40" fill="none" stroke="#9ca3af" stroke-width="2" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10"/>
<path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
<line x1="4" y1="4" x2="20" y2="20" stroke="#dc2626" stroke-width="2.5"/>
</svg>
</div>
<div style="font-size: var(--font-size-lg); font-weight: 600; color: var(--text-secondary); margin-bottom: var(--spacing-sm);">
Brak strony internetowej
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); max-width: 400px; line-height: 1.6;">
Ta firma nie posiada jeszcze strony internetowej lub jej adres nie jest znany.
{% if company.phone or company.email %}
Skontaktuj się bezpośrednio używając danych kontaktowych podanych powyżej.
{% endif %}
</div>
<div style="margin-top: var(--spacing-lg); padding: var(--spacing-md) var(--spacing-lg); background: #fef3c7; border-radius: var(--radius); border: 1px solid #f59e0b;">
<div style="display: flex; align-items: center; gap: var(--spacing-sm); color: #92400e; font-size: var(--font-size-sm);">
<svg width="16" height="16" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
</svg>
<span>Jeśli znasz adres strony tej firmy, poinformuj nas przez formularz kontaktowy.</span>
</div>
</div>
</div>
</div>
{% endif %}
<!-- SEO Metrics Section - Only show if SEO audit was performed -->
{% if website_analysis and website_analysis.seo_audited_at %}
<div class="company-section" id="seo-metrics">
<h2 class="section-title">
Analiza SEO
<span style="font-size: var(--font-size-sm); font-weight: normal; color: var(--text-secondary); margin-left: var(--spacing-sm);">
({{ website_analysis.seo_audited_at.strftime('%d.%m.%Y') }})
</span>
</h2>
<!-- Overall SEO Score Banner - Clickable link to detailed audit -->
{% set overall_score = website_analysis.seo_overall_score or website_analysis.pagespeed_seo_score %}
{% if overall_score is not none %}
{# Unified 5-level color scale: 0-29 red, 30-49 orange, 50-69 amber, 70-89 lime, 90-100 green #}
<a href="{{ url_for('seo_audit_dashboard', slug=company.slug) }}" style="text-decoration: none; display: block; margin-bottom: var(--spacing-lg); padding: var(--spacing-lg); border-radius: var(--radius-lg); display: flex; align-items: center; gap: var(--spacing-lg); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
background: linear-gradient(135deg, {% if overall_score >= 90 %}#10b981, #059669{% elif overall_score >= 70 %}#84cc16, #65a30d{% elif overall_score >= 50 %}#f59e0b, #d97706{% elif overall_score >= 30 %}#f97316, #ea580c{% else %}#ef4444, #dc2626{% endif %});"
onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 25px rgba(0,0,0,0.15)';"
onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none';">
<div style="width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<span style="font-size: 32px; font-weight: 700; color: white;">{{ overall_score }}</span>
</div>
<div style="flex: 1; color: white;">
<div style="font-size: var(--font-size-xl); font-weight: 600; margin-bottom: 4px;">
{% if overall_score >= 90 %}Doskonały wynik SEO{% elif overall_score >= 70 %}Dobry wynik SEO{% elif overall_score >= 50 %}Przeciętny wynik SEO{% elif overall_score >= 30 %}Wynik SEO wymaga poprawy{% else %}Słaby wynik SEO{% endif %}
</div>
<div style="font-size: var(--font-size-sm); opacity: 0.9;">
{% if overall_score >= 90 %}Strona jest bardzo dobrze zoptymalizowana{% elif overall_score >= 70 %}Strona jest dobrze zoptymalizowana{% elif overall_score >= 50 %}Strona wymaga optymalizacji w kilku obszarach{% elif overall_score >= 30 %}Strona wymaga znaczącej optymalizacji{% else %}Strona wymaga pilnej optymalizacji SEO{% endif %}
</div>
</div>
<div style="color: white; opacity: 0.7;">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
</div>
</a>
{% endif %}
<!-- PageSpeed Scores Grid -->
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-md); margin-bottom: var(--spacing-lg);">
<!-- SEO Score -->
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); text-align: center;
border: 2px solid {% if website_analysis.pagespeed_seo_score and website_analysis.pagespeed_seo_score >= 90 %}#10b981{% elif website_analysis.pagespeed_seo_score and website_analysis.pagespeed_seo_score >= 50 %}#f59e0b{% elif website_analysis.pagespeed_seo_score %}#ef4444{% else %}#e5e7eb{% endif %};">
<div style="width: 48px; height: 48px; border-radius: 50%; margin: 0 auto var(--spacing-sm);
background: {% if website_analysis.pagespeed_seo_score and website_analysis.pagespeed_seo_score >= 90 %}#dcfce7{% elif website_analysis.pagespeed_seo_score and website_analysis.pagespeed_seo_score >= 50 %}#fef3c7{% elif website_analysis.pagespeed_seo_score %}#fee2e2{% else %}#f3f4f6{% endif %};
display: flex; align-items: center; justify-content: center;">
<svg width="24" height="24" fill="{% if website_analysis.pagespeed_seo_score and website_analysis.pagespeed_seo_score >= 90 %}#166534{% elif website_analysis.pagespeed_seo_score and website_analysis.pagespeed_seo_score >= 50 %}#92400e{% elif website_analysis.pagespeed_seo_score %}#991b1b{% else %}#9ca3af{% endif %}" viewBox="0 0 24 24">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
</svg>
</div>
<div style="font-size: 28px; font-weight: 700; color: {% if website_analysis.pagespeed_seo_score and website_analysis.pagespeed_seo_score >= 90 %}#166534{% elif website_analysis.pagespeed_seo_score and website_analysis.pagespeed_seo_score >= 50 %}#92400e{% elif website_analysis.pagespeed_seo_score %}#991b1b{% else %}#9ca3af{% endif %};">
{% if website_analysis.pagespeed_seo_score is not none %}{{ website_analysis.pagespeed_seo_score }}{% else %}-{% endif %}
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); font-weight: 500;">SEO</div>
</div>
<!-- Performance Score -->
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); text-align: center;
border: 2px solid {% if website_analysis.pagespeed_performance_score and website_analysis.pagespeed_performance_score >= 90 %}#10b981{% elif website_analysis.pagespeed_performance_score and website_analysis.pagespeed_performance_score >= 50 %}#f59e0b{% elif website_analysis.pagespeed_performance_score %}#ef4444{% else %}#e5e7eb{% endif %};">
<div style="width: 48px; height: 48px; border-radius: 50%; margin: 0 auto var(--spacing-sm);
background: {% if website_analysis.pagespeed_performance_score and website_analysis.pagespeed_performance_score >= 90 %}#dcfce7{% elif website_analysis.pagespeed_performance_score and website_analysis.pagespeed_performance_score >= 50 %}#fef3c7{% elif website_analysis.pagespeed_performance_score %}#fee2e2{% else %}#f3f4f6{% endif %};
display: flex; align-items: center; justify-content: center;">
<svg width="24" height="24" fill="{% if website_analysis.pagespeed_performance_score and website_analysis.pagespeed_performance_score >= 90 %}#166534{% elif website_analysis.pagespeed_performance_score and website_analysis.pagespeed_performance_score >= 50 %}#92400e{% elif website_analysis.pagespeed_performance_score %}#991b1b{% else %}#9ca3af{% endif %}" viewBox="0 0 24 24">
<path d="M13 2.05v2.02c3.95.49 7 3.85 7 7.93 0 3.21-1.92 6-4.72 7.28L13 17v5h5l-1.22-1.22C19.91 19.07 22 15.76 22 12c0-5.18-3.95-9.45-9-9.95zM11 2.05C5.94 2.55 2 6.81 2 12c0 3.76 2.09 7.07 5.22 8.78L6 22h5v-5l-2.28 2.28C6.92 18 5 15.21 5 12c0-4.08 3.05-7.44 7-7.93V2.05z"/>
</svg>
</div>
<div style="font-size: 28px; font-weight: 700; color: {% if website_analysis.pagespeed_performance_score and website_analysis.pagespeed_performance_score >= 90 %}#166534{% elif website_analysis.pagespeed_performance_score and website_analysis.pagespeed_performance_score >= 50 %}#92400e{% elif website_analysis.pagespeed_performance_score %}#991b1b{% else %}#9ca3af{% endif %};">
{% if website_analysis.pagespeed_performance_score is not none %}{{ website_analysis.pagespeed_performance_score }}{% else %}-{% endif %}
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); font-weight: 500;">Wydajność</div>
</div>
<!-- Accessibility Score -->
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); text-align: center;
border: 2px solid {% if website_analysis.pagespeed_accessibility_score and website_analysis.pagespeed_accessibility_score >= 90 %}#10b981{% elif website_analysis.pagespeed_accessibility_score and website_analysis.pagespeed_accessibility_score >= 50 %}#f59e0b{% elif website_analysis.pagespeed_accessibility_score %}#ef4444{% else %}#e5e7eb{% endif %};">
<div style="width: 48px; height: 48px; border-radius: 50%; margin: 0 auto var(--spacing-sm);
background: {% if website_analysis.pagespeed_accessibility_score and website_analysis.pagespeed_accessibility_score >= 90 %}#dcfce7{% elif website_analysis.pagespeed_accessibility_score and website_analysis.pagespeed_accessibility_score >= 50 %}#fef3c7{% elif website_analysis.pagespeed_accessibility_score %}#fee2e2{% else %}#f3f4f6{% endif %};
display: flex; align-items: center; justify-content: center;">
<svg width="24" height="24" fill="{% if website_analysis.pagespeed_accessibility_score and website_analysis.pagespeed_accessibility_score >= 90 %}#166534{% elif website_analysis.pagespeed_accessibility_score and website_analysis.pagespeed_accessibility_score >= 50 %}#92400e{% elif website_analysis.pagespeed_accessibility_score %}#991b1b{% else %}#9ca3af{% endif %}" viewBox="0 0 24 24">
<path d="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z"/>
</svg>
</div>
<div style="font-size: 28px; font-weight: 700; color: {% if website_analysis.pagespeed_accessibility_score and website_analysis.pagespeed_accessibility_score >= 90 %}#166534{% elif website_analysis.pagespeed_accessibility_score and website_analysis.pagespeed_accessibility_score >= 50 %}#92400e{% elif website_analysis.pagespeed_accessibility_score %}#991b1b{% else %}#9ca3af{% endif %};">
{% if website_analysis.pagespeed_accessibility_score is not none %}{{ website_analysis.pagespeed_accessibility_score }}{% else %}-{% endif %}
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); font-weight: 500;">Dostępność</div>
</div>
<!-- Best Practices Score -->
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); text-align: center;
border: 2px solid {% if website_analysis.pagespeed_best_practices_score and website_analysis.pagespeed_best_practices_score >= 90 %}#10b981{% elif website_analysis.pagespeed_best_practices_score and website_analysis.pagespeed_best_practices_score >= 50 %}#f59e0b{% elif website_analysis.pagespeed_best_practices_score %}#ef4444{% else %}#e5e7eb{% endif %};">
<div style="width: 48px; height: 48px; border-radius: 50%; margin: 0 auto var(--spacing-sm);
background: {% if website_analysis.pagespeed_best_practices_score and website_analysis.pagespeed_best_practices_score >= 90 %}#dcfce7{% elif website_analysis.pagespeed_best_practices_score and website_analysis.pagespeed_best_practices_score >= 50 %}#fef3c7{% elif website_analysis.pagespeed_best_practices_score %}#fee2e2{% else %}#f3f4f6{% endif %};
display: flex; align-items: center; justify-content: center;">
<svg width="24" height="24" fill="{% if website_analysis.pagespeed_best_practices_score and website_analysis.pagespeed_best_practices_score >= 90 %}#166534{% elif website_analysis.pagespeed_best_practices_score and website_analysis.pagespeed_best_practices_score >= 50 %}#92400e{% elif website_analysis.pagespeed_best_practices_score %}#991b1b{% else %}#9ca3af{% endif %}" viewBox="0 0 24 24">
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
</svg>
</div>
<div style="font-size: 28px; font-weight: 700; color: {% if website_analysis.pagespeed_best_practices_score and website_analysis.pagespeed_best_practices_score >= 90 %}#166534{% elif website_analysis.pagespeed_best_practices_score and website_analysis.pagespeed_best_practices_score >= 50 %}#92400e{% elif website_analysis.pagespeed_best_practices_score %}#991b1b{% else %}#9ca3af{% endif %};">
{% if website_analysis.pagespeed_best_practices_score is not none %}{{ website_analysis.pagespeed_best_practices_score }}{% else %}-{% endif %}
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); font-weight: 500;">Best Practices</div>
</div>
</div>
<!-- On-Page SEO & Technical Details -->
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg);">
<!-- On-Page SEO Card -->
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 1px solid var(--border);">
<h3 style="font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin-bottom: var(--spacing-md); display: flex; align-items: center; gap: var(--spacing-sm);">
<svg width="20" height="20" fill="var(--primary)" viewBox="0 0 24 24">
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
</svg>
SEO On-Page
</h3>
<div style="display: grid; gap: var(--spacing-sm);">
<!-- Meta Title -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Meta Title</span>
{% if website_analysis.meta_title %}
<span style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">OK</span>
{% else %}
<span style="padding: 2px 8px; background: #fee2e2; color: #991b1b; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Brak</span>
{% endif %}
</div>
<!-- Meta Description -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Meta Description</span>
{% if website_analysis.meta_description %}
<span style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">OK</span>
{% else %}
<span style="padding: 2px 8px; background: #fee2e2; color: #991b1b; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Brak</span>
{% endif %}
</div>
<!-- H1 Count -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Nagłówki H1</span>
{% if website_analysis.h1_count is not none %}
<span style="padding: 2px 8px; background: {% if website_analysis.h1_count == 1 %}#dcfce7; color: #166534{% elif website_analysis.h1_count == 0 %}#fee2e2; color: #991b1b{% else %}#fef3c7; color: #92400e{% endif %}; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">
{{ website_analysis.h1_count }}{% if website_analysis.h1_count == 1 %} (OK){% elif website_analysis.h1_count == 0 %} (Brak){% else %} (Za dużo){% endif %}
</span>
{% else %}
<span style="padding: 2px 8px; background: #f3f4f6; color: #9ca3af; border-radius: var(--radius-sm); font-size: 12px;">-</span>
{% endif %}
</div>
<!-- Images without Alt -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Obrazy bez Alt</span>
{% if website_analysis.images_without_alt is not none %}
<span style="padding: 2px 8px; background: {% if website_analysis.images_without_alt == 0 %}#dcfce7; color: #166534{% elif website_analysis.images_without_alt <= 3 %}#fef3c7; color: #92400e{% else %}#fee2e2; color: #991b1b{% endif %}; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">
{{ website_analysis.images_without_alt }}{% if website_analysis.images_without_alt == 0 %} (OK){% endif %}
</span>
{% else %}
<span style="padding: 2px 8px; background: #f3f4f6; color: #9ca3af; border-radius: var(--radius-sm); font-size: 12px;">-</span>
{% endif %}
</div>
<!-- Internal Links -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Linki wewnętrzne</span>
{% if website_analysis.internal_links_count is not none %}
<span style="padding: 2px 8px; background: #dbeafe; color: #1e40af; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">{{ website_analysis.internal_links_count }}</span>
{% else %}
<span style="padding: 2px 8px; background: #f3f4f6; color: #9ca3af; border-radius: var(--radius-sm); font-size: 12px;">-</span>
{% endif %}
</div>
<!-- External Links -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Linki zewnętrzne</span>
{% if website_analysis.external_links_count is not none %}
<span style="padding: 2px 8px; background: #e0e7ff; color: #3730a3; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">{{ website_analysis.external_links_count }}</span>
{% else %}
<span style="padding: 2px 8px; background: #f3f4f6; color: #9ca3af; border-radius: var(--radius-sm); font-size: 12px;">-</span>
{% endif %}
</div>
</div>
</div>
<!-- Technical SEO Card -->
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 1px solid var(--border);">
<h3 style="font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin-bottom: var(--spacing-md); display: flex; align-items: center; gap: var(--spacing-sm);">
<svg width="20" height="20" fill="var(--primary)" viewBox="0 0 24 24">
<path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
</svg>
SEO Techniczny
</h3>
<div style="display: grid; gap: var(--spacing-sm);">
<!-- Canonical URL -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Canonical URL</span>
{% if website_analysis.has_canonical %}
<span style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">OK</span>
{% else %}
<span style="padding: 2px 8px; background: #fef3c7; color: #92400e; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Brak</span>
{% endif %}
</div>
<!-- Indexable -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Indeksowanie</span>
{% if website_analysis.is_indexable or website_analysis.is_indexable is none %}
<span style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Dozwolone</span>
{% else %}
<span style="padding: 2px 8px; background: #fee2e2; color: #991b1b; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Zablokowane</span>
{% endif %}
</div>
<!-- Structured Data -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Dane strukturalne</span>
{% if website_analysis.has_structured_data %}
<span style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">OK</span>
{% else %}
<span style="padding: 2px 8px; background: #fef3c7; color: #92400e; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Brak</span>
{% endif %}
</div>
<!-- Open Graph -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Open Graph</span>
{% if website_analysis.has_og_tags %}
<span style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">OK</span>
{% else %}
<span style="padding: 2px 8px; background: #fef3c7; color: #92400e; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Brak</span>
{% endif %}
</div>
<!-- Viewport -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Viewport (mobile)</span>
{% if website_analysis.viewport_configured %}
<span style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">OK</span>
{% else %}
<span style="padding: 2px 8px; background: #fee2e2; color: #991b1b; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Brak</span>
{% endif %}
</div>
<!-- HTML Lang -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Język strony</span>
{% if website_analysis.html_lang %}
<span style="padding: 2px 8px; background: #dbeafe; color: #1e40af; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">{{ website_analysis.html_lang }}</span>
{% else %}
<span style="padding: 2px 8px; background: #fef3c7; color: #92400e; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Brak</span>
{% endif %}
</div>
</div>
</div>
</div>
<!-- Core Web Vitals (if available) -->
{% if website_analysis.largest_contentful_paint_ms or website_analysis.cumulative_layout_shift is not none %}
<div style="margin-top: var(--spacing-lg); padding-top: var(--spacing-lg); border-top: 1px solid var(--border);">
<h3 style="font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin-bottom: var(--spacing-md); display: flex; align-items: center; gap: var(--spacing-sm);">
<svg width="20" height="20" fill="var(--primary)" viewBox="0 0 24 24">
<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
</svg>
Core Web Vitals
</h3>
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md);">
<!-- LCP -->
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-md); text-align: center;
border: 2px solid {% if website_analysis.largest_contentful_paint_ms and website_analysis.largest_contentful_paint_ms <= 2500 %}#10b981{% elif website_analysis.largest_contentful_paint_ms and website_analysis.largest_contentful_paint_ms <= 4000 %}#f59e0b{% elif website_analysis.largest_contentful_paint_ms %}#ef4444{% else %}#e5e7eb{% endif %};">
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: var(--spacing-xs);">LCP</div>
<div style="font-size: var(--font-size-xl); font-weight: 700; color: {% if website_analysis.largest_contentful_paint_ms and website_analysis.largest_contentful_paint_ms <= 2500 %}#166534{% elif website_analysis.largest_contentful_paint_ms and website_analysis.largest_contentful_paint_ms <= 4000 %}#92400e{% elif website_analysis.largest_contentful_paint_ms %}#991b1b{% else %}#9ca3af{% endif %};">
{% if website_analysis.largest_contentful_paint_ms is not none %}{{ (website_analysis.largest_contentful_paint_ms / 1000)|round(1) }}s{% else %}-{% endif %}
</div>
<div style="font-size: 11px; color: var(--text-secondary);">Largest Contentful Paint</div>
</div>
<!-- FID -->
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-md); text-align: center;
border: 2px solid {% if website_analysis.first_input_delay_ms and website_analysis.first_input_delay_ms <= 100 %}#10b981{% elif website_analysis.first_input_delay_ms and website_analysis.first_input_delay_ms <= 300 %}#f59e0b{% elif website_analysis.first_input_delay_ms %}#ef4444{% else %}#e5e7eb{% endif %};">
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: var(--spacing-xs);">FID</div>
<div style="font-size: var(--font-size-xl); font-weight: 700; color: {% if website_analysis.first_input_delay_ms and website_analysis.first_input_delay_ms <= 100 %}#166534{% elif website_analysis.first_input_delay_ms and website_analysis.first_input_delay_ms <= 300 %}#92400e{% elif website_analysis.first_input_delay_ms %}#991b1b{% else %}#9ca3af{% endif %};">
{% if website_analysis.first_input_delay_ms is not none %}{{ website_analysis.first_input_delay_ms }}ms{% else %}-{% endif %}
</div>
<div style="font-size: 11px; color: var(--text-secondary);">First Input Delay</div>
</div>
<!-- CLS -->
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-md); text-align: center;
border: 2px solid {% if website_analysis.cumulative_layout_shift is not none and website_analysis.cumulative_layout_shift <= 0.1 %}#10b981{% elif website_analysis.cumulative_layout_shift is not none and website_analysis.cumulative_layout_shift <= 0.25 %}#f59e0b{% elif website_analysis.cumulative_layout_shift is not none %}#ef4444{% else %}#e5e7eb{% endif %};">
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: var(--spacing-xs);">CLS</div>
<div style="font-size: var(--font-size-xl); font-weight: 700; color: {% if website_analysis.cumulative_layout_shift is not none and website_analysis.cumulative_layout_shift <= 0.1 %}#166534{% elif website_analysis.cumulative_layout_shift is not none and website_analysis.cumulative_layout_shift <= 0.25 %}#92400e{% elif website_analysis.cumulative_layout_shift is not none %}#991b1b{% else %}#9ca3af{% endif %};">
{% if website_analysis.cumulative_layout_shift is not none %}{{ website_analysis.cumulative_layout_shift|round(3) }}{% else %}-{% endif %}
</div>
<div style="font-size: 11px; color: var(--text-secondary);">Cumulative Layout Shift</div>
</div>
</div>
</div>
{% endif %}
<!-- Structured Data Types (if available) -->
{% if website_analysis.structured_data_types and website_analysis.structured_data_types|length > 0 %}
<div style="margin-top: var(--spacing-lg); padding-top: var(--spacing-lg); border-top: 1px solid var(--border);">
<h3 style="font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin-bottom: var(--spacing-md);">
Wykryte dane strukturalne (Schema.org)
</h3>
<div style="display: flex; flex-wrap: wrap; gap: var(--spacing-sm);">
{% for schema_type in website_analysis.structured_data_types %}
<span style="padding: 6px 12px; background: #e0e7ff; color: #3730a3; border-radius: 20px; font-size: var(--font-size-sm); font-weight: 500;">
{{ schema_type }}
</span>
{% endfor %}
</div>
</div>
{% endif %}
<!-- Score Legend -->
<div style="margin-top: var(--spacing-lg); padding: var(--spacing-md); background: #f8fafc; border-radius: var(--radius); font-size: var(--font-size-sm); color: var(--text-secondary);">
<strong>Legenda:</strong>
<span style="display: inline-flex; align-items: center; gap: 4px; margin-left: var(--spacing-md);">
<span style="width: 12px; height: 12px; background: #dcfce7; border: 1px solid #166534; border-radius: 2px;"></span>
90-100 (dobry)
</span>
<span style="display: inline-flex; align-items: center; gap: 4px; margin-left: var(--spacing-md);">
<span style="width: 12px; height: 12px; background: #fef3c7; border: 1px solid #92400e; border-radius: 2px;"></span>
50-89 (średni)
</span>
<span style="display: inline-flex; align-items: center; gap: 4px; margin-left: var(--spacing-md);">
<span style="width: 12px; height: 12px; background: #fee2e2; border: 1px solid #991b1b; border-radius: 2px;"></span>
0-49 (słaby)
</span>
</div>
</div>
{% endif %}
<!-- GBP Audit Section - Only show if GBP audit was performed -->
{% if gbp_audit and gbp_audit.completeness_score is not none %}
<div class="company-section" id="gbp-audit">
<h2 class="section-title">
Audyt Google Business Profile
<span style="font-size: var(--font-size-sm); font-weight: normal; color: var(--text-secondary); margin-left: var(--spacing-sm);">
({{ gbp_audit.audit_date.strftime('%d.%m.%Y') }})
</span>
</h2>
<!-- GBP Score Banner - Clickable link to detailed audit -->
{# Unified 5-level color scale: 0-29 red, 30-49 orange, 50-69 amber, 70-89 lime, 90-100 green #}
<a href="{{ url_for('gbp_audit_dashboard', slug=company.slug) }}" style="text-decoration: none; display: block; margin-bottom: var(--spacing-lg); padding: var(--spacing-lg); border-radius: var(--radius-lg); display: flex; align-items: center; gap: var(--spacing-lg); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
background: linear-gradient(135deg, {% if gbp_audit.completeness_score >= 90 %}#10b981, #059669{% elif gbp_audit.completeness_score >= 70 %}#84cc16, #65a30d{% elif gbp_audit.completeness_score >= 50 %}#f59e0b, #d97706{% elif gbp_audit.completeness_score >= 30 %}#f97316, #ea580c{% else %}#ef4444, #dc2626{% endif %});"
onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 25px rgba(0,0,0,0.15)';"
onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none';">
<div style="width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<span style="font-size: 32px; font-weight: 700; color: white;">{{ gbp_audit.completeness_score }}</span>
</div>
<div style="flex: 1; color: white;">
<div style="font-size: var(--font-size-xl); font-weight: 600; margin-bottom: 4px;">
{% if gbp_audit.completeness_score >= 90 %}Doskonały profil GBP{% elif gbp_audit.completeness_score >= 70 %}Dobry profil GBP{% elif gbp_audit.completeness_score >= 50 %}Przeciętny profil GBP{% elif gbp_audit.completeness_score >= 30 %}Profil GBP wymaga uzupełnienia{% else %}Słaby profil GBP{% endif %}
</div>
<div style="font-size: var(--font-size-sm); opacity: 0.9;">
{% if gbp_audit.completeness_score >= 90 %}Profil Google Business jest kompletny i dobrze zoptymalizowany{% elif gbp_audit.completeness_score >= 70 %}Profil jest dobrze uzupełniony{% elif gbp_audit.completeness_score >= 50 %}Profil wymaga uzupełnienia kilku informacji{% elif gbp_audit.completeness_score >= 30 %}Profil wymaga znaczącego uzupełnienia{% else %}Profil wymaga pilnego uzupełnienia{% endif %}
</div>
</div>
<div style="color: white; opacity: 0.7;">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
</div>
</a>
<!-- GBP Stats Grid -->
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-md); margin-bottom: var(--spacing-lg);">
<!-- Reviews -->
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); text-align: center; border: 2px solid #e5e7eb;">
<div style="width: 48px; height: 48px; border-radius: 50%; margin: 0 auto var(--spacing-sm); background: #fef3c7; display: flex; align-items: center; justify-content: center;">
<svg width="24" height="24" fill="#92400e" viewBox="0 0 24 24">
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
</svg>
</div>
<div style="font-size: 28px; font-weight: 700; color: #92400e;">
{% if gbp_audit.review_count is not none %}{{ gbp_audit.review_count }}{% else %}-{% endif %}
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); font-weight: 500;">Opinii</div>
</div>
<!-- Rating -->
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); text-align: center;
border: 2px solid {% if gbp_audit.average_rating and gbp_audit.average_rating|float >= 4.5 %}#10b981{% elif gbp_audit.average_rating and gbp_audit.average_rating|float >= 3.5 %}#f59e0b{% elif gbp_audit.average_rating %}#ef4444{% else %}#e5e7eb{% endif %};">
<div style="width: 48px; height: 48px; border-radius: 50%; margin: 0 auto var(--spacing-sm);
background: {% if gbp_audit.average_rating and gbp_audit.average_rating|float >= 4.5 %}#dcfce7{% elif gbp_audit.average_rating and gbp_audit.average_rating|float >= 3.5 %}#fef3c7{% elif gbp_audit.average_rating %}#fee2e2{% else %}#f3f4f6{% endif %};
display: flex; align-items: center; justify-content: center;">
<svg width="24" height="24" fill="{% if gbp_audit.average_rating and gbp_audit.average_rating|float >= 4.5 %}#166534{% elif gbp_audit.average_rating and gbp_audit.average_rating|float >= 3.5 %}#92400e{% elif gbp_audit.average_rating %}#991b1b{% else %}#9ca3af{% endif %}" viewBox="0 0 24 24">
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
</svg>
</div>
<div style="font-size: 28px; font-weight: 700; color: {% if gbp_audit.average_rating and gbp_audit.average_rating|float >= 4.5 %}#166534{% elif gbp_audit.average_rating and gbp_audit.average_rating|float >= 3.5 %}#92400e{% elif gbp_audit.average_rating %}#991b1b{% else %}#9ca3af{% endif %};">
{% if gbp_audit.average_rating is not none %}{{ gbp_audit.average_rating|round(1) }}{% else %}-{% endif %}
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); font-weight: 500;">Średnia ocen</div>
</div>
<!-- Photos -->
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); text-align: center; border: 2px solid #e5e7eb;">
<div style="width: 48px; height: 48px; border-radius: 50%; margin: 0 auto var(--spacing-sm); background: #dbeafe; display: flex; align-items: center; justify-content: center;">
<svg width="24" height="24" fill="#1e40af" viewBox="0 0 24 24">
<path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
</svg>
</div>
<div style="font-size: 28px; font-weight: 700; color: #1e40af;">
{% if gbp_audit.photo_count is not none %}{{ gbp_audit.photo_count }}{% else %}-{% endif %}
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); font-weight: 500;">Zdjęć</div>
</div>
<!-- Completeness -->
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); text-align: center;
border: 2px solid {% if gbp_audit.completeness_score >= 90 %}#10b981{% elif gbp_audit.completeness_score >= 50 %}#f59e0b{% else %}#ef4444{% endif %};">
<div style="width: 48px; height: 48px; border-radius: 50%; margin: 0 auto var(--spacing-sm);
background: {% if gbp_audit.completeness_score >= 90 %}#dcfce7{% elif gbp_audit.completeness_score >= 50 %}#fef3c7{% else %}#fee2e2{% endif %};
display: flex; align-items: center; justify-content: center;">
<svg width="24" height="24" fill="{% if gbp_audit.completeness_score >= 90 %}#166534{% elif gbp_audit.completeness_score >= 50 %}#92400e{% else %}#991b1b{% endif %}" viewBox="0 0 24 24">
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
</svg>
</div>
<div style="font-size: 28px; font-weight: 700; color: {% if gbp_audit.completeness_score >= 90 %}#166534{% elif gbp_audit.completeness_score >= 50 %}#92400e{% else %}#991b1b{% endif %};">
{{ gbp_audit.completeness_score }}%
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); font-weight: 500;">Kompletność</div>
</div>
</div>
<!-- Profile Checklist -->
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg);">
<!-- Basic Info -->
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 1px solid var(--border);">
<h3 style="font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin-bottom: var(--spacing-md); display: flex; align-items: center; gap: var(--spacing-sm);">
<svg width="20" height="20" fill="var(--primary)" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
</svg>
Informacje podstawowe
</h3>
<div style="display: grid; gap: var(--spacing-sm);">
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Nazwa firmy</span>
{% if gbp_audit.has_name %}
<span style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">OK</span>
{% else %}
<span style="padding: 2px 8px; background: #fee2e2; color: #991b1b; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Brak</span>
{% endif %}
</div>
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Adres</span>
{% if gbp_audit.has_address %}
<span style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">OK</span>
{% else %}
<span style="padding: 2px 8px; background: #fee2e2; color: #991b1b; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Brak</span>
{% endif %}
</div>
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Telefon</span>
{% if gbp_audit.has_phone %}
<span style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">OK</span>
{% else %}
<span style="padding: 2px 8px; background: #fee2e2; color: #991b1b; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Brak</span>
{% endif %}
</div>
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Strona www</span>
{% if gbp_audit.has_website %}
<span style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">OK</span>
{% else %}
<span style="padding: 2px 8px; background: #fee2e2; color: #991b1b; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Brak</span>
{% endif %}
</div>
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Godziny otwarcia</span>
{% if gbp_audit.has_hours %}
<span style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">OK</span>
{% else %}
<span style="padding: 2px 8px; background: #fee2e2; color: #991b1b; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Brak</span>
{% endif %}
</div>
</div>
</div>
<!-- Content & Engagement -->
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 1px solid var(--border);">
<h3 style="font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin-bottom: var(--spacing-md); display: flex; align-items: center; gap: var(--spacing-sm);">
<svg width="20" height="20" fill="var(--primary)" viewBox="0 0 24 24">
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
</svg>
Treści i zaangażowanie
</h3>
<div style="display: grid; gap: var(--spacing-sm);">
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Opis firmy</span>
{% if gbp_audit.has_description %}
<span style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">OK</span>
{% else %}
<span style="padding: 2px 8px; background: #fee2e2; color: #991b1b; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Brak</span>
{% endif %}
</div>
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Kategorie</span>
{% if gbp_audit.has_categories %}
<span style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">OK</span>
{% else %}
<span style="padding: 2px 8px; background: #fee2e2; color: #991b1b; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Brak</span>
{% endif %}
</div>
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Usługi/produkty</span>
{% if gbp_audit.has_services %}
<span style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">OK</span>
{% else %}
<span style="padding: 2px 8px; background: #fef3c7; color: #92400e; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Brak</span>
{% endif %}
</div>
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Zdjęcia</span>
{% if gbp_audit.has_photos %}
<span style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">{{ gbp_audit.photo_count or 'OK' }}</span>
{% else %}
<span style="padding: 2px 8px; background: #fee2e2; color: #991b1b; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Brak</span>
{% endif %}
</div>
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Opinie klientów</span>
{% if gbp_audit.has_reviews %}
<span style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">{{ gbp_audit.review_count }}</span>
{% else %}
<span style="padding: 2px 8px; background: #fef3c7; color: #92400e; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Brak</span>
{% endif %}
</div>
</div>
</div>
</div>
{% if gbp_audit.google_maps_url %}
<div style="margin-top: var(--spacing-lg); text-align: center;">
<a href="{{ gbp_audit.google_maps_url }}" target="_blank" rel="noopener" style="display: inline-flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-lg); background: var(--primary); color: white; text-decoration: none; border-radius: var(--radius); font-weight: 500;">
<svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
</svg>
Zobacz w Google Maps
</a>
</div>
{% endif %}
</div>
{% endif %}
<!-- Social Media Audit Section -->
{% if social_media and social_media|length > 0 %}
<div class="company-section" id="social-media-audit">
<h2 class="section-title">
Audyt Social Media
</h2>
<!-- Social Media Summary Banner - Clickable link to detailed audit -->
{% set active_platforms = social_media|selectattr('is_valid', 'equalto', true)|list|length %}
{% set total_platforms = 6 %}
{% set social_score = ((active_platforms / total_platforms) * 100)|int %}
{% set total_followers = social_media|selectattr('followers_count')|sum(attribute='followers_count') %}
{# Unified 5-level color scale: 0-29 red, 30-49 orange, 50-69 amber, 70-89 lime, 90-100 green #}
<a href="{{ url_for('social_audit_dashboard', slug=company.slug) }}" style="text-decoration: none; display: block; margin-bottom: var(--spacing-lg); padding: var(--spacing-lg); border-radius: var(--radius-lg); display: flex; align-items: center; gap: var(--spacing-lg); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
background: linear-gradient(135deg, {% if social_score >= 90 %}#10b981, #059669{% elif social_score >= 70 %}#84cc16, #65a30d{% elif social_score >= 50 %}#f59e0b, #d97706{% elif social_score >= 30 %}#f97316, #ea580c{% else %}#ef4444, #dc2626{% endif %});"
onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 25px rgba(0,0,0,0.15)';"
onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none';">
<div style="width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<span style="font-size: 32px; font-weight: 700; color: white;">{{ social_score }}</span>
</div>
<div style="flex: 1; color: white;">
<div style="font-size: var(--font-size-xl); font-weight: 600; margin-bottom: 4px;">
{% if social_score >= 90 %}Doskonała obecność w Social Media{% elif social_score >= 70 %}Dobra obecność w Social Media{% elif social_score >= 50 %}Przeciętna obecność w Social Media{% elif social_score >= 30 %}Obecność wymaga rozbudowy{% else %}Słaba obecność w Social Media{% endif %}
</div>
<div style="font-size: var(--font-size-sm); opacity: 0.9;">
{{ active_platforms }}/{{ total_platforms }} platform · {{ social_score }}%
{% if total_followers > 0 %} · {{ "{:,}".format(total_followers|int).replace(",", " ") }} obserwujących{% endif %}
</div>
</div>
<div style="color: white; opacity: 0.7;">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
</div>
</a>
<!-- Social Media Platforms Grid -->
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md);">
{% set platform_icons = {
'facebook': {'icon': '<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>', 'color': '#1877F2'},
'instagram': {'icon': '<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>', 'color': '#E4405F'},
'linkedin': {'icon': '<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>', 'color': '#0A66C2'},
'youtube': {'icon': '<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>', 'color': '#FF0000'},
'twitter': {'icon': '<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>', 'color': '#000000'},
'tiktok': {'icon': '<path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/>', 'color': '#000000'}
} %}
{% for sm in social_media %}
<a href="{{ sm.url }}" target="_blank" rel="noopener" style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); text-align: center; border: 1px solid var(--border); text-decoration: none; color: inherit; transition: var(--transition);">
<div style="width: 48px; height: 48px; border-radius: 50%; margin: 0 auto var(--spacing-sm); background: {{ platform_icons[sm.platform]['color'] if sm.platform in platform_icons else 'var(--primary)' }}20; display: flex; align-items: center; justify-content: center;">
<svg width="24" height="24" fill="{{ platform_icons[sm.platform]['color'] if sm.platform in platform_icons else 'var(--primary)' }}" viewBox="0 0 24 24">
{{ platform_icons[sm.platform]['icon']|safe if sm.platform in platform_icons else '<circle cx="12" cy="12" r="10"/>' }}
</svg>
</div>
<div style="font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin-bottom: 2px; text-transform: capitalize;">{{ sm.platform }}</div>
{% if sm.followers_count %}
<div style="font-size: var(--font-size-sm); color: var(--text-secondary);">{{ "{:,}".format(sm.followers_count|int).replace(",", " ") }} obserwujących</div>
{% elif sm.page_name %}
<div style="font-size: var(--font-size-sm); color: var(--text-secondary);">{{ sm.page_name|truncate(20) }}</div>
{% else %}
<div style="font-size: var(--font-size-sm); color: var(--text-muted);">Aktywny profil</div>
{% endif %}
{% if sm.is_valid %}
<span style="display: inline-block; margin-top: var(--spacing-xs); padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: var(--radius-sm); font-size: 11px; font-weight: 500;">Zweryfikowany</span>
{% endif %}
</a>
{% endfor %}
</div>
</div>
{% endif %}
<!-- IT Audit Section - Only show if IT audit was performed -->
{% if it_audit and it_audit.overall_score is not none %}
<div class="company-section" id="it-audit">
<h2 class="section-title">
Audyt IT
<span style="font-size: var(--font-size-sm); font-weight: normal; color: var(--text-secondary); margin-left: var(--spacing-sm);">
({{ it_audit.audit_date.strftime('%d.%m.%Y') }})
</span>
</h2>
<!-- IT Score Banner - Clickable link to detailed audit -->
{# Unified 5-level color scale: 0-29 red, 30-49 orange, 50-69 amber, 70-89 lime, 90-100 green #}
<a href="{{ url_for('it_audit_dashboard', slug=company.slug) }}" style="text-decoration: none; display: block; margin-bottom: var(--spacing-lg); padding: var(--spacing-lg); border-radius: var(--radius-lg); display: flex; align-items: center; gap: var(--spacing-lg); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
background: linear-gradient(135deg, {% if it_audit.overall_score >= 90 %}#10b981, #059669{% elif it_audit.overall_score >= 70 %}#84cc16, #65a30d{% elif it_audit.overall_score >= 50 %}#f59e0b, #d97706{% elif it_audit.overall_score >= 30 %}#f97316, #ea580c{% else %}#ef4444, #dc2626{% endif %});"
onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 25px rgba(0,0,0,0.15)';"
onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none';">
<div style="width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<span style="font-size: 32px; font-weight: 700; color: white;">{{ it_audit.overall_score }}</span>
</div>
<div style="flex: 1; color: white;">
<div style="font-size: var(--font-size-xl); font-weight: 600; margin-bottom: 4px;">
{% if it_audit.overall_score >= 90 %}Doskonała infrastruktura IT{% elif it_audit.overall_score >= 70 %}Dobra infrastruktura IT{% elif it_audit.overall_score >= 50 %}Przeciętna infrastruktura IT{% elif it_audit.overall_score >= 30 %}Infrastruktura IT wymaga rozwoju{% else %}Słaba infrastruktura IT{% endif %}
</div>
<div style="font-size: var(--font-size-sm); opacity: 0.9;">
{% if it_audit.overall_score >= 90 %}Nowoczesna i dobrze zabezpieczona infrastruktura{% elif it_audit.overall_score >= 70 %}Infrastruktura na dobrym poziomie{% elif it_audit.overall_score >= 50 %}Infrastruktura wymaga modernizacji{% elif it_audit.overall_score >= 30 %}Infrastruktura wymaga znaczącej rozbudowy{% else %}Infrastruktura wymaga pilnej modernizacji{% endif %}
</div>
</div>
<div style="color: white; opacity: 0.7;">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
</div>
</a>
<!-- IT Scores Grid -->
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-md); margin-bottom: var(--spacing-lg);">
<!-- Overall Score -->
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); text-align: center;
border: 2px solid {% if it_audit.overall_score >= 90 %}#10b981{% elif it_audit.overall_score >= 50 %}#6366f1{% else %}#f59e0b{% endif %};">
<div style="width: 48px; height: 48px; border-radius: 50%; margin: 0 auto var(--spacing-sm);
background: {% if it_audit.overall_score >= 90 %}#dcfce7{% elif it_audit.overall_score >= 50 %}#e0e7ff{% else %}#fef3c7{% endif %};
display: flex; align-items: center; justify-content: center;">
<svg width="24" height="24" fill="{% if it_audit.overall_score >= 90 %}#166534{% elif it_audit.overall_score >= 50 %}#4338ca{% else %}#92400e{% endif %}" viewBox="0 0 24 24">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
</div>
<div style="font-size: 28px; font-weight: 700; color: {% if it_audit.overall_score >= 90 %}#166534{% elif it_audit.overall_score >= 50 %}#4338ca{% else %}#92400e{% endif %};">
{{ it_audit.overall_score }}
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); font-weight: 500;">Ogólny wynik</div>
</div>
<!-- Security Score -->
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); text-align: center;
border: 2px solid {% if it_audit.security_score and it_audit.security_score >= 90 %}#10b981{% elif it_audit.security_score and it_audit.security_score >= 50 %}#f59e0b{% elif it_audit.security_score %}#ef4444{% else %}#e5e7eb{% endif %};">
<div style="width: 48px; height: 48px; border-radius: 50%; margin: 0 auto var(--spacing-sm);
background: {% if it_audit.security_score and it_audit.security_score >= 90 %}#dcfce7{% elif it_audit.security_score and it_audit.security_score >= 50 %}#fef3c7{% elif it_audit.security_score %}#fee2e2{% else %}#f3f4f6{% endif %};
display: flex; align-items: center; justify-content: center;">
<svg width="24" height="24" fill="{% if it_audit.security_score and it_audit.security_score >= 90 %}#166534{% elif it_audit.security_score and it_audit.security_score >= 50 %}#92400e{% elif it_audit.security_score %}#991b1b{% else %}#9ca3af{% endif %}" viewBox="0 0 24 24">
<path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/>
</svg>
</div>
<div style="font-size: 28px; font-weight: 700; color: {% if it_audit.security_score and it_audit.security_score >= 90 %}#166534{% elif it_audit.security_score and it_audit.security_score >= 50 %}#92400e{% elif it_audit.security_score %}#991b1b{% else %}#9ca3af{% endif %};">
{% if it_audit.security_score is not none %}{{ it_audit.security_score }}{% else %}-{% endif %}
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); font-weight: 500;">Bezpieczeństwo</div>
</div>
<!-- Collaboration Score -->
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); text-align: center;
border: 2px solid {% if it_audit.collaboration_score and it_audit.collaboration_score >= 90 %}#10b981{% elif it_audit.collaboration_score and it_audit.collaboration_score >= 50 %}#3b82f6{% elif it_audit.collaboration_score %}#f59e0b{% else %}#e5e7eb{% endif %};">
<div style="width: 48px; height: 48px; border-radius: 50%; margin: 0 auto var(--spacing-sm);
background: {% if it_audit.collaboration_score and it_audit.collaboration_score >= 90 %}#dcfce7{% elif it_audit.collaboration_score and it_audit.collaboration_score >= 50 %}#dbeafe{% elif it_audit.collaboration_score %}#fef3c7{% else %}#f3f4f6{% endif %};
display: flex; align-items: center; justify-content: center;">
<svg width="24" height="24" fill="{% if it_audit.collaboration_score and it_audit.collaboration_score >= 90 %}#166534{% elif it_audit.collaboration_score and it_audit.collaboration_score >= 50 %}#1e40af{% elif it_audit.collaboration_score %}#92400e{% else %}#9ca3af{% endif %}" viewBox="0 0 24 24">
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
</svg>
</div>
<div style="font-size: 28px; font-weight: 700; color: {% if it_audit.collaboration_score and it_audit.collaboration_score >= 90 %}#166534{% elif it_audit.collaboration_score and it_audit.collaboration_score >= 50 %}#1e40af{% elif it_audit.collaboration_score %}#92400e{% else %}#9ca3af{% endif %};">
{% if it_audit.collaboration_score is not none %}{{ it_audit.collaboration_score }}{% else %}-{% endif %}
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); font-weight: 500;">Współpraca</div>
</div>
<!-- Maturity Level -->
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); text-align: center; border: 2px solid #e5e7eb;">
<div style="width: 48px; height: 48px; border-radius: 50%; margin: 0 auto var(--spacing-sm); background: #f3f4f6; display: flex; align-items: center; justify-content: center;">
<svg width="24" height="24" fill="#6b7280" viewBox="0 0 24 24">
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14l-5-5 1.41-1.41L12 14.17l4.59-4.58L18 11l-6 6z"/>
</svg>
</div>
<div style="font-size: 18px; font-weight: 700; color: var(--text-primary);">
{% if it_audit.maturity_level == 'advanced' %}Zaawansowany{% elif it_audit.maturity_level == 'established' %}Rozwinięty{% elif it_audit.maturity_level == 'developing' %}Rozwijający{% else %}Podstawowy{% endif %}
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); font-weight: 500;">Poziom dojrzałości</div>
</div>
</div>
<!-- IT Capabilities Grid -->
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg);">
<!-- Cloud & Identity -->
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 1px solid var(--border);">
<h3 style="font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin-bottom: var(--spacing-md); display: flex; align-items: center; gap: var(--spacing-sm);">
<svg width="20" height="20" fill="var(--primary)" viewBox="0 0 24 24">
<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z"/>
</svg>
Chmura i tożsamość
</h3>
<div style="display: grid; gap: var(--spacing-sm);">
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Microsoft 365</span>
{% if it_audit.has_m365 %}
<span style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Tak</span>
{% else %}
<span style="padding: 2px 8px; background: #f3f4f6; color: #9ca3af; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Nie</span>
{% endif %}
</div>
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Azure AD / Entra ID</span>
{% if it_audit.has_azure_ad %}
<span style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Tak</span>
{% else %}
<span style="padding: 2px 8px; background: #f3f4f6; color: #9ca3af; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Nie</span>
{% endif %}
</div>
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Google Workspace</span>
{% if it_audit.has_google_workspace %}
<span style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Tak</span>
{% else %}
<span style="padding: 2px 8px; background: #f3f4f6; color: #9ca3af; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Nie</span>
{% endif %}
</div>
</div>
</div>
<!-- Security -->
<div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 1px solid var(--border);">
<h3 style="font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin-bottom: var(--spacing-md); display: flex; align-items: center; gap: var(--spacing-sm);">
<svg width="20" height="20" fill="var(--primary)" viewBox="0 0 24 24">
<path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/>
</svg>
Bezpieczeństwo
</h3>
<div style="display: grid; gap: var(--spacing-sm);">
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">MFA (2FA)</span>
{% if it_audit.has_mfa %}
<span style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Tak</span>
{% else %}
<span style="padding: 2px 8px; background: #fee2e2; color: #991b1b; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Nie</span>
{% endif %}
</div>
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">VPN</span>
{% if it_audit.has_vpn %}
<span style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Tak</span>
{% else %}
<span style="padding: 2px 8px; background: #f3f4f6; color: #9ca3af; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Nie</span>
{% endif %}
</div>
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); background: white; border-radius: var(--radius);">
<span style="font-size: var(--font-size-sm); color: var(--text-secondary);">EDR</span>
{% if it_audit.has_edr %}
<span style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Tak</span>
{% else %}
<span style="padding: 2px 8px; background: #fef3c7; color: #92400e; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;">Nie</span>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% endif %}
{# Company Events - UKRYTE (2026-01-11) - do przywrócenia w przyszłości
{% if events %}
<div class="company-section">
<h2 class="section-title">
Aktualności i wydarzenia
<a href="{{ url_for('events', company=company.id) }}" style="float: right; font-size: var(--font-size-sm); color: var(--primary); text-decoration: none; font-weight: normal;">
Zobacz wszystkie →
</a>
</h2>
{% for event in events %}
<div style="padding: var(--spacing-lg); background: var(--background); border-radius: var(--radius-lg); margin-bottom: var(--spacing-md); {% if loop.last %}margin-bottom: 0;{% endif %}">
<div style="margin-bottom: var(--spacing-sm);">
<span class="tag {% if event.event_type == 'product_launch' %}primary{% endif %}" style="font-size: var(--font-size-sm);">
{% if event.event_type == 'product_launch' %}📦 Nowy produkt{% endif %}
{% if event.event_type == 'company_milestone' %}🏆 Kamień milowy{% endif %}
{% if event.event_type == 'company_news' %}📰 Aktualność{% endif %}
{% if event.event_type == 'education_event' %}🎓 Szkolenie{% endif %}
{% if event.event_type == 'company_info' %} Informacja{% endif %}
{% if event.event_type == 'financial_report' %}💰 Raport finansowy{% endif %}
{% if event.event_type == 'contract_win' %}🤝 Nowy kontrakt{% endif %}
{% if event.event_type == 'event' %}📅 Wydarzenie{% endif %}
</span>
</div>
<h3 style="font-size: var(--font-size-lg); font-weight: 600; color: var(--text-primary); margin-bottom: var(--spacing-sm);">
{{ event.title }}
</h3>
<p style="color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--spacing-md);">
{{ event.description|truncate(200) if event.description|length > 200 else event.description }}
</p>
<div style="display: flex; gap: var(--spacing-lg); font-size: var(--font-size-sm); color: var(--text-secondary);">
{% if event.event_date %}
<div style="display: flex; align-items: center; gap: var(--spacing-xs);">
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
<rect x="2" y="3" width="12" height="12" rx="2"/>
<path d="M2 7h12M6 3v2M10 3v2"/>
</svg>
{{ event.event_date.strftime('%d.%m.%Y') }}
</div>
{% endif %}
{% if event.source_url %}
<div style="display: flex; align-items: center; gap: var(--spacing-xs);">
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
<path d="M8 2l4 4-4 4M2 6h10"/>
</svg>
<a href="{{ event.source_url }}" target="_blank" rel="noopener noreferrer" style="color: var(--primary); text-decoration: none;">
Źródło
</a>
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
{% endif %}
#}
<!-- Universal Confirm Modal -->
<div class="modal-overlay" id="confirmModal">
<div class="modal" style="max-width: 420px; background: var(--surface); border-radius: var(--radius-lg); padding: var(--spacing-xl);">
<div style="text-align: center; margin-bottom: var(--spacing-lg);">
<div class="modal-icon" id="confirmModalIcon" style="font-size: 3em; margin-bottom: var(--spacing-md);"></div>
<h3 id="confirmModalTitle" style="margin-bottom: var(--spacing-sm);">Potwierdzenie</h3>
<p class="modal-description" id="confirmModalMessage" style="color: var(--text-secondary);"></p>
</div>
<div class="modal-actions" style="display: flex; gap: var(--spacing-sm); justify-content: center;">
<button type="button" class="btn btn-secondary" id="confirmModalCancel">Anuluj</button>
<button type="button" class="btn btn-primary" id="confirmModalOk">OK</button>
</div>
</div>
</div>
<!-- AI Progress Modal -->
<div id="aiProgressModal" class="ai-progress-modal">
<div class="ai-progress-content">
<div class="ai-progress-header">
<h3>
<div class="spinner-icon" id="aiSpinner"></div>
<span id="aiModalTitle">Wzbogacanie danych AI...</span>
</h3>
<button class="ai-cancel-btn" id="aiCancelBtn" onclick="cancelAiEnrichment()">Anuluj</button>
</div>
<div class="ai-progress-body">
<div class="ai-progress-bar-container">
<div class="ai-progress-bar-bg">
<div class="ai-progress-bar" id="aiProgressBar" style="width: 0%">
<span id="aiProgressPercent">0%</span>
</div>
</div>
</div>
<div class="ai-progress-status" id="aiProgressStatus">
<span class="status-icon"></span>
<span id="aiStatusText">Przygotowywanie...</span>
</div>
<div class="ai-progress-log" id="aiProgressLog">
<!-- Log entries will be added here -->
</div>
</div>
<div class="ai-progress-footer" id="aiProgressFooter" style="display: none;">
<button class="btn btn-secondary" onclick="closeAiModal()">Zamknij</button>
<button class="btn btn-primary" onclick="window.location.reload()">Odswiez strone</button>
</div>
</div>
</div>
<div id="toastContainer" style="position: fixed; top: 80px; right: 20px; z-index: 1100; display: flex; flex-direction: column; gap: 10px;"></div>
<style>
.modal-overlay#confirmModal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1050; align-items: center; justify-content: center; }
.modal-overlay#confirmModal.active { display: flex; }
.toast { padding: 12px 20px; border-radius: var(--radius); background: var(--surface); border-left: 4px solid var(--primary); box-shadow: 0 4px 12px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 10px; animation: toastIn 0.3s ease; }
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--error); }
@keyframes toastIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; } }
</style>
<script>
let confirmResolve = null;
function showConfirm(message, options = {}) {
return new Promise(resolve => {
confirmResolve = resolve;
document.getElementById('confirmModalIcon').textContent = options.icon || '❓';
document.getElementById('confirmModalTitle').textContent = options.title || 'Potwierdzenie';
document.getElementById('confirmModalMessage').innerHTML = message;
document.getElementById('confirmModalOk').textContent = options.okText || 'OK';
document.getElementById('confirmModalOk').className = 'btn ' + (options.okClass || 'btn-primary');
document.getElementById('confirmModal').classList.add('active');
});
}
function closeConfirm(result) {
document.getElementById('confirmModal').classList.remove('active');
if (confirmResolve) { confirmResolve(result); confirmResolve = null; }
}
document.getElementById('confirmModalOk').addEventListener('click', () => closeConfirm(true));
document.getElementById('confirmModalCancel').addEventListener('click', () => closeConfirm(false));
document.getElementById('confirmModal').addEventListener('click', e => { if (e.target.id === 'confirmModal') closeConfirm(false); });
function showToast(message, type = 'info', duration = 4000) {
const container = document.getElementById('toastContainer');
const icons = { success: '✓', error: '✕', warning: '⚠', info: '' };
const toast = document.createElement('div');
toast.className = `toast ${type}`;
toast.innerHTML = `<span style="font-size:1.2em">${icons[type]||''}</span><span>${message}</span>`;
container.appendChild(toast);
setTimeout(() => { toast.style.animation = 'toastOut 0.3s ease forwards'; setTimeout(() => toast.remove(), 300); }, duration);
}
// Edit recommendation
function editRecommendation(recId) {
window.location.href = `/api/recommendations/${recId}/edit`;
}
// Delete recommendation
async function deleteRecommendation(recId) {
const confirmed = await showConfirm('Czy na pewno chcesz usunąć tę rekomendację?', {
icon: '🗑️',
title: 'Usuwanie rekomendacji',
okText: 'Usuń',
okClass: 'btn-danger'
});
if (!confirmed) return;
try {
const response = await fetch(`/api/recommendations/${recId}/delete`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
},
credentials: 'same-origin'
});
const data = await response.json();
if (data.success) {
showToast('Rekomendacja została usunięta', 'success');
setTimeout(() => window.location.reload(), 1500);
} else {
showToast('Błąd: ' + (data.error || 'Nie udało się usunąć rekomendacji.'), 'error');
}
} catch (error) {
console.error('Error:', error);
showToast('Wystąpił błąd podczas usuwania rekomendacji.', 'error');
}
}
// === AI ENRICHMENT ===
let aiEnrichmentCancelled = false;
let aiEnrichmentController = null;
function openAiModal() {
document.getElementById('aiProgressModal').classList.add('active');
document.getElementById('aiProgressBar').style.width = '0%';
document.getElementById('aiProgressPercent').textContent = '0%';
document.getElementById('aiProgressLog').innerHTML = '';
document.getElementById('aiProgressFooter').style.display = 'none';
document.getElementById('aiCancelBtn').style.display = 'block';
document.getElementById('aiSpinner').style.display = 'block';
document.getElementById('aiModalTitle').textContent = 'Wzbogacanie danych AI...';
aiEnrichmentCancelled = false;
}
function closeAiModal() {
document.getElementById('aiProgressModal').classList.remove('active');
}
function cancelAiEnrichment() {
aiEnrichmentCancelled = true;
if (aiEnrichmentController) {
aiEnrichmentController.abort();
}
addAiLogEntry('Anulowano przez uzytkownika', 'error', '✕');
finishAiEnrichment(false);
}
function updateAiProgress(percent, status) {
document.getElementById('aiProgressBar').style.width = `${percent}%`;
document.getElementById('aiProgressPercent').textContent = `${percent}%`;
if (status) {
document.getElementById('aiStatusText').textContent = status;
}
}
function addAiLogEntry(message, type = 'info', icon = null) {
const log = document.getElementById('aiProgressLog');
const entry = document.createElement('div');
entry.className = `ai-log-entry ${type}`;
const icons = {
step: '▶',
success: '✓',
error: '✕',
info: '•'
};
entry.innerHTML = `
<span class="ai-log-icon">${icon || icons[type] || '•'}</span>
<span>${message}</span>
`;
log.appendChild(entry);
log.scrollTop = log.scrollHeight;
}
function finishAiEnrichment(success) {
document.getElementById('aiCancelBtn').style.display = 'none';
document.getElementById('aiSpinner').style.display = 'none';
document.getElementById('aiProgressFooter').style.display = 'flex';
if (success) {
document.getElementById('aiModalTitle').textContent = 'Wzbogacanie zakonczone!';
updateAiProgress(100, 'Zakonczone pomyslnie');
document.querySelector('#aiProgressStatus .status-icon').textContent = '✓';
} else {
document.getElementById('aiModalTitle').textContent = 'Wystapil blad';
document.querySelector('#aiProgressStatus .status-icon').textContent = '✕';
}
}
document.addEventListener('DOMContentLoaded', function() {
const aiEnrichBtn = document.getElementById('aiEnrichBtn');
if (aiEnrichBtn && !aiEnrichBtn.disabled) {
aiEnrichBtn.addEventListener('click', async function() {
const companyId = this.dataset.companyId;
const companyName = '{{ company.name }}';
// Open modal
openAiModal();
// Step 1: Initialize
updateAiProgress(5, 'Inicjalizacja...');
addAiLogEntry(`Rozpoczynam wzbogacanie danych dla: ${companyName}`, 'step');
await sleep(300);
if (aiEnrichmentCancelled) return;
// Step 2: Collecting data
updateAiProgress(15, 'Zbieranie danych firmy...');
addAiLogEntry('Pobieranie aktualnych danych firmy z bazy', 'info');
await sleep(400);
if (aiEnrichmentCancelled) return;
// Step 3: Preparing prompt
updateAiProgress(25, 'Przygotowywanie zapytania AI...');
addAiLogEntry('Budowanie kontekstu dla modelu AI', 'info');
addAiLogEntry('Dane do analizy: nazwa, kategoria, opis, uslugi, kompetencje', 'info');
await sleep(300);
if (aiEnrichmentCancelled) return;
// Step 4: Calling AI
updateAiProgress(35, 'Wysylanie do Gemini AI...');
addAiLogEntry('Laczenie z Google Gemini API...', 'step');
try {
aiEnrichmentController = new AbortController();
addAiLogEntry('Oczekiwanie na odpowiedz AI (moze potrwac do 30s)...', 'info');
updateAiProgress(45, 'Analizowanie przez AI...');
const response = await fetch(`/api/company/${companyId}/enrich-ai`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': '{{ csrf_token() }}'
},
signal: aiEnrichmentController.signal
});
if (aiEnrichmentCancelled) return;
updateAiProgress(70, 'Przetwarzanie odpowiedzi...');
addAiLogEntry('Odpowiedz otrzymana, przetwarzanie...', 'info');
const data = await response.json();
if (data.success) {
updateAiProgress(85, 'Zapisywanie wynikow...');
addAiLogEntry('Parsowanie odpowiedzi JSON', 'info');
await sleep(200);
// Show what was generated
const insights = data.insights;
addAiLogEntry('Wygenerowane dane:', 'step');
if (insights.business_summary) {
addAiLogEntry(`Opis biznesowy: ${insights.business_summary.substring(0, 60)}...`, 'success');
}
if (insights.services_list && insights.services_list.length > 0) {
addAiLogEntry(`Uslugi: ${insights.services_list.length} pozycji`, 'success');
}
if (insights.unique_selling_points && insights.unique_selling_points.length > 0) {
addAiLogEntry(`Wyrozniki: ${insights.unique_selling_points.length} pozycji`, 'success');
}
if (insights.industry_tags && insights.industry_tags.length > 0) {
addAiLogEntry(`Tagi branzowe: ${insights.industry_tags.join(', ')}`, 'success');
}
if (insights.suggested_category) {
addAiLogEntry(`Sugerowana kategoria: ${insights.suggested_category}`, 'success');
}
updateAiProgress(95, 'Finalizacja...');
addAiLogEntry('Zapisano do bazy danych', 'info');
await sleep(300);
addAiLogEntry(`Czas przetwarzania: ${data.processing_time_ms}ms`, 'info');
addAiLogEntry('Wzbogacanie zakonczone pomyslnie!', 'success', '★');
finishAiEnrichment(true);
} else {
addAiLogEntry('Blad: ' + (data.error || 'Nieznany blad'), 'error');
finishAiEnrichment(false);
}
} catch (error) {
if (error.name === 'AbortError') {
// Already handled in cancelAiEnrichment
return;
}
console.error('AI enrichment error:', error);
addAiLogEntry('Blad polaczenia: ' + error.message, 'error');
finishAiEnrichment(false);
}
});
}
});
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
</script>
{% endblock %}