{{template "base/head" .}}

{{if not .IsLogged}}
	{{template "misc/signup_prompt" .}}
{{end}}

<div class="mobile-card">
	<div class="content">
		<img class="right floated mini ui image" src="{{AppendAvatarSize .Owner.RelAvatarLink 290}}" title="{{.Owner.Name}}">
		<div class="header">
		{{if .Owner.FullName}}
			<span class="mobile-name">{{.Owner.FullName}}</span>
			{{if .Owner.IsVerified}}<a class="poping up" target="_blank" href="/verified" data-content="Verified" data-variation="inverted tiny" data-position="right center"><i class="verified octicon octicon-verified"></i></a>{{end}}
			{{if .Owner.IsMaker}}<a class="poping up" target="_blank" href="/maker" data-content="Maker" data-variation="inverted tiny" data-position="right center"><i class="maker octicon octicon-paintcan"></i></a>{{end}}
			{{if .Owner.IsBugHunter}}<a class="poping up" target="_blank" href="/security" data-content="Bug Hunter" data-variation="inverted tiny" data-position="right center"><i class="bughunter octicon octicon-gist-secret"></i></a>{{end}}
			{{if .Owner.IsBeta}}<a class="poping up" target="_blank" href="/developer" data-content="Beta Member" data-variation="inverted tiny" data-position="right center"><i class="developer octicon octicon-circuit-board"></i></a>{{end}}
			{{if .Owner.IsStaff}}<a class="poping up" target="_blank" href="/jobs" data-content="Staff" data-variation="inverted tiny" data-position="right center"><i class="isstaff octicon octicon-tools"></i></a>{{end}}
		{{end}}
		</div>
		<div class="meta">
			@{{.Owner.Name}}
		</div>
		{{if .Owner.Status}}
			<div><p class="status" style="font-weight:500">{{.Owner.Status}}</p></div>
		{{end}}
		<div class="profile-card meta">
			{{if .Owner.Description}}
				<span class="user description">
					<p>{{.Owner.Description}}</p>
				</span>
			{{end}}
			{{if .Owner.Location}}
				<br/>
				<i class="menu-icon octicon">📍</i> {{.Owner.Location}}
			{{end}}
			{{if .Owner.Company}}
				<br/>
				<i class="menu-icon octicon">🏢</i> {{.Owner.Company}}
				{{if .Owner.IsStaff}}<span class="staff">Staff</span>{{end}}
			{{end}}
			{{if and .Owner.Email .IsLogged}}
				{{if not .Owner.PrivateEmail}}
					<br/>
					<i class="menu-icon octicon">📧</i>
					<a href="mailto:{{.Owner.Email}}" rel="nofollow">{{.Owner.Email}}</a>
				{{end}}
			{{else}}
				<br/>
				<i class="menu-icon octicon">📧</i>
				<a class="pro-truncate" href="{{AppURL}}login" rel="nofollow">{{.i18n.Tr "user.hide_email"}}</a>
			{{end}}
			{{if .Owner.Website}}
				<br/>
				<i class="menu-icon octicon">🔗</i>
				<a target="_blank" rel="noopener noreferrer me nofollow" href="{{.Owner.Website}}">{{.Owner.Website}}</a>
			{{end}}
			<br/>
			<i class="menu-icon octicon">🕒</i> {{.i18n.Tr "user.join_on"}} {{DateFmtShort .Owner.Created}}
			{{if .Owner.NumStars}}
				<br/>
				<i class="menu-icon octicon">⭐</i>
				{{.Owner.NumStars}} {{.i18n.Tr "user.starred"}}
			{{end}}
			<div>
				<i class="menu-icon octicon">🤵</i>
				<a href="{{.Owner.HomeLink}}/followers">
					{{.Owner.NumFollowers}} {{.i18n.Tr "user.followers"}}
				</a>
				-
				<a href="{{.Owner.HomeLink}}/following">
					{{.Owner.NumFollowing}} {{.i18n.Tr "user.following"}}
				</a>
			</div>
		</div>
		{{if and .IsLogged (ne .LoggedUserName .Owner.Name)}}
			<div class="follow">
				{{if .LoggedUser.IsFollowing .Owner.ID}}
					<a class="ui basic red button mobile-card follow" href="{{.Link}}/action/unfollow?redirect_to={{$.Link}}"><i class="menu-icon octicon">👦🏽</i>{{.i18n.Tr "user.unfollow"}}</a>
				{{else}}
					<a class="ui basic green button mobile-card follow" href="{{.Link}}/action/follow?redirect_to={{$.Link}}"><i class="menu-icon octicon">👦</i>{{.i18n.Tr "user.follow"}}</a>
				{{end}}
			</div>
		{{end}}
	</div>
</div>
<div class="user profile">
	<div class="ui container">
		<div class="ui grid">
			<div class="ui five wide column">
				<div class="ui card" style="border: 2px solid {{.Owner.ThemeColor}};box-shadow: 5px 6px 0px {{.Owner.ThemeColor}}"> 
					{{if eq .LoggedUserName .Owner.Name}}
						<a class="image poping up" href="{{AppSubURL}}/user/settings/avatar" id="profile-avatar" data-content="{{.i18n.Tr "user.change_avatar"}}" data-variation="inverted tiny" data-position="bottom center">
							<img src="{{AppendAvatarSize .Owner.RelAvatarLink 290}}" title="{{.Owner.Name}}"/>
						</a>
					{{else}}
						<span class="image">
							<img src="{{AppendAvatarSize .Owner.RelAvatarLink 290}}" title="{{.Owner.Name}}"/>
						</span>
					{{end}}
					<div class="content">
						{{if .Owner.FullName}}
							<span class="header text center">
								{{.Owner.FullName}}
								{{if .Owner.IsVerified}}<a class="poping up" target="_blank" href="/verified" data-content="Verified" data-variation="inverted tiny" data-position="right center"><i class="verified octicon octicon-verified"></i></a>{{end}}
								{{if .Owner.IsStaff}}<a class="poping up" target="_blank" href="/jobs" data-content="Staff" data-variation="inverted tiny" data-position="right center"><i class="isstaff octicon octicon-tools"></i></a>{{end}}
							</span>
						{{end}}
						<center>
							<span class="username text center">
								<i style="font-size:12px" class="menu-icon octicon">👨‍💻</i> {{.Owner.Name}} <i style="font-size:12px" class="menu-icon octicon">👨‍💻</i>
							</span>
							{{if .IsAdmin}}
								<a class="poping up" href="{{AppURL}}admin/users/{{.Owner.ID}}" data-content="Settings" data-variation="inverted tiny" data-position="right center">⚙️</a>
							{{end}}
						<center>
					</div>
					<div class="extra content">
						<ul class="text black">
							{{if .Owner.Status}}
								<li class="ui center">
									<p style="font-weight:500">{{.Owner.Status}}</p>
								</li>
							{{end}}
							{{if or .Owner.Twitter .Owner.Linkedin .Owner.Github .Owner.Devto .Owner.Stackoverflow .Owner.Reddit .Owner.Telegram .Owner.Codepen}}
								<li class="ui center">
									{{if .Owner.Twitter}}<a href="https://twitter.com/{{.Owner.Twitter}}" target="_blank"><i class="twitter icon"></i></a>{{end}}
									{{if .Owner.Linkedin}}<a href="https://linkedin.com/in/{{.Owner.Linkedin}}" target="_blank"><i class="linkedin icon"></i></a>{{end}}
									{{if .Owner.Github}}<a href="https://github.com/{{.Owner.Github}}" target="_blank"><i class="github icon"></i></a>{{end}}
									{{if .Owner.Devto}}<a href="https://dev.to/{{.Owner.Devto}}" target="_blank"><i class="code icon"></i></a>{{end}}
									{{if .Owner.Stackoverflow}}<a href="https://stackoverflow.com/users/{{.Owner.Stackoverflow}}" target="_blank"><i class="stack overflow icon"></i></a>{{end}}
									{{if .Owner.Reddit}}<a href="https://reddit.com/user/{{.Owner.Reddit}}" target="_blank"><i class="reddit icon"></i></a>{{end}}
									{{if .Owner.Telegram}}<a href="https://t.me/{{.Owner.Telegram}}" target="_blank"><i class="telegram icon"></i></a>{{end}}
									{{if .Owner.Codepen}}<a href="https://codepen.io/{{.Owner.Codepen}}" target="_blank"><i class="codepen icon"></i></a>{{end}}
								</li>
							{{end}}
							{{if .Owner.Description}}
								<li class="user description">
									<p>{{.Owner.Description}}</p>
								</li>
							{{end}}

							{{if .Owner.Location}}
								<li><i class="menu-icon octicon">📍</i> <span class="pro-truncate">{{.Owner.Location}}</span></li>
							{{end}}
							{{if .Owner.Company}}
								<li>
									<i class="menu-icon octicon">🏢</i> 
									<span class="pro-truncate">
										{{.Owner.Company}}
										{{if .Owner.IsStaff}}<span class="staff">Staff</span>{{end}}
									</span>
								</li>
							{{end}}
							{{if and .Owner.Email .IsLogged}}
								{{if not .Owner.PrivateEmail}}
									<li>
										<i class="menu-icon octicon">📧</i>
										<a class="pro-truncate" href="mailto:{{.Owner.Email}}" rel="nofollow">{{.Owner.Email}}</a>
									</li>
								{{end}}
							{{else}}
								<li>
									<i class="menu-icon octicon">📧</i>
									<a class="pro-truncate" href="{{AppURL}}login" rel="nofollow">{{.i18n.Tr "user.hide_email"}}</a>
								</li>
							{{end}}
							{{if .Owner.Website}}
								<li>
									<i class="menu-icon octicon">🔗</i>
									<a class="pro-truncate" target="_blank" rel="noopener noreferrer me nofollow" href="{{.Owner.Website}}">{{.Owner.Website}}</a>
								</li>
							{{end}}
							<li><i class="menu-icon octicon">🕒</i> {{.i18n.Tr "user.join_on"}} {{DateFmtShort .Owner.Created}}</li>
							{{if .Owner.NumStars}}
								<li>
									<i class="menu-icon octicon">⭐</i>
									{{.Owner.NumStars}} {{.i18n.Tr "user.starred"}}
								</li>
							{{end}}
							<li>
								<i class="menu-icon octicon">🤵</i>
								<a href="{{.Owner.HomeLink}}/followers">
									{{.Owner.NumFollowers}} {{.i18n.Tr "user.followers"}}
								</a>
								-
								<a href="{{.Owner.HomeLink}}/following">
									{{.Owner.NumFollowing}} {{.i18n.Tr "user.following"}}
								</a>
							</li>
							{{if or .Owner.IsBeta .Owner.IsMaker .Owner.IsBugHunter}}
								<li>
									<div class="ui tiny images">
										{{if .Owner.IsBugHunter}}<img class="ui image" src="https://cdn.jsdelivr.net/npm/gitote@1.2.2/logo.png">{{end}}
										{{if .Owner.IsBeta}}<img class="ui image" src="http://www.leapfrogbuilders.com/images/documents/139/Enterprise%20Tech%20&%20Digital%20Strategy%20Development.svg">{{end}}
										{{if .Owner.IsMaker}}<img class="ui image" src="https://images.vexels.com/media/users/3/144262/isolated/preview/009c23b836c5f0abc17fb76b9e49396e-test-tube-lab-by-vexels.png">{{end}}
										{{if .Owner.IsBugHunter}}<img class="ui image" src="https://www.svgrepo.com/show/231994/ladybug-bug.svg">{{end}}
									</div>
								</li>
							{{end}}
							{{if .Orgs}}
							<li>
								{{range .Orgs}}
									<a href="{{.HomeLink}}"><img class="org-grid ui mini image poping up" src="{{.RelAvatarLink}}" data-content="{{.Name}}" data-position="top center" data-variation="tiny inverted"></a>
								{{end}}
							</li>
							{{end}}
							{{if and .IsLogged (ne .LoggedUserName .Owner.Name)}}
								<li class="follow">
									{{if .LoggedUser.IsFollowing .Owner.ID}}
										<a class="ui basic red button" href="{{.Link}}/action/unfollow?redirect_to={{$.Link}}"><i class="menu-icon octicon">👦🏽</i>{{.i18n.Tr "user.unfollow"}}</a>
									{{else}}
										<a class="ui basic green button" href="{{.Link}}/action/follow?redirect_to={{$.Link}}"><i class="menu-icon octicon">👦</i>{{.i18n.Tr "user.follow"}}</a>
									{{end}}
								</li>
							{{end}}
						</ul>
					</div>
				</div>
			</div>
			<div class="ui eleven wide column">
				<div class="ui secondary pointing menu">
					<a class="{{if ne .TabName "activity"}}active{{end}} item" href="{{.Owner.HomeLink}}">
						<i class="menu-icon octicon">📁</i>&nbsp;{{.i18n.Tr "user.repositories"}} <span class="ui grey label mobile-count">{{.Owner.NumRepos}}</span>
					</a>
					<a class="item">
						<a class="{{if eq .TabName "activity"}}active{{end}} item" href="{{.Owner.HomeLink}}?tab=activity">
							<i class="menu-icon octicon">🔊</i>&nbsp;{{.i18n.Tr "user.activity"}}
						</a>
					</a>
				</div>

				{{if ne .TabName "activity"}}
					{{template "explore/repo_list" .}}
					{{template "explore/page" .}}
				{{else}}
					<br>
					<div class="feeds">
						{{template "user/dashboard/feeds" .}}
					</div>
				{{end}}
			</div>
		</div>
	</div>
</div>
{{template "base/footer" .}}