<div id="user-profile-1" class="user-profile row">

	<div class="col-xs-12 col-sm-3 center">
		<div>
			<!-- #section:pages/profile.picture -->
			<span class="profile-picture">
				<img id="avatar" class="editable img-responsive" alt="Alex's Avatar" src="{{{path.assets}}}/avatars/profile-pic.jpg" />
			</span>
			<!-- /section:pages/profile.picture -->
			
			<div class="space-4"></div>
			
			<div class="width-80 label label-info label-xlg arrowed-in arrowed-in-right">
			  <div class="inline position-relative">
				<a href="#" class="user-title-label dropdown-toggle" data-toggle="dropdown">
					<i class="ace-icon fa fa-circle light-green"></i>
					&nbsp;<span class="white">Alex M. Doe</span>
				</a>
				<ul class="align-left dropdown-menu dropdown-caret dropdown-lighter">
					<li class="dropdown-header">
						Change Status
					</li>
					<li>
						<a href="#">
							<i class="ace-icon fa fa-circle green"></i>&nbsp;
							<span class="green">Available</span>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="ace-icon fa fa-circle red"></i>&nbsp;
							<span class="red">Busy</span>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="ace-icon fa fa-circle grey"></i>&nbsp;
							<span class="grey">Invisible</span>
						</a>
					</li>
				</ul>
			  </div>
			</div>
		</div>
		
		<div class="space-6"></div>
		
		<!-- #section:pages/profile.contact -->
		<div class="profile-contact-info">
			<div class="profile-contact-links align-left">
				<a href="#" class="btn btn-link">
					<i class="ace-icon fa fa-plus-circle bigger-120 green"></i>
					Add as a friend
				</a>

				<a href="#" class="btn btn-link">
					<i class="ace-icon fa fa-envelope bigger-120 pink"></i>
					Send a message
				</a>

				<a href="#" class="btn btn-link">
					<i class="ace-icon fa fa-globe bigger-125 blue"></i>
					www.alexdoe.com
				</a>
			</div>
			
			<div class="space-6"></div>
			
			<div class="profile-social-links align-center">
				<a href="#" class="tooltip-info" title="" data-original-title="Visit my Facebook">
					<i class="middle ace-icon fa fa-facebook-square fa-2x blue"></i>
				</a>
				<a href="#" class="tooltip-info" title="" data-original-title="Visit my Twitter">
					<i class="middle ace-icon fa fa-twitter-square fa-2x light-blue"></i>
				</a>
				<a href="#" class="tooltip-error" title="" data-original-title="Visit my Pinterest">
					<i class="middle ace-icon fa fa-pinterest-square fa-2x red"></i>
				</a>
			</div>
		</div>
		<!-- /section:pages/profile.contact -->
		
		<div class="hr hr12 dotted"></div>

		<!-- #section:custom/extra.grid -->
		<div class="clearfix">
			<div class="grid2">
				<span class="bigger-175 blue">25</span>
				<br />
				Followers
			</div>
			
			<div class="grid2">
				<span class="bigger-175 blue">12</span>
				<br />
				Following
			</div>
		</div>
		<!-- /section:custom/extra.grid -->
		<div class="hr hr16 dotted"></div>
	</div>


	<div class="col-xs-12 col-sm-9">
		<div class="center">
			{{> page.stats}}
		</div>

		<div class="space-12"></div>
		
		<!-- #section:pages/profile.info -->
		<div class="profile-user-info profile-user-info-striped">
			{{#page.info1}}
			<div class="profile-info-row">
				<div class="profile-info-name">
					{{{title}}}
				</div>
				
				<div class="profile-info-value">
					{{#icon}}
						<i class="{{icon}} light-orange bigger-110"></i>
					{{/icon}}
					{{#content}}
					<span class="editable" id="{{id}}">{{value}}</span>
					{{/content}}
				</div>
			</div>
			{{/page.info1}}
		</div>
		<!-- /section:pages/profile.info -->

		<div class="space-20"></div>
		
		<div class="widget-box transparent">
			<div class="widget-header widget-header-small">
				<h4 class="widget-title blue smaller"><i class="ace-icon fa fa-rss orange"></i> Recent Activities</h4>
				<div class="widget-toolbar action-buttons">
					<a href="#" data-action="reload"><i class="ace-icon fa fa-refresh blue"></i></a>&nbsp;
					<a href="#" class="pink"><i class="ace-icon fa fa-trash-o"></i></a>
				</div>
			</div>
			
			<div class="widget-body">
			 <div class="widget-main padding-8">
				<!-- #section:pages/profile.feed -->
				<div id="profile-feed-1" class="profile-feed">
					{{#page.activities.first_five}}
						{{> page.activity}}
					{{/page.activities.first_five}}
					{{#page.activities.second_five}}
						{{> page.activity}}
					{{/page.activities.second_five}}
				</div>
				<!-- /section:pages/profile.feed -->
			 </div>
			</div>
		</div>

		<div class="hr hr2 hr-double"></div>
		<div class="space-6"></div>
		<div class="center">
			<button type="button" class="btn btn-sm btn-primary btn-white btn-round">
				<i class="ace-icon fa fa-rss bigger-150 middle orange2"></i>
				<span class="bigger-110">View more activities</span>
				<i class="icon-on-right ace-icon fa fa-arrow-right"></i>
			</button>
		</div>
	</div>

</div>