<?php
/**
 * Template Name: Profile
 * data-page="profile"
 *
 * @package NeonKickLive
 */

get_header();
?>

	<header class="topbar">
		<h1>PROFILE</h1>
	</header>

	<div id="profile-skeleton" class="profile-shell" aria-hidden="true">
		<section class="profile-hero">
			<div class="skeleton skeleton-logo skeleton-logo--xl"></div>
			<h2><span class="skeleton skeleton-text skeleton-text--med" style="width:180px;display:inline-block;"></span></h2>
			<p><span class="skeleton skeleton-text skeleton-text--short" style="width:230px;display:inline-block;"></span></p>
			<div class="profile-meta" style="gap:10px;">
				<div class="profile-meta__item"><span class="skeleton skeleton-text skeleton-text--tiny" style="width:40px;display:inline-block;"></span><strong class="skeleton skeleton-text skeleton-text--short" style="width:160px;display:inline-block;"></strong></div>
				<div class="profile-meta__item"><span class="skeleton skeleton-text skeleton-text--tiny" style="width:40px;display:inline-block;"></span><strong class="skeleton skeleton-text skeleton-text--short" style="width:100px;display:inline-block;"></strong></div>
			</div>
			<div class="profile-actions" style="justify-content:center;flex-wrap:wrap;gap:10px;">
				<span class="btn btn-secondary skeleton skeleton-pill" style="height:38px;width:118px;display:inline-block;"></span>
				<span class="btn btn-secondary skeleton skeleton-pill" style="height:38px;width:118px;display:inline-block;"></span>
				<span class="btn btn-secondary skeleton skeleton-pill" style="height:38px;width:118px;display:inline-block;"></span>
			</div>
		</section>
		<div class="card profile-theme-card" aria-hidden="true">
			<div class="card-title"><span class="skeleton skeleton-text skeleton-text--tiny" style="width:50px;display:inline-block;"></span></div>
			<div class="profile-theme">
				<p><span class="skeleton skeleton-text skeleton-text--short" style="width:210px;display:inline-block;"></span></p>
				<div class="profile-theme__choices" style="gap:8px;">
					<span class="btn btn-secondary skeleton skeleton-pill" style="height:38px;width:96px;display:inline-block;"></span>
					<span class="btn btn-secondary skeleton skeleton-pill" style="height:38px;width:96px;display:inline-block;"></span>
				</div>
			</div>
		</div>
		<div class="profile-stats profile-stats--4" aria-hidden="true">
			<div class="stat"><strong class="skeleton skeleton-score skeleton-score--xl"></strong><span class="skeleton skeleton-text skeleton-text--tiny" style="width:82px;display:inline-block;margin-top:8px;"></span></div>
			<div class="stat"><strong class="skeleton skeleton-score skeleton-score--xl"></strong><span class="skeleton skeleton-text skeleton-text--tiny" style="width:82px;display:inline-block;margin-top:8px;"></span></div>
			<div class="stat"><strong class="skeleton skeleton-score skeleton-score--xl"></strong><span class="skeleton skeleton-text skeleton-text--tiny" style="width:82px;display:inline-block;margin-top:8px;"></span></div>
			<div class="stat"><strong class="skeleton skeleton-score skeleton-score--xl"></strong><span class="skeleton skeleton-text skeleton-text--tiny" style="width:82px;display:inline-block;margin-top:8px;"></span></div>
		</div>
		<div class="card" aria-hidden="true">
			<div class="card-title"><span class="skeleton skeleton-text skeleton-text--tiny" style="width:70px;display:inline-block;"></span></div>
			<div class="menu-list">
				<div class="menu-item skeleton-menu"><span class="skeleton skeleton-logo"></span><span class="skeleton skeleton-menu-text"></span><span class="chev skeleton skeleton-chevron"></span></div>
				<div class="menu-item skeleton-menu"><span class="skeleton skeleton-logo"></span><span class="skeleton skeleton-menu-text"></span><span class="chev skeleton skeleton-chevron"></span></div>
				<div class="menu-item skeleton-menu"><span class="skeleton skeleton-logo"></span><span class="skeleton skeleton-menu-text"></span><span class="chev skeleton skeleton-chevron"></span></div>
				<div class="menu-item skeleton-menu"><span class="skeleton skeleton-logo"></span><span class="skeleton skeleton-menu-text"></span><span class="chev skeleton skeleton-chevron"></span></div>
				<div class="menu-item skeleton-menu"><span class="skeleton skeleton-logo"></span><span class="skeleton skeleton-menu-text"></span><span class="chev skeleton skeleton-chevron"></span></div>
				<div class="menu-item skeleton-menu"><span class="skeleton skeleton-logo"></span><span class="skeleton skeleton-menu-text"></span><span class="chev skeleton skeleton-chevron"></span></div>
			</div>
		</div>
	</div>

	<div id="profile-content" hidden>
		<?php echo do_shortcode( '[neon_profile]' ); ?>
	</div>

<?php get_footer(); ?>