<mat-list>
	<mat-list-item>
		<!-- Main participant container with improved structure -->
		<div class="participant-container" [attr.data-participant-id]="_participant?.sid" [attr.data-participant-name]="participantDisplayName">
			<!-- Avatar section with dynamic color -->
			<div
				class="participant-avatar"
				[style.background-color]="_participant?.colorProfile"
				[attr.aria-label]="'Avatar for ' + participantDisplayName"
			>
				<mat-icon>{{ _participant.hasEncryptionError ? 'lock_person' : 'person' }}</mat-icon>
			</div>

			<!-- Content section with name and status -->
			<div class="participant-content">
				<!-- Name row with better space management -->
				<div class="participant-name-row">
					<div class="participant-name">
						<span class="participant-name-text">{{ participantDisplayName }}</span>
						<span *ngIf="isLocalParticipant" class="local-indicator">
							{{ 'PANEL.PARTICIPANTS.YOU' | translate }}
						</span>
					</div>

					<!-- Participant badges in separate container -->
					<div class="participant-badges">
						<ng-container *ngTemplateOutlet="participantBadgeTemplate"></ng-container>
					</div>
				</div>

				@if (!_participant.hasEncryptionError) {
					<div class="participant-subtitle">
						<span class="status-indicator">
							{{ _participant | tracksPublishedTypes }}
						</span>
					</div>
				}
			</div>

			<!-- Action buttons section -->
			@if (!_participant.hasEncryptionError) {
				<div class="participant-action-buttons">
					<!-- Mute/Unmute button for remote participants -->
					<button
						mat-icon-button
						id="mute-btn"
						*ngIf="!isLocalParticipant && showMuteButton"
						[class.warn-btn]="_participant?.isMutedForcibly"
						(click)="toggleMuteForcibly()"
						[disabled]="!_participant"
						[disableRipple]="true"
						[attr.aria-label]="
							_participant?.isMutedForcibly
								? ('PANEL.PARTICIPANTS.UNMUTE' | translate) + ' ' + participantDisplayName
								: ('PANEL.PARTICIPANTS.MUTE' | translate) + ' ' + participantDisplayName
						"
						[matTooltip]="
							_participant?.isMutedForcibly
								? ('PANEL.PARTICIPANTS.UNMUTE' | translate)
								: ('PANEL.PARTICIPANTS.MUTE' | translate)
						"
					>
						<mat-icon *ngIf="!_participant?.isMutedForcibly">volume_up</mat-icon>
						<mat-icon *ngIf="_participant?.isMutedForcibly">volume_off</mat-icon>
					</button>

					<!-- External item elements with improved structure -->
					<div class="external-elements" *ngIf="hasExternalElements">
						<ng-container *ngTemplateOutlet="participantPanelItemElementsTemplate"></ng-container>
					</div>
				</div>
			}
		</div>
	</mat-list-item>
</mat-list>
