<div class="usin-profile">

	<div class="usin-profile-buttons">
		<a class="usin-btn usin-profile-back-btn" href="#/"><span class="usin-icon-arrow-left"></span> {{strings.back}}</a>

		<div class="usin-profile-actions" ng-if="user.actions.length">
			<a ng-repeat="action in user.actions" href="{{action.link}}" target="_blank" class="usin-btn">
				<span class="usin-icon-{{action.id}}"></span>
				<md-tooltip md-direction="top" ng-if="action.name">{{action.name}}</md-tooltip>
			</a>
		</div>

		<div class="usin-profile-settings-menu">
			<span class="usin-error" ng-if="settings.error">{{settings.error}}</span>
			<button ng-class="['usin-btn', 'usin-btn-edit-profile-settings', {'usin-btn-main': settings.editing}]" ng-click="toggleEditSettings()">
				<span ng-class="[{'usin-icon-settings':!settings.editing, 'usin-icon-apply': settings.editing}]"></span>
				<span ng-show="settings.editing">{{strings.saveChanges}}</span>
				<md-tooltip md-direction="top" ng-if="!settings.editing">{{strings.profileSettings}}</md-tooltip>
			</button>
			<div class="usin-circular-loading" ng-class="{'usin-in-loading': settings.loading}"></div>
		</div>
	</div>

	<div ng-show="loading" class="usin-in-loading">
		<div class="usin-loading"> <span class="usin-loading-dot"></span><span class="usin-loading-dot usna-dot2"></span></div>
	</div>

	<div class="usin-error" ng-show="error.msg">
		{{strings.error}}: {{error.msg}}
		<div class="usin-error-data" ng-if="error.info">
			<button class="usin-btn-small" ng-click="error.infoVisible = !error.infoVisible">
				{{ error.infoVisible ? strings.hideDebugInfo : strings.showDebugInfo }}
			</button>
			<pre class="usin-debug-info" ng-show="error.infoVisible" ng-bind-html="error.info"></pre>
		</div>
	</div>

<div ng-show="user && !loading" ng-class="['usin-user-profile-container', {'usin-profile-settings-editing': settings.editing}]" >
	<div ng-class="['usin-user-profile-wrap', 'usin-one-third', 'usin-column', {'usin-user-has-map':mapOptions}]">
		<div class="usin-user-profile">
			<div class="usin-profile-map-wrapper" ng-if="mapOptions">
		  		<div usin-map id="usin-profile-map" map-options="mapOptions"></div>
			</div>
		<div class="usin-avatar" ng-bind-html="user.avatar"></div>

		<div class="usin-personal-data">
			<div ng-repeat="field in personalFields" class="usin-profile-field-{{field['id']}}">
				<span class="field-name">{{field.name}}:</span><span class="field-value"> <h3>{{user[field['id']]}}</h3></span>
			</div> 
		</div>
        <div class="clear"></div>
		<div class="usin-general-data">

			<!-- GROUPS -->
			<div usin-profile-groups></div>
			
			<ul dnd-list="generalFields" class="usin-general-fields-list">
			<li ng-repeat="field in generalFields" 
				ng-class="['usin-profile-field', 'usin-profile-field-'+field.id, {'usin-profile-field-empty': !user[field.id]}]"
				dnd-draggable="field" dnd-moved="reorderFields($index)" dnd-disable-if="!settings.editing" ng-hide="field.isMissing">
				<span class="usin-profile-field-wrap">

					<div ng-class="['usin-field-content', {'usin-profile-field-hidden': field.hide}]" ng-hide="field.hide && !settings.editing">
						<!--SEPARATORS: -->
						<div ng-if="field.isSeparator" class="usin-profile-separator">
							<span class="usin-profile-separator-icon usin-field-icon usin-icon-field"></span>
							<span>{{field.text}}</span>
						</div>

						<!-- NON-EDITABLE FIELDS: -->
						<div ng-if="field.isStandardField">
							<span class="field-name">{{field.name}}: </span>
							<span class="field-value">{{user[field.id]}}</span>
						</div>
						<!-- EDITABLE FIELDS: -->
						<div usin-profile-editable-field ng-if="field.isEditableField"></div>
					</div>

					<div class="usin-profile-settings-actions" ng-if="settings.editing">
						<div ng-if="!field.isSeparator" ng-class="['usin-profile-hide-icon', 'usin-icon-visible', {'usin-icon-visible-off': field.hide}]"
							ng-click="toggleFieldVisibility(field)"></div>

						<div ng-if="field.isSeparator" class="usin-icon-close usin-profile-remove-icon" ng-click="removeSeparator(field)"></div>

						<div dnd-handle class="usin-drag-handle usin-icon-sort" ng-if="settings.editing"></div>
					</div>
		
				</span>
			</li> 
			<li class="dndPlaceholder"><label></label></li>

		</ul>

		<usin-add-separator ng-if="settings.editing" on-add-separator="addSeparator(title)"></usin-add-separator>

		<span ng-show="hiddenFieldsCount && !settings.editing" class="usin-profile-hidden-items-count">
			{{hiddenFieldsCount}} {{strings.hiddenItems}}
			<md-tooltip md-direction="right">{{strings.profileHiddenItemsInstructions}}</md-tooltip>
		</span>

		</div>

	</div>
</div>

<div class="usin-user-data-wrap usin-one-third usin-column">
	<div class="usin-user-data">
		<div class="usin-activity">
			<h3 class="usin-profile-title">{{strings.activity}}</h3>
			<ul ng-if="activityItems.length" dnd-list="activityItems">
				<li ng-repeat="item in activityItems" ng-init="userActivity = getUserActivity(item.id)" ng-class="['usin-activity-item', 'usin-activity-item-'+item.id]" ng-hide="item.isMissing"
					dnd-draggable="item" dnd-moved="reorderActivity($index)" dnd-disable-if="!settings.editing">

					<div ng-class="['usin-activity-content', {'usin-activity-hidden': item.hide}]" ng-hide="item.hide && !settings.editing">
						<div class="usin-activity-title-wrap">
							<h4 class="usin-act-title">
								<span ng-class="['usin-act-icon', 'usin-field-icon', {'usin-icon-{{userActivity.icon}}':userActivity.icon, 'usin-icon-field': !userActivity.icon}]"></span>
								<span ng-if="!userActivity.hide_count && userActivity.count" class="usin-act-title-count">{{userActivity.count}}</span>{{userActivity.label}}
							</h4>

							<div class="usin-profile-settings-actions" ng-if="settings.editing">
								<div ng-class="['usin-profile-hide-icon', 'usin-icon-visible', {'usin-icon-visible-off': item.hide}]"
									ng-click="toggleActivityVisibility(item)"></div>

								<div dnd-handle class="usin-drag-handle usin-icon-sort" ng-if="settings.editing"></div>
							</div>
						</div>

						<ul ng-if="userActivity.list.length" class="usin-activity-list">
							<li ng-repeat="listItem in userActivity.list">
								<span class="usin-icon-list"></span>
								<a class="usin-user-activity-item-title" ng-href="{{listItem.link}}" target="_blank" ng-bind-html="listItem.title" ng-if="listItem.link"></a>
								<span class="usin-user-activity-item-title" ng-bind-html="listItem.title" ng-if="!listItem.link"></span>
								<div ng-if="listItem.details.length" ng-repeat="details in listItem.details" ng-bind-html="details" class="usin-activity-details"></div>
							</li>
						</ul>
						<span ng-if="userActivity.list.length < userActivity.count && userActivity.link" class="usin-icon-more usin-activity-more"></span>
						<a class="usin-act-more" ng-href="{{userActivity.link}}" ng-if="userActivity.link" target="_blank">{{strings.view}}</a>
						<a class="usin-act-more" ng-if="userActivity.dialog" ng-click="loadAllActivity(userActivity)">{{strings.viewAll}}</a>


						

					</div>
				</li>
				<li class="dndPlaceholder"><label></label></li>
			</ul>
			<span ng-if="!user.activity.length">
				{{strings.noActivity}}
			</span>
			<span ng-show="hiddenActivityCount && !settings.editing" class="usin-profile-hidden-items-count">
				{{hiddenActivityCount}} {{strings.hiddenItems}}
				<md-tooltip md-direction="top">{{strings.profileHiddenItemsInstructions}}</md-tooltip>
			</span>
		</div>
	</div>
	</div>
	
	<div class="usin-user-notes-wrap usin-one-third usin-column">
		<!-- NOTES -->
		<div usin-profile-notes></div>
	</div>
	
</div>

</div>
