{% extends "base.html" %}

{% block title %}Władze Izby - Norda Biznes Partner{% endblock %}

{% block extra_css %}
    .authorities-container {
        max-width: 900px;
        margin: 0 auto;
    }

    .authorities-header {
        text-align: center;
        margin-bottom: var(--spacing-2xl);
    }

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

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

    .authority-group {
        margin-bottom: var(--spacing-xl);
    }

    .authority-group-header {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-md);
        padding-bottom: var(--spacing-sm);
        border-bottom: 2px solid var(--border-color, #e5e7eb);
    }

    .authority-group-header h2 {
        font-size: var(--font-size-lg);
        color: var(--text-primary);
        margin: 0;
    }

    .authority-group-icon {
        font-size: 1.5em;
    }

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

    .authority-card {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
        background: white;
        border-radius: var(--radius-lg);
        border: 1px solid var(--border-color, #e5e7eb);
        text-decoration: none;
        color: inherit;
        transition: var(--transition);
    }

    .authority-card:hover {
        border-color: var(--primary);
        box-shadow: 0 4px 12px rgba(46, 72, 114, 0.1);
        transform: translateY(-1px);
    }

    .authority-avatar {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        flex-shrink: 0;
        overflow: hidden;
        background: linear-gradient(135deg, var(--primary), #8b5cf6);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .authority-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .authority-avatar-initial {
        color: white;
        font-weight: 700;
        font-size: 18px;
    }

    .authority-info {
        flex: 1;
        min-width: 0;
    }

    .authority-name {
        font-weight: 600;
        font-size: var(--font-size-base);
        color: var(--text-primary);
    }

    .authority-role {
        font-size: 11px;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 4px;
        display: inline-block;
        margin-top: 3px;
    }

    .role-prezes { background: #fef3c7; color: #92400e; }
    .role-wiceprezes { background: #dbeafe; color: #1d4ed8; }
    .role-czlonek_rady { background: #ecfdf5; color: #065f46; }
    .role-komisja_rewizyjna { background: #f3e8ff; color: #6b21a8; }
    .role-sad_kolezenski { background: #f3f4f6; color: #4b5563; }

    .authority-company {
        font-size: var(--font-size-xs);
        color: var(--text-secondary);
        margin-top: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    @media (max-width: 640px) {
        .authority-members {
            grid-template-columns: 1fr;
        }
    }
{% endblock %}

{% block content %}
<div class="authorities-container">
    <div class="authorities-header">
        <h1>Władze Izby Norda Biznes</h1>
        <p>Kadencja 2023–2026</p>
    </div>

    {% for key, group in groups.items() %}
    {% if group.members %}
    <div class="authority-group">
        <div class="authority-group-header">
            <span class="authority-group-icon">{{ group.icon }}</span>
            <h2>{{ group.title }}</h2>
            <span style="color: var(--text-muted); font-size: var(--font-size-sm); font-weight: normal;">({{ group.members|length }})</span>
        </div>
        <div class="authority-members">
            {% for user in group.members %}
            <a href="{{ url_for('public.user_profile', user_id=user.id) }}" class="authority-card">
                <div class="authority-avatar">
                    {% if user.avatar_path %}
                    <img src="{{ url_for('static', filename=user.avatar_path) }}" alt="">
                    {% else %}
                    <span class="authority-avatar-initial">{{ (user.name or user.email)[0].upper() }}</span>
                    {% endif %}
                </div>
                <div class="authority-info">
                    <div class="authority-name">{{ user.name or user.email.split('@')[0] }}</div>
                    <span class="authority-role role-{{ user.chamber_role }}">{{ user.chamber_role_label }}</span>
                    {% if user.company %}
                    <div class="authority-company">{{ user.company.name }}</div>
                    {% endif %}
                </div>
            </a>
            {% endfor %}
        </div>
    </div>
    {% endif %}
    {% endfor %}
</div>
{% endblock %}