<?php
/**
 * @var $icon
 */
?>

<style>

	.chat-sidebar-container .ui.placeholder {
		margin: 10px;
	}

	.chat-sidebar-container .ui.placeholder .image.header:after {
		height: 28px;
	}

	.chat-sidebar-container .ui.placeholder .header:not(:first-child):before, .ui.placeholder .image:not(:first-child):before {
		height: 10px;
	}

	.chat-sidebar-container .ui.placeholder .image.header:nth-child(5n+1) .line:after {
		width: 0;
	}

	.chat-sidebar-container .ui.placeholder .image.header:nth-child(5n+2) .line:after {
		width: 50%;
	}

	.chat-sidebar-container .ui.placeholder .image.header:nth-child(5n+3) .line:after {
		width: 10%;
	}

	.chat-sidebar-container .ui.placeholder .image.header:nth-child(5n+4) .line:after {
		width: 35%;
	}

	.chat-sidebar-container .ui.placeholder .image.header:nth-child(5n+5) .line:after {
		width: 65%;
	}


	.chat-sidebar-container .ui.placeholder,
	.chat-sidebar-container .ui.placeholder .image.header:after,
	.chat-sidebar-container .ui.placeholder .line,
	.chat-sidebar-container .ui.placeholder .line:after,
	.chat-sidebar-container .ui.placeholder > :before {
		background-color: #f7f8f9;
	}

</style>

<div class="chat-sidebar-container js-chat-sidebar">

	<div class="chat-sidebar-anchor">

		<div class="chat-sidebar-anchor-icon">

			<i class="<?php echo $icon; ?> icon"></i>

		</div>

	</div>

	<div class="chat-sidebar-wrapper">

		<div class="chat-sidebar-content">

			<div class="chat-sidebar-users-list">

				<div class="ui placeholder">

					<div class="image header"><div class="line"></div></div>
					<div class="image header"><div class="line"></div></div>
					<div class="image header"><div class="line"></div></div>
					<div class="image header"><div class="line"></div></div>
					<div class="image header"><div class="line"></div></div>
					<div class="image header"><div class="line"></div></div>
					<div class="image header"><div class="line"></div></div>
					<div class="image header"><div class="line"></div></div>
					<div class="image header"><div class="line"></div></div>
					<div class="image header"><div class="line"></div></div>
					<div class="image header"><div class="line"></div></div>
					<div class="image header"><div class="line"></div></div>
					<div class="image header"><div class="line"></div></div>
					<div class="image header"><div class="line"></div></div>
					<div class="image header"><div class="line"></div></div>
					<div class="image header"><div class="line"></div></div>
					<div class="image header"><div class="line"></div></div>
					<div class="image header"><div class="line"></div></div>
					<div class="image header"><div class="line"></div></div>
					<div class="image header"><div class="line"></div></div>

				</div>

			</div>

		</div>

	</div>

</div>
