<div class="ma_page_content">
	<div class="ma_pc_inner">
		<div class="container">
			<div class="ma_dashboard">
				<div class="row dashboard_small_stats">
					<div class="col-md-4">
						<div class="small_stat songs">
							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M21,3V15.5A3.5,3.5 0 0,1 17.5,19A3.5,3.5 0 0,1 14,15.5A3.5,3.5 0 0,1 17.5,12C18.04,12 18.55,12.12 19,12.34V6.47L9,8.6V17.5A3.5,3.5 0 0,1 5.5,21A3.5,3.5 0 0,1 2,17.5A3.5,3.5 0 0,1 5.5,14C6.04,14 6.55,14.12 7,14.34V6L21,3Z"></path></svg>
							<h2>{{LANG Total Songs}}</h2>
							<p>{{TOTAL_SONGS}}</p>
						</div>
					</div>
					<div class="col-md-4">
						<div class="small_stat plays">
							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M10,16.5V7.5L16,12M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>
							<h2>{{LANG Total Plays}}</h2>
							<p>{{TOTAL_PLAYS}}</p>
						</div>
					</div>
					<div class="col-md-4">
						<div class="small_stat downs">
							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,17L17,12H14V8H10V12H7L12,17Z"></path></svg>
							<h2>{{LANG Total Downloads}}</h2>
							<p>{{TOTAL_DOWNLOADS}}</p>
						</div>
					</div>
				</div>
				
				<div class="content">
					<canvas id="today_chart" height="100"></canvas>
				</div>
				
				<div class="row">
					<div class="col-md-6">
						<div class="content">
							<div class="dash_stat_title"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="#6aa1e2" d="M10,16.5V7.5L16,12M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg> {{LANG Most played songs}}</div>
							<ul class="list-unstyled mb-0 short_track_stats">
								{{MOST_PLAYED_SONGS}}
							</ul>
						</div>
					</div>
					<div class="col-md-6">
						<div class="content">
							<div class="dash_stat_title"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="#ff9800" d="M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9Z"></path></svg> {{LANG Most commented songs}}</div>
							<ul class="list-unstyled mb-0 short_track_stats">
								{{MOST_COMMENTED_SONG}}
							</ul>
						</div>
					</div>
					<div class="col-md-6">
						<div class="content">
							<div class="dash_stat_title"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="#f44336" d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"></path></svg> {{LANG Most liked songs}}</div>
							<ul class="list-unstyled mb-0 short_track_stats">
								{{MOST_LIKED_SONGS}}
							</ul>
						</div>
					</div>
					<div class="col-md-6">
						<div class="content">
							<div class="dash_stat_title"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="#c491f8" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,17L17,12H14V8H10V12H7L12,17Z"></path></svg> {{LANG Most downloaded songs}}</div>
							<ul class="list-unstyled mb-0 short_track_stats">
								{{MOST_DOWNLOADED_SONGS}}
							</ul>
						</div>
					</div>
					<?php if($music->config->artist_sell == 'on'){?>
					<div class="col-md-12">
						<hr>
						<div class="row dashboard_small_stats">
							<div class="col-md-4">
								<div class="small_stat sales">
									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M5,6H23V18H5V6M14,9A3,3 0 0,1 17,12A3,3 0 0,1 14,15A3,3 0 0,1 11,12A3,3 0 0,1 14,9M9,8A2,2 0 0,1 7,10V14A2,2 0 0,1 9,16H19A2,2 0 0,1 21,14V10A2,2 0 0,1 19,8H9M1,10H3V20H19V22H1V10Z"></path></svg>
									<h2>{{LANG Total Sales}}</h2>
									<p>{{CONFIG currency_symbol}}{{TOTAL_SALES}}</p>
								</div>
							</div>
							<div class="col-md-4">
								<div class="small_stat mnthsale">
									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M9,10V12H7V10H9M13,10V12H11V10H13M17,10V12H15V10H17M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H6V1H8V3H16V1H18V3H19M19,19V8H5V19H19M9,14V16H7V14H9M13,14V16H11V14H13M17,14V16H15V14H17Z"></path></svg>
									<h2>{{LANG Total Sales This Month}}</h2>
									<p>{{CONFIG currency_symbol}}{{TOTAL_SALES_THIS_WEEK}}</p>
								</div>
							</div>
							<div class="col-md-4">
								<div class="small_stat todsale">
									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M7,10H12V15H7M19,19H5V8H19M19,3H18V1H16V3H8V1H6V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3Z"></path></svg>
									<h2>{{LANG Total Sales Today}}</h2>
									<p>{{CONFIG currency_symbol}}{{TOTAL_SALES_TODAY}}</p>
								</div>
							</div>
						</div>
						<div class="content">
							<div class="dash_stat_title">{{LANG Recent sales}}</div>
							<ul class="list-unstyled mb-0 short_track_stats">
								{{RECENT_SALES}}
							</ul>
						</div>
					</div>
					<?php } ?>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script>
// Today Live Line Chart
var ctx = document.getElementById('today_chart').getContext('2d');
Chart.defaults.global.defaultFontColor = '#fff';
var today_chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',

// The data for our dataset
data: {
	labels: {{THIS_MONTH}},
	datasets: [{
		label: "{{LANG Plays}}",
		borderColor: '#536fd7',
		backgroundColor: '#536fd7',
		fill: false,
		data: {{PLAYS_THIS_MONTH}},
		pointRadius: 5,
		pointHoverRadius: 5,
	},{
		label: "{{LANG Likes}}",
		borderColor: '#4caf50',
		backgroundColor: '#4caf50',
		fill: false,
		data: {{LIKES_THIS_MONTH}},
		pointRadius: 5,
		pointHoverRadius: 5,
	},{
		label: "{{LANG Downloads}}",
		borderColor: '#ff6873',
		backgroundColor: '#ff6873',
		fill: false,
		data: {{DOWNLOADS_THIS_MONTH}},
		pointRadius: 5,
		pointHoverRadius: 5,
	},
<?php if($music->config->artist_sell == 'on'){?>
	{
		label: "{{LANG Sales}}",
		borderColor: '#dc1d53',
		backgroundColor: '#dc1d53',
		fill: false,
		data: {{SALES_THIS_MONTH}},
		pointRadius: 5,
		pointHoverRadius: 5,
	}
<?php } ?>
	]
},

// Configuration options go here
options: {
	responsive: true,
	tooltips: {
		mode: 'index',
		intersect: false,
	},
	hover: {
		mode: 'nearest',
		intersect: true
	},
	legend: {
		position: 'bottom',
		labels: {
			// This more specific font property overrides the global property
			fontColor: '#d2d2d2'
		}
	},
	scales: {
		xAxes: [{
			display: true,
			gridLines: {
				display: true,
				color: "#333"
			}
		}],
		yAxes: [{
			display: true,
			gridLines: {
				display: true,
				color: "#333"
			}
		}]
	}
}
});

</script>