<div class="activity-feed">
    <!-- Activity Feed Header -->
    <div class="activity-header">
        <h3 class="activity-title">
            {{active_filter_label}}
            <span class="unread-badge" if="has_unread">{{unread_badge}}</span>
        </h3>

        <div class="activity-actions">
            <button
                class="mark-all-read-btn"
                if="show_mark_all_read"
                data-live-action="markAllAsRead"
                title="Alle als gelesen markieren"
            >
                ✓ Alle gelesen
            </button>
        </div>
    </div>

    <!-- Filter Tabs -->
    <div class="activity-filters" if="show_filters">
        <for items="filter_options" as="option">
            <button
                class="filter-tab {{option.is_active ? 'active' : ''}}"
                data-live-action="setFilter"
                data-param-filter="{{option.value}}"
            >
                {{option.label}}
                <span class="filter-count" if="option.count > 0">({{option.count}})</span>
            </button>
        </for>
    </div>

    <!-- Empty State -->
    <div class="activity-empty" if="is_empty">
        <div class="empty-icon">📭</div>
        <h3 class="empty-title">Keine Aktivitäten</h3>
        <p class="empty-text">Es gibt derzeit keine Aktivitäten in diesem Feed.</p>
    </div>

    <!-- Activity List -->
    <div class="activity-list" if="has_activities">
        <for items="grouped_activities" as="group">
            <div class="activity-group">
                <div class="group-date-label" if="group.date_label">
                    {{group.date_label}}
                </div>

                <div class="group-activities">
                    <for items="group.activities" as="activity">
                        <div class="activity-item {{activity.read_class}} {{activity.activity_class}}">
                            <!-- Activity Icon & Avatar -->
                            <div class="activity-visual">
                                <div class="activity-avatar" if="activity.show_avatar">
                                    <img
                                        src="{{activity.avatar_url}}"
                                        alt="{{activity.user_name}}"
                                        class="avatar-img"
                                    />
                                </div>
                                <div class="activity-icon {{activity.icon_class}}">
                                    {{activity.icon}}
                                </div>
                            </div>

                            <!-- Activity Content -->
                            <div class="activity-content">
                                <div class="activity-text">
                                    <strong class="activity-user">{{activity.user_name}}</strong>
                                    {{activity.content}}
                                </div>

                                <div class="activity-meta" if="activity.show_timestamp">
                                    <span class="activity-time" title="{{activity.absolute_time}}">
                                        {{activity.relative_time}}
                                    </span>
                                    <span class="activity-type-label">• {{activity.type_label}}</span>
                                </div>
                            </div>

                            <!-- Activity Actions -->
                            <div class="activity-actions-menu">
                                <button
                                    class="activity-mark-read"
                                    if="!activity.is_read"
                                    data-live-action="markAsRead"
                                    data-param-activity-id="{{activity.id}}"
                                    title="Als gelesen markieren"
                                >
                                    ✓
                                </button>

                                <button
                                    class="activity-remove"
                                    data-live-action="removeActivity"
                                    data-param-activity-id="{{activity.id}}"
                                    title="Entfernen"
                                >
                                    ×
                                </button>
                            </div>
                        </div>
                    </for>
                </div>
            </div>
        </for>
    </div>

    <!-- Load More Button -->
    <div class="activity-footer" if="has_activities">
        <button
            class="load-more-btn"
            if="has_more"
            data-live-action="loadMore"
        >
            {{load_more_label}}
        </button>

        <div class="activity-count-info">
            Zeige {{showing_count}} von {{total_count}} Aktivitäten
        </div>
    </div>
</div>

<style>
    .activity-feed {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        overflow: hidden;
    }

    /* Header */
    .activity-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem;
        border-bottom: 2px solid #e0e0e0;
        background: #f9f9f9;
    }

    .activity-title {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: #333;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .unread-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        height: 24px;
        padding: 0 0.5rem;
        background: #f44336;
        color: white;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 700;
    }

    .mark-all-read-btn {
        padding: 0.5rem 1rem;
        background: #2196F3;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: 500;
        transition: background 0.2s;
        font-size: 0.875rem;
    }

    .mark-all-read-btn:hover {
        background: #1976D2;
    }

    /* Filters */
    .activity-filters {
        display: flex;
        gap: 0.5rem;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid #e0e0e0;
        overflow-x: auto;
        background: white;
    }

    .filter-tab {
        padding: 0.5rem 1rem;
        background: #f5f5f5;
        color: #666;
        border: 1px solid #e0e0e0;
        border-radius: 20px;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.2s;
        white-space: nowrap;
        font-size: 0.875rem;
    }

    .filter-tab:hover {
        background: #eeeeee;
        border-color: #bdbdbd;
    }

    .filter-tab.active {
        background: #2196F3;
        color: white;
        border-color: #2196F3;
    }

    .filter-count {
        margin-left: 0.25rem;
        opacity: 0.8;
    }

    /* Empty State */
    .activity-empty {
        text-align: center;
        padding: 4rem 2rem;
    }

    .empty-icon {
        font-size: 4rem;
        margin-bottom: 1rem;
    }

    .empty-title {
        margin: 0 0 0.5rem 0;
        font-size: 1.25rem;
        color: #333;
    }

    .empty-text {
        color: #666;
        margin: 0;
    }

    /* Activity List */
    .activity-list {
        max-height: 600px;
        overflow-y: auto;
    }

    .activity-group {
        margin-bottom: 0.5rem;
    }

    .group-date-label {
        padding: 0.75rem 1.5rem;
        background: #f5f5f5;
        font-weight: 600;
        font-size: 0.875rem;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .group-activities {
        background: white;
    }

    .activity-item {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid #f0f0f0;
        transition: background 0.2s;
        position: relative;
    }

    .activity-item:hover {
        background: #fafafa;
    }

    .activity-item.unread {
        background: #e3f2fd;
    }

    .activity-item.unread:hover {
        background: #d1e7fd;
    }

    /* Activity Visual */
    .activity-visual {
        position: relative;
        flex-shrink: 0;
    }

    .activity-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        overflow: hidden;
    }

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

    .activity-icon {
        position: absolute;
        bottom: -4px;
        right: -4px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.875rem;
        border: 2px solid white;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }

    .activity-icon-comment { background: #2196F3; }
    .activity-icon-like { background: #f44336; }
    .activity-icon-share { background: #4CAF50; }
    .activity-icon-follow { background: #9C27B0; }
    .activity-icon-mention { background: #FF9800; }
    .activity-icon-system { background: #607D8B; }

    /* Activity Content */
    .activity-content {
        flex: 1;
        min-width: 0;
    }

    .activity-text {
        color: #333;
        line-height: 1.5;
        margin-bottom: 0.25rem;
        word-wrap: break-word;
    }

    .activity-user {
        color: #1976D2;
        font-weight: 600;
    }

    .activity-meta {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.75rem;
        color: #888;
    }

    .activity-time {
        cursor: help;
    }

    /* Activity Actions Menu */
    .activity-actions-menu {
        display: flex;
        gap: 0.25rem;
        opacity: 0;
        transition: opacity 0.2s;
    }

    .activity-item:hover .activity-actions-menu {
        opacity: 1;
    }

    .activity-mark-read,
    .activity-remove {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 1rem;
        color: #666;
    }

    .activity-mark-read:hover {
        background: #4CAF50;
        color: white;
        border-color: #4CAF50;
    }

    .activity-remove:hover {
        background: #f44336;
        color: white;
        border-color: #f44336;
    }

    /* Footer */
    .activity-footer {
        padding: 1rem 1.5rem;
        border-top: 1px solid #e0e0e0;
        background: #f9f9f9;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        align-items: center;
    }

    .load-more-btn {
        padding: 0.75rem 2rem;
        background: #2196F3;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: 500;
        transition: background 0.2s;
    }

    .load-more-btn:hover {
        background: #1976D2;
    }

    .activity-count-info {
        font-size: 0.875rem;
        color: #666;
        text-align: center;
    }

    /* Scrollbar Styling */
    .activity-list::-webkit-scrollbar {
        width: 8px;
    }

    .activity-list::-webkit-scrollbar-track {
        background: #f0f0f0;
    }

    .activity-list::-webkit-scrollbar-thumb {
        background: #bdbdbd;
        border-radius: 4px;
    }

    .activity-list::-webkit-scrollbar-thumb:hover {
        background: #9e9e9e;
    }
</style>
