{{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.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 or .Owner.GitoteDeveloper .Owner.IsBeta .Owner.IsMaker .Owner.IsBugHunter}}
			<div style="margin-top:1rem" class="ui mini images">
				{{if .Owner.GitoteDeveloper}}<img class="ui image" src="https://cdn.jsdelivr.net/npm/gitote@1.2.3/img/badges/gitotedeveloper.png">{{end}}
				{{if .Owner.IsBeta}}<img class="ui image" src="https://cdn.jsdelivr.net/npm/gitote@1.2.3/img/badges/beta.png">{{end}}
				{{if .Owner.IsMaker}}<img class="ui image" src="https://cdn.jsdelivr.net/npm/gitote@1.2.3/img/badges/maker.png">{{end}}
				{{if .Owner.IsBugHunter}}<img class="ui image" src="https://cdn.jsdelivr.net/npm/gitote@1.2.3/img/badges/bughunter.png">{{end}}
			</div>
		{{end}}
		{{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}}
									{{if .Owner.Gitlab}}<a href="https://gitlab.com/{{.Owner.Gitlab}}" target="_blank"><i class="gitlab 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.GitoteDeveloper .Owner.IsBeta .Owner.IsMaker .Owner.IsBugHunter}}
								<li>
									<div class="ui tiny images">
										{{if .Owner.GitoteDeveloper}}
											<a class="poping up" target="_blank" href="/jobs" data-content="Gitote Developer" data-variation="inverted tiny" data-position="left center">
												<img class="ui image" src="https://cdn.jsdelivr.net/npm/gitote@1.2.3/img/badges/gitotedeveloper.png">
											</a>
										{{end}}
										{{if .Owner.IsBeta}}
											<a class="poping up" target="_blank" href="/jobs" data-content="Beta Member" data-variation="inverted tiny" data-position="left center">
												<img class="ui image" src="https://cdn.jsdelivr.net/npm/gitote@1.2.3/img/badges/beta.png">
											</a>
										{{end}}
										{{if .Owner.IsMaker}}
											<a class="poping up" target="_blank" href="/jobs" data-content="Maker" data-variation="inverted tiny" data-position="left center">
												<img class="ui image" src="https://cdn.jsdelivr.net/npm/gitote@1.2.3/img/badges/maker.png">
											</a>
										{{end}}
										{{if .Owner.IsBugHunter}}
											<a class="poping up" target="_blank" href="/jobs" data-content="Bug Hunter" data-variation="inverted tiny" data-position="left center">
												<img class="ui image" src="https://cdn.jsdelivr.net/npm/gitote@1.2.3/img/badges/bughunter.png">
											</a>
										{{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>
			{{template "user/activity" .}}
		</div>
	</div>
</div>
{{template "base/footer" .}}