nordabiz/templates/company_detail.html
Maciej Pienczyn 61caea4903 fix: add navigation to GBP audit feature (qa-requested)
Fixes:
- Added GBP audit link to company profile contact bar
- Link visible to admins on all profiles
- Link visible to regular users only on their own company profile
- Styled consistently with contact bar design (Google blue)

Verified:
- Template syntax balanced (blocks, if, for)
- Route gbp_audit_dashboard exists in app.py

QA Fix Session: 1

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-08 19:27:28 +01:00

2240 lines
147 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 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-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%);
}
.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; }
@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>
{% 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 %}
</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>
<!-- 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 -->
{% set overall_score = website_analysis.seo_overall_score or website_analysis.pagespeed_seo_score %}
{% if overall_score is not none %}
<div style="margin-bottom: var(--spacing-lg); padding: var(--spacing-lg); border-radius: var(--radius-lg); display: flex; align-items: center; gap: var(--spacing-lg);
background: linear-gradient(135deg, {% if overall_score >= 90 %}#10b981, #059669{% elif overall_score >= 50 %}#f59e0b, #d97706{% else %}#ef4444, #dc2626{% endif %});">
<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 >= 75 %}Dobry wynik SEO{% elif overall_score >= 50 %}Przeciętny wynik SEO{% else %}Wynik SEO wymaga poprawy{% endif %}
</div>
<div style="font-size: var(--font-size-sm); opacity: 0.9;">
{% if overall_score >= 90 %}Strona jest bardzo dobrze zoptymalizowana pod kątem wyszukiwarek{% elif overall_score >= 75 %}Strona jest dobrze zoptymalizowana, ale jest miejsce na ulepszenia{% elif overall_score >= 50 %}Strona wymaga optymalizacji w kilku obszarach{% else %}Strona wymaga znacznej optymalizacji SEO{% endif %}
</div>
</div>
</div>
{% 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 %}
<!-- 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 %}
<script>
// Edit recommendation
function editRecommendation(recId) {
// Redirect to edit form (will be implemented in phase 4)
window.location.href = `/api/recommendations/${recId}/edit`;
}
// Delete recommendation
function deleteRecommendation(recId) {
if (!confirm('Czy na pewno chcesz usunąć tę rekomendację?')) {
return;
}
fetch(`/api/recommendations/${recId}/delete`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
},
credentials: 'same-origin'
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert('Rekomendacja została usunięta.');
window.location.reload();
} else {
alert('Błąd: ' + (data.error || 'Nie udało się usunąć rekomendacji.'));
}
})
.catch(error => {
console.error('Error:', error);
alert('Wystąpił błąd podczas usuwania rekomendacji.');
});
}
</script>
{% endblock %}