<template>
   <div class="browser-statics-wrapper">
		<div class="grayish-blue d-custom-flex justify-space-between pa-5">
			<div class="white--text">
				<h1 class="mb-0">23,488</h1>
				<p class="mb-0 fs-14">Active Users</p>
			</div>
			<div class="pr-4">
				<i class="zmdi font-3x success--text zmdi-accounts"></i>
			</div>
		</div>
		<v-list>
			<v-list-item>
				<div>
					<img src="/static/img/firefox_icon.png" class="mr-3" alt="firefox_icon" height="20" width="20">
					<h6>Firefox</h6>
				</div>
				<div class="justify-space-between">
					<span class="fw-light">8,250</span>
					<h6 class="primary--text">+85%</h6>
				</div>
			</v-list-item>
			<v-list-item>
				<div>
					<img src="/static/img/safari_icon.png" class="mr-3" alt="safari_icon" height="20" width="20">
					<h6>Safari</h6>
				</div>
				<div class="justify-space-between">
					<span class="fw-light">1,255</span>
					<h6 class="primary--text">-53%</h6>
				</div>
			</v-list-item>
			<v-list-item>
				<div>
					<img src="/static/img/chrome_icon.png" class="mr-3" alt="chrome_icon" height="20" width="20">
					<h6>Chrome</h6>
				</div>
				<div class="justify-space-between">
					<span class="fw-light">3,050</span>
					<h6 class="primary--text">-20%</h6>
				</div>
			</v-list-item>
			<v-list-item>
				<div>
					<img src="/static/img/opera_icon.png" class="mr-3" alt="opera_icon" height="20" width="20">
					<h6>Opera</h6>
				</div>
				<div class="justify-space-between">
					<span class="fw-light">3,650</span>
					<h6 class="primary--text">+34%</h6>
				</div>
			</v-list-item>
		</v-list>
	</div>
</template>
