<div class="ma_page_content">
	<div class="ma_pc_inner">
		<div class="user_profile">
			<!-- User Profile -->
				<div class="user_header">
					<div class="user_cover">
						<?php if ($music->userData->owner == true) {?>
						<div class="edit_cover">
							<form action="" method="POST" id="user-change-cover-form">
								<span class="btn-file d-inline-flex mx-1" id="change-cover-icon">
									<span class="icon">
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z"></path></svg>
									</span>
									<input type="file" name="cover" id="user-cover" accept="image/x-png, image/jpeg">
								</span>
								<?php if ($music->config->channel_trailer == 'on' && ($music->config->channel_trailer_upload == 'all' || ($music->config->channel_trailer_upload == 'artist' && $music->userData->artist != 0))) { ?>
								<span class="btn-file d-inline-flex mx-1" id="change-cover-icon">
									<span class="videoicon">
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512"><path fill="currentColor" d="M450.6 153.6c-3.3 0-6.5.9-9.3 2.7l-86.5 54.6c-2.5 1.6-4 4.3-4 7.2v76c0 2.9 1.5 5.6 4 7.2l86.5 54.6c2.8 1.7 6 2.7 9.3 2.7h20.8c4.8 0 8.6-3.8 8.6-8.5v-188c0-4.7-3.9-8.5-8.6-8.5h-20.8zM273.5 384h-190C55.2 384 32 360.8 32 332.6V179.4c0-28.3 23.2-51.4 51.4-51.4h190c28.3 0 51.4 23.2 51.4 51.4v153.1c.1 28.3-23 51.5-51.3 51.5z"></path></svg>
									</span>
									<input type="file" name="video" id="user-video" accept="video/*">
								</span>
							    <?php } ?>
						    </form>
						</div>
						<?php } ?>
						<div class="artist_profile_cover">
							<?php if (!empty($music->userData->cover) && strpos($music->userData->cover, 'upload/videos')) { ?>
								<video autoplay muted loop id="myVideo">
								  <source src="{{USER cover}}" type="video/mp4">
								  Your browser does not support HTML5 video.
								</video>
							<?php }else{ ?>
								<img src="{{USER cover}}" alt="User Cover" id="cover">
							<?php } ?>
						</div>
					</div>
					<div class="user_info_cont">
						<div class="container">
							<div class="mus_usr_prof_hd">
								<div class="user_avatar">
									<?php if ($music->userData->owner == true) {?>
									<div class="edit_avatar">
										<form action="" method="POST" id="user-change-avatar-form">
											<span class="btn-file" id="change-avatar-icon">
												<span class="icon">
													<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z"></path></svg>
												</span>
												<input type="file" name="avatar" id="user-avatar" accept="image/x-png, image/jpeg">
											</span>
										</form>
									</div>
									<?php } ?>
									<img src="{{USER avatar}}" alt="User Avatar" id="avatar">
								</div>
								<div class="personal_info">
									<div class="name">
										<h2><a href="{{USER url}}" data-load="{{USER username}}">{{USER name}}</a></h2>
									</div>
									<div class="links_btns mus_usr_prof_links">
										<div class="opts_btn">
											<?php if ($music->userData->owner == false && IS_LOGGED) {?>
												{{MESSAGE_BUTTON}}
												<?php if (!isFollowing($music->userData->id)) { ?>
													<button class="btn btn-primary" id="follow-user" data-user-id="{{USER id}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M15,14C12.33,14 7,15.33 7,18V20H23V18C23,15.33 17.67,14 15,14M6,10V7H4V10H1V12H4V15H6V12H9V10M15,12A4,4 0 0,0 19,8A4,4 0 0,0 15,4A4,4 0 0,0 11,8A4,4 0 0,0 15,12Z" /></svg> {{LANG Follow}}</button>
												<?php } else { ?>
													<button class="btn btn-success" id="unfollow-user" data-user-id="{{USER id}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M21.1,12.5L22.5,13.91L15.97,20.5L12.5,17L13.9,15.59L15.97,17.67L21.1,12.5M10,17L13,20H3V18C3,15.79 6.58,14 11,14L12.89,14.11L10,17M11,4A4,4 0 0,1 15,8A4,4 0 0,1 11,12A4,4 0 0,1 7,8A4,4 0 0,1 11,4Z" /></svg> {{LANG Following}}</button>
												<?php } ?>
											<?php } ?>
											<?php if ($music->userData->owner == true || isAdmin()) {?>
												<button class="btn btn_edt_prof" onclick="goToAjaxLink('settings/{{USER username}}/general');"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M21.7,13.35L20.7,14.35L18.65,12.3L19.65,11.3C19.86,11.09 20.21,11.09 20.42,11.3L21.7,12.58C21.91,12.79 21.91,13.14 21.7,13.35M12,18.94L18.06,12.88L20.11,14.93L14.06,21H12V18.94M12,14C7.58,14 4,15.79 4,18V20H10V18.11L14,14.11C13.34,14.03 12.67,14 12,14M12,4A4,4 0 0,0 8,8A4,4 0 0,0 12,12A4,4 0 0,0 16,8A4,4 0 0,0 12,4Z" /></svg> {{LANG Edit Profile}}</button>

												<?php if ($music->userData->is_pro == 1 && $music->userData->owner == true) { ?>
													<button class="btn btn_edt_prof" onclick="goToAjaxLink('{{USER username}}/spotlight');"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"></path></svg> {{LANG Edit Spotlight}}</button>
												<?php } ?>

											<?php } ?>
											<?php
											$isBlocked = isBlocked($music->userData->id);
											if ($music->userData->owner == false && $music->userData->admin == 0 && IS_LOGGED == true && !$isBlocked) {?>
												<a class="btn btn_blc_unblck" onclick="blockUser('{{USER id}}', '{{USER username}}', 'block')" title="{{LANG Block}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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,4A8,8 0 0,0 4,12C4,13.85 4.63,15.55 5.68,16.91L16.91,5.68C15.55,4.63 13.85,4 12,4M12,20A8,8 0 0,0 20,12C20,10.15 19.37,8.45 18.32,7.09L7.09,18.32C8.45,19.37 10.15,20 12,20Z" /></svg></a>
											<?php } ?>
											<?php if ($isBlocked) {?>
												<a class="btn btn_blc_unblck" onclick="blockUser('{{USER id}}', '{{USER username}}', 'unblock')" title="{{LANG Unblock}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M15,14C12.33,14 7,15.33 7,18V20H23V18C23,15.33 17.67,14 15,14M1,10V12H9V10M15,12A4,4 0 0,0 19,8A4,4 0 0,0 15,4A4,4 0 0,0 11,8A4,4 0 0,0 15,12Z" /></svg></a>
											<?php } ?>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="ma_tabs store_tabs mus_user_tabs">
					<ul class="list-unstyled mb-0">
						<li class="<?php echo (empty($music->third_url)) ? 'active' : ''?>">
							<a href="{{USER url}}" data-load="{{USER username}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M3,7H9V13H3V7M3,3H21V5H3V3M21,11V13H11V11H21M3,15H17V17H3V15M3,19H21V21H3V19Z" /></svg> {{LANG Activities}}</a>
						</li>
						<li class="<?php echo ($music->third_url == 'songs') ? 'active' : ''?>">
							<a href="{{USER url}}/songs" data-load="{{USER username}}/songs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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" /></svg> {{LANG Songs}}</a>
						</li>
						<li class="<?php echo ($music->third_url == 'albums') ? 'active' : ''?>">
							<a href="{{USER url}}/albums" data-load="{{USER username}}/albums"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M4,6H2V20A2,2 0 0,0 4,22H18V20H4M18,7H15V12.5A2.5,2.5 0 0,1 12.5,15A2.5,2.5 0 0,1 10,12.5A2.5,2.5 0 0,1 12.5,10C13.07,10 13.58,10.19 14,10.5V5H18M20,2H8A2,2 0 0,0 6,4V16A2,2 0 0,0 8,18H20A2,2 0 0,0 22,16V4A2,2 0 0,0 20,2Z" /></svg> {{LANG Albums}}</a>
						</li>
						<li class="<?php echo ($music->third_url == 'playlists') ? 'active' : ''?>">
							<a href="{{USER url}}/playlists" data-load="{{USER username}}/playlists"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M19,9H2V11H19V9M19,5H2V7H19V5M2,15H15V13H2V15M17,13V19L22,16L17,13Z" /></svg> {{LANG Playlists}}</a>
						</li>
						<li class="<?php echo ($music->third_url == 'liked') ? 'active' : ''?>">
							<a href="{{USER url}}/liked" data-load="{{USER username}}/liked"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M13.35 20.13c-.76.69-1.93.69-2.69-.01l-.11-.1C5.3 15.27 1.87 12.16 2 8.28c.06-1.7.93-3.33 2.34-4.29 2.64-1.8 5.9-.96 7.66 1.1 1.76-2.06 5.02-2.91 7.66-1.1 1.41.96 2.28 2.59 2.34 4.29.14 3.88-3.3 6.99-8.55 11.76l-.1.09z" /></svg> {{LANG Liked}}</a>
						</li>
						<?php if($music->config->radio_station_import == 'on'){?>
						<li class="<?php echo ($music->third_url == 'stations' || $music->third_url == 'add_station') ? 'active' : ''?>">
							<a href="{{USER url}}/stations" data-load="{{USER username}}/stations"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12,10A2,2 0 0,1 14,12C14,12.5 13.82,12.94 13.53,13.29L16.7,22H14.57L12,14.93L9.43,22H7.3L10.47,13.29C10.18,12.94 10,12.5 10,12A2,2 0 0,1 12,10M12,8A4,4 0 0,0 8,12C8,12.5 8.1,13 8.28,13.46L7.4,15.86C6.53,14.81 6,13.47 6,12A6,6 0 0,1 12,6A6,6 0 0,1 18,12C18,13.47 17.47,14.81 16.6,15.86L15.72,13.46C15.9,13 16,12.5 16,12A4,4 0 0,0 12,8M12,4A8,8 0 0,0 4,12C4,14.36 5,16.5 6.64,17.94L5.92,19.94C3.54,18.11 2,15.23 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12C22,15.23 20.46,18.11 18.08,19.94L17.36,17.94C19,16.5 20,14.36 20,12A8,8 0 0,0 12,4Z"></path></svg> {{LANG Stations}}</a>
						</li>
						<?php } ?>
					</ul>
				</div>

				<div class="container">
					<div class="row">
						<div class="col-md-8">
							<div class="feed_post_block">
								{{PROFILE_CONTENT}}
							</div>
						</div>
						<!-- SIDEBAR -->
						<div class="col-md-4">
							<?php echo loadPage("user/sidebar"); ?>
							<?php echo loadPage("user/sidebar_artists") ?>
			                <?php echo loadPage("user/sidebar_weekly") ?>
						</div>
					</div>
				</div>
			<!-- End User Profile -->
		</div>
	</div>
	<input type="hidden" id="user-id" name="user-id" value="{{USER id}}">
</div>

<script>
var loading_icon = '<svg width="24px"  height="24px"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-dual-ring" style="background: none;"><circle cx="50" cy="50" ng-attr-r="{{config.radius}}" ng-attr-stroke-width="{{config.width}}" ng-attr-stroke="{{config.stroke}}" ng-attr-stroke-dasharray="{{config.dasharray}}" fill="none" stroke-linecap="round" r="40" stroke-width="8" stroke="#28292f" stroke-dasharray="62.83185307179586 62.83185307179586" transform="rotate(308.458 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="0.7s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg>';
var camera_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z"></path></svg>';
var video_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512"><path fill="currentColor" d="M450.6 153.6c-3.3 0-6.5.9-9.3 2.7l-86.5 54.6c-2.5 1.6-4 4.3-4 7.2v76c0 2.9 1.5 5.6 4 7.2l86.5 54.6c2.8 1.7 6 2.7 9.3 2.7h20.8c4.8 0 8.6-3.8 8.6-8.5v-188c0-4.7-3.9-8.5-8.6-8.5h-20.8zM273.5 384h-190C55.2 384 32 360.8 32 332.6V179.4c0-28.3 23.2-51.4 51.4-51.4h190c28.3 0 51.4 23.2 51.4 51.4v153.1c.1 28.3-23 51.5-51.3 51.5z"></path></svg>';

$(document).ready(function() {
    $('#user-change-avatar-form').ajaxForm({
    	url: "{{CONFIG ajax_url}}/user/update-profile-picture?hash_id=" + getHashID(),
        beforeSubmit:  function () {
        	$('#change-avatar-icon .icon').html(loading_icon);
        },
        success: function (data) {
        	if (data.status == 200) {
        		$('#avatar').attr('src', data.img);
        	}
        	$('#change-avatar-icon .icon').html(camera_icon);
        }
    });

    $('#user-change-cover-form').ajaxForm({
    	url: "{{CONFIG ajax_url}}/user/update-profile-cover?hash_id=" + getHashID(),
        beforeSubmit:  function (arr, form, options) {
        	if (arr[0].value != '') {
        		$('#change-cover-icon .icon').html(loading_icon);
        	}
        	else{
        		$('#change-cover-icon .videoicon').html(loading_icon);
        	}
        },
        success: function (data) {
        	if (data.status == 200) {
        		if (data.img) {
        			$('.artist_profile_cover').html('<img src="'+data.img+'" alt="User Cover" id="cover">');
        		}
        		else{
        			$('.artist_profile_cover').html('<video autoplay muted loop id="myVideo"><source src="'+data.video+'" type="video/mp4">Your browser does not support HTML5 video.</video>');
        		}
        	}
        	else{
        		$('#ShowAlert').find('.ShowAlertText').html('<div class="alert alert-danger">'+data.message+'</div>');
        		$('#ShowAlert').modal('show');
        	}
        	$('#change-cover-icon .icon').html(camera_icon);
        	$('#change-cover-icon .videoicon').html(video_icon);
        }
    });
});

$(document).on('change', '#user-avatar', function(event) {
	$("#user-change-avatar-form").submit();
});
$(document).on('change', '#user-cover', function(event) {
	$("#user-change-cover-form").submit();
});
$(document).on('change', '#user-video', function(event) {
	$("#user-change-cover-form").submit();
});
$(document).on('click', '.artist_profile_cover', function(event) {
	var video = document.getElementById("myVideo");
	if (video.paused) {
	    video.play();
	    btn.innerHTML = "Pause";
	  } else {
	    video.pause();
	    btn.innerHTML = "Play";
	  }
});

</script>