{% extends "base.html" %}

{% block title %}Nowi czlonkowie - Norda Biznes Partner{% endblock %}

{% block extra_css %}
<style>
    .page-header {
        margin-bottom: var(--spacing-xl);
    }

    .page-header h1 {
        font-size: var(--font-size-3xl);
        color: var(--text-primary);
    }

    .filters {
        display: flex;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-xl);
    }

    .filter-btn {
        padding: var(--spacing-sm) var(--spacing-md);
        border-radius: var(--radius);
        border: 1px solid var(--border);
        background: var(--surface);
        text-decoration: none;
        color: var(--text-secondary);
        font-size: var(--font-size-sm);
        transition: var(--transition);
    }

    .filter-btn:hover {
        background: var(--background);
        color: var(--text-primary);
    }

    .filter-btn.active {
        background: var(--primary);
        border-color: var(--primary);
        color: white;
    }

    .members-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: var(--spacing-lg);
    }

    .member-card {
        background: var(--surface);
        border-radius: var(--radius-lg);
        padding: var(--spacing-lg);
        box-shadow: var(--shadow);
        transition: var(--transition);
        position: relative;
    }

    .member-card:hover {
        box-shadow: var(--shadow-md);
    }

    .new-badge {
        position: absolute;
        top: var(--spacing-md);
        right: var(--spacing-md);
        background: var(--success);
        color: white;
        padding: 2px 10px;
        border-radius: var(--radius-sm);
        font-size: var(--font-size-xs);
        font-weight: 600;
        text-transform: uppercase;
    }

    .member-category {
        font-size: var(--font-size-xs);
        color: var(--text-secondary);
        text-transform: uppercase;
        margin-bottom: var(--spacing-xs);
    }

    .member-name {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: var(--spacing-sm);
    }

    .member-name a {
        color: inherit;
        text-decoration: none;
    }

    .member-name a:hover {
        color: var(--primary);
    }

    .member-description {
        color: var(--text-secondary);
        font-size: var(--font-size-sm);
        margin-bottom: var(--spacing-md);
        line-height: 1.5;
    }

    .member-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: var(--spacing-md);
        border-top: 1px solid var(--border);
        font-size: var(--font-size-sm);
    }

    .member-date {
        color: var(--text-secondary);
    }

    .member-location {
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
    }

    .empty-state {
        text-align: center;
        padding: var(--spacing-2xl);
        color: var(--text-secondary);
        background: var(--surface);
        border-radius: var(--radius-lg);
        grid-column: 1 / -1;
    }

    .stats-summary {
        background: var(--primary);
        color: white;
        padding: var(--spacing-lg);
        border-radius: var(--radius-lg);
        margin-bottom: var(--spacing-xl);
        display: flex;
        align-items: center;
        gap: var(--spacing-lg);
    }

    .stats-number {
        font-size: var(--font-size-3xl);
        font-weight: 700;
    }

    .stats-text {
        font-size: var(--font-size-lg);
    }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Nowi czlonkowie</h1>
    <p class="text-muted">Firmy ktore dolaczylky do Norda Biznes</p>
</div>

<div class="stats-summary">
    <div class="stats-number">{{ total }}</div>
    <div class="stats-text">nowych firm w ciagu ostatnich {{ days }} dni</div>
</div>

<div class="filters">
    <a href="{{ url_for('new_members', days=30) }}" class="filter-btn {% if days == 30 %}active{% endif %}">Ostatnie 30 dni</a>
    <a href="{{ url_for('new_members', days=60) }}" class="filter-btn {% if days == 60 %}active{% endif %}">Ostatnie 60 dni</a>
    <a href="{{ url_for('new_members', days=90) }}" class="filter-btn {% if days == 90 %}active{% endif %}">Ostatnie 90 dni</a>
    <a href="{{ url_for('new_members', days=180) }}" class="filter-btn {% if days == 180 %}active{% endif %}">Ostatnie 6 miesiecy</a>
</div>

<div class="members-grid">
    {% if companies %}
        {% for company in companies %}
        <div class="member-card">
            <span class="new-badge">Nowy</span>
            {% if company.category %}
            <div class="member-category">{{ company.category.name }}</div>
            {% endif %}
            <div class="member-name">
                <a href="{{ url_for('company_detail', company_id=company.id) }}">{{ company.name }}</a>
            </div>
            {% if company.description_short %}
            <div class="member-description">
                {{ company.description_short[:150] }}{% if company.description_short|length > 150 %}...{% endif %}
            </div>
            {% endif %}
            <div class="member-meta">
                <span class="member-date">Dolaczyl: {{ company.created_at.strftime('%d.%m.%Y') }}</span>
                {% if company.address_city %}
                <span class="member-location">
                    <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                        <circle cx="12" cy="10" r="3"></circle>
                    </svg>
                    {{ company.address_city }}
                </span>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    {% else %}
        <div class="empty-state">
            <p>Brak nowych firm w wybranym okresie</p>
        </div>
    {% endif %}
</div>
{% endblock %}