nordabiz/templates/company_detail.html.bak.20251229_142208
Maciej Pienczyn 6e4e7c2240 Sync: Current production state
- Added CompanyRecommendation system
- Made company pages public (removed @login_required)
- CSS refactor: inline styles instead of external fluent CSS
- Added release notes page
- Added admin recommendations panel
- Company logos (webp format)
- Docker compose configuration

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-08 12:26:22 +01:00

1478 lines
94 KiB
Plaintext
Executable File
Raw Permalink 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 Hub{% 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-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%);
}
.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;
}
</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">
{% 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>
{% if company.description_short %}
<p class="company-description">{{ company.description_short }}</p>
{% 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 %}
<!-- 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>
<!-- 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;">
<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>
</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 %}
<!-- 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>
<!-- 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>
<!-- 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 %}
<!-- Company Events -->
{% 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 %}
{% endblock %}