{% extends "@UVDeskCoreFramework//Templates//layout.html.twig" %}

{% block title %}Dashboard{% endblock %}

{% block templateCSS %}
    <style>
		.uv-activity-wrapper {
			margin-top: 60px;
		}
		.uv-activity-wrapper .uv-activity-chart-col-lt {
			width: 80%;
			float: left;
		}
		ul.uv-activity-brick-wrapper {
			list-style: none;
			margin: 0;
			padding: 0;
			width: 100%;
    		display: inline-block;
		}
		ul.uv-activity-brick-wrapper li {
			width: 25%;
			display: inline-block;
			float: left;
			padding-left: 10px;
			padding-right: 10px;
			color: #fff;
		}
		ul.uv-activity-brick-wrapper .uv-activity-brick {
			border-radius: 3px;
    		padding: 10px;
			text-align: center;
		}
		ul.uv-activity-brick-wrapper li a {
			color: #fff;
			font-size: 45px;
			width: 100%;
    		display: inline-block;
		}
		ul.uv-activity-brick-wrapper li label {
			font-size: 18px;
			width: 100%;
    		display: inline-block;
		}
		.uv-activity-chart-bottom-row .uv-pannel-body {
			height: 450px;
		}
		.kudos-overview {
			width: 40%;
			float: left;
			padding-right: 10px;
		}
		.recent-notification {
			width: 30%;
			float: left;
			padding-left: 10px;
		}
		.completion-chart {
			width: 300px;
			margin: 0 auto;
		}
		.progress-meter .background {
			fill: #EFEFEF;
		}
		.progress-meter text {
			font-size: 30px;
		}
		.kudos-overview .uv-pannel-body {
			text-align: center;
			padding-top: 50px;
		}
		.kudos-overview .uv-pannel-body label {
			margin-top: 10px;
    		display: inline-block;
		}
		.recent-notification ul {
			list-style: none;
			padding: 0;
			margin: 0;
			overflow-y: auto;
			max-height: 400px !important;
		}
		.recent-notification .uv-pannel-body {
			padding: 0;
		}
		.recent-notification ul li {
			color: #333333;
			border-bottom: solid 1px #D3D3D3;
			padding: 15px 20px;
		}
		.recent-notification ul li:first-child {
			border-top: none;
		}
		.recent-notification ul li:last-child {
			border-bottom: none;
		}
		.recent-notification ul li * {
			display: inline-block !important;
		}
		.recent-notification ul li .timeago {
			color: #9E9E9E;
			margin-top: 5px;
			font-size: 13px;
		}
		.recent-notification label {
			text-align: center;
			display: inline-block;
			width: 100%;
			padding-top: 15px;
			border-top: 1px solid #d3d3d3;
		}
		.recent-notification span.uv-notification-message {
			float: left;
			width: 100%;
		}
		.kudos-count {
			width: 30%;
			float: left;
			padding-right: 10px;
			padding-left: 10px;
		}
		.kudos-count .uv-pannel-body {
			padding-top: 50px;
			overflow-y: auto;
		}
		.kudos-count ul {
			list-style: none;
			padding: 0;
			margin: 0;
		}
		.kudos-count ul li {
			width: 100%;
			display: inline-block;
			padding: 15px 0;
		}
		.kudos-count ul li .uv-icon-kudos  {
			vertical-align: middle;
			margin-right: 10px;
		}
		.uv-activity-wrapper .uv-activity-chart-col-rt {
			width: 20%;
			float: left;
		}
		.uv-activity-chart-col-rt ul {
			padding: 0;
			margin: 0;
			list-style: none;
		}
		.uv-activity-chart-col-rt ul li {
			margin-bottom: 10px
		}
		.uv-activity-chart-col-rt ul li span {
			width: 100%;
			display: inline-block;
			color: #6f6f6f;
		}
		.uv-middle {
			margin: 0 auto;
			display: inline-block;
			margin-top: 200px;
			text-align: center;
			width: 100%;
		}
		@media screen and (max-width: 1024px) {
			.uv-activity-wrapper .uv-activity-chart-col-lt {
				width: 100%;
				padding: 0;
			}
			.uv-activity-wrapper .uv-activity-chart-col-rt {
				width: 100%;
			}
			.kudos-overview {
				width: 100%;
				padding: 0;
			}
			.kudos-count {
				width: 100%;
				padding: 0;
			}
			.recent-notification {
				width: 100%;
				padding: 0;
			}
			ul.uv-activity-brick-wrapper li {
				width: 50%;
				margin: 10px 0;
			}
		}
		@media screen and (max-width: 768px) {
			ul.uv-activity-brick-wrapper li {
				width: 100%;
			}
		}
		@media screen and (max-width: 467px) {
			.completion-chart {
				width: 100%;
			}
		}
		span.uv-notification-message a:link, span.uv-notification-message a:visited, label a:link, label a:visited {
			color: #2750C4;
			font-size: 15px;
		}
		.uv-mob-aside {
			display: none;
		}
		#helpdeskClearCachePta {
			position: fixed;
			right: 25px;
			bottom: 25px;
			font-size: 13px;
			font-weight: bold;
			background-color: #cd1f1f;
			padding: 4px 7px;
		}
	</style>
{% endblock %}

{% block pageContent %}
    <div class="uv-area">
        {{ uvdesk_extensibles.getRegisteredComponent('Webkul\\UVDesk\\CoreFrameworkBundle\\Dashboard\\Dashboard').getHomepageTemplate().render()|raw }}

		{# @TODO: Version number should be loaded dynamically #}
        <div class="uv-copyright">
            <span class="uv-credit-text">{{ 'Powered by'|trans }} <a href="https://www.dranzo.com/index.html" target="_blank">Dranzo</a> v1.2.0</span>
        </div>

		<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    		<button type="submit" class="btn btn-primary btn-md" id="helpdeskClearCachePta" title={{'Clear Cache'|trans }}>Clear Cache</button>
  		</div>
    </div>
	
	<script>
		$('#helpdeskClearCachePta').click(function(e) {
			$.ajax({
				url : "{{ path('helpdesk_member_cache_clear') }}",
				method: 'POST',
				data: "",
				success : function(response) {
					app.appView.renderResponseAlert(response);
				},
				error: function (xhr) {
					app.appView.renderResponseAlert(xhr);
				}
			});
		});
	</script>
{% endblock %}

{% block footer %}
    {{ parent() }}
{% endblock %}