<div class="channel-row">
    <div style="display: flex; align-items: center; gap: 12px;">
        <a href="{{ $video->user ? route('channel', $video->user->channel) : '#' }}" class="channel-info text-decoration-none"
            style="color: inherit; display: flex; align-items: center; gap: 12px;">
            @if ($video->user)
                <img src="{{ $video->user->avatar_url }}" class="channel-avatar" alt="{{ $video->user->name }}">
            @else
                <div class="channel-avatar"></div>
            @endif
            <div>
                <div class="channel-name">{{ $video->user->name ?? 'Unknown' }}</div>
                <div class="channel-subs"
                    data-channel-id="{{ $video->user_id }}"
                    data-count="{{ $video->user->subscriber_count ?? 0 }}">{{ number_format($video->user->subscriber_count ?? 0) }} subscribers</div>
            </div>
        </a>
    </div>
    <x-video-actions :video="$video" />
</div>

<style>
    /* Channel Row */
    .channel-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 0;
        overflow: visible;
    }

    .channel-info {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .channel-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #555;
    }

    .channel-name {
        font-size: 16px;
        font-weight: 600;
    }

    .channel-subs {
        font-size: 12px;
        color: var(--text-secondary);
    }

    /* Responsive */
    @media (max-width: 576px) {
        .channel-row {
            flex-direction: row;
            align-items: center;
            flex-wrap: nowrap;
            gap: 8px;
        }

        .channel-row > div:first-child {
            flex: 1;
            min-width: 0;
        }

        .channel-info {
            min-width: 0;
        }

        .channel-name {
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .channel-subs {
            white-space: nowrap;
        }
    }
</style>

@props(['video'])
