<div class="por-operador-container">
	<div *ngIf="isLoading" class="loading-container">
		<mat-spinner diameter="40"></mat-spinner>
		<span class="loading-text">Cargando servicios...</span>
	</div>

	<div *ngIf="!isLoading && operadoresAgrupados.length === 0" class="no-data">
		<mat-icon>event_busy</mat-icon>
		<span>No hay servicios programados para esta fecha</span>
	</div>

	<div *ngIf="!isLoading && operadoresAgrupados.length > 0" class="resumen">
		<span class="resumen-text">
			<strong>{{ getTotalServicios() }}</strong> servicios programados |
			<strong>{{ operadoresAgrupados.length }}</strong> operadores
		</span>
	</div>

	<mat-accordion *ngIf="!isLoading" multi="true">
		<mat-expansion-panel *ngFor="let operador of operadoresAgrupados" [expanded]="operador.expanded">
			<mat-expansion-panel-header>
				<mat-panel-title>
					<mat-icon class="operador-icon">person</mat-icon>
					<span class="operador-nombre">{{ operador.nombre }}</span>
				</mat-panel-title>
				<mat-panel-description>
					<span class="servicios-count">{{ operador.servicios.length }} servicio(s)</span>
				</mat-panel-description>
			</mat-expansion-panel-header>

			<div class="servicios-list">
				<div *ngFor="let servicio of operador.servicios" class="servicio-item">
					<div class="servicio-hora">
						<mat-icon>schedule</mat-icon>
						<span>{{ servicio.hora_servicio }}</span>
					</div>
					<div class="servicio-duracion">
						<mat-icon>timelapse</mat-icon>
						<span>{{ servicio.duracion_servicio }}</span>
					</div>
					<div class="servicio-cliente">
						<mat-icon>business</mat-icon>
						<span>{{ servicio.denominacion_cliente }}</span>
					</div>
					<div class="servicio-estatus">
						<span class="estatus-badge" [style.background-color]="servicio.color_estatus">
							{{ servicio.nombre_estatus }}
						</span>
					</div>
				</div>
			</div>
		</mat-expansion-panel>
	</mat-accordion>
</div>
