{{template "base/head" .}}
<div class="dashboard feeds">
	{{template "user/dashboard/navbar" .}}
	<div class="ui container">
		{{template "base/alert" .}}
		<div class="ui mobile reversed stackable grid">
			<div class="ten wide column">
				{{template "user/dashboard/feeds" .}}
			</div>
			<div id="app" class="six wide column">
				<repo-search
					:search-limit="searchLimit"
					:suburl="suburl"
					:uid="uid"
					:more-repos-link="'{{.ContextUser.HomeLink}}'"
					{{if not .ContextUser.IsOrganization}}
					:organizations="[
						{{range .ContextUser.Orgs}}
						{name: '{{.Name}}', num_repos: '{{.NumRepos}}'},
						{{end}}
					]"
					:is-organization="false"
					:organizations-total-count="{{.ContextUser.GetOrganizationCount}}"
					:can-create-organization="{{.SignedUser.CanCreateOrganization}}"
					{{end}}
					inline-template
					v-cloak
				>
					<div>
						<div v-if="!isOrganization" class="ui two item tabable menu">
							<a :class="{item: true, active: tab === 'repos'}" @click="changeTab('repos')">{{.i18n.Tr "repository"}}</a>
							<a :class="{item: true, active: tab === 'organizations'}" @click="changeTab('organizations')">{{.i18n.Tr "organization"}}</a>
						</div>
						<div v-show="tab === 'repos'" class="ui tab active list dashboard-repos">
							<h4 class="ui top attached header">
								{{.i18n.Tr "home.my_repos"}} <span class="ui grey label">${reposTotalCount}</span>
								<div class="ui right">
									<a class="poping up" :href="suburl + '/repo/create'" data-content="{{.i18n.Tr "new_repo"}}" data-variation="tiny inverted" data-position="left center">
										<i class="plus icon"></i>
										<span class="sr-only">{{.i18n.Tr "new_repo"}}</span>
									</a>
								</div>
							</h4>
							<div class="ui attached secondary segment repos-search">
								<div class="ui fluid icon input" :class="{loading: isLoading}">
									<input @input="searchRepos(reposFilter)" v-model="searchQuery" ref="search" placeholder="{{.i18n.Tr "home.search_repos"}}">
									<i class="search icon"></i>
								</div>
								<div class="ui secondary tiny pointing borderless menu center aligned grid repos-filter">
									<a class="item" :class="{active: reposFilter === 'all'}" @click="changeReposFilter('all')">
										{{.i18n.Tr "all"}}
										<div v-show="reposFilter === 'all'" class="ui circular mini grey label">${repoTypeCount}</div>
									</a>
									<a class="item" :class="{active: reposFilter === 'sources'}" @click="changeReposFilter('sources')">
										{{.i18n.Tr "sources"}}
										<div v-show="reposFilter === 'sources'" class="ui circular mini grey label">${repoTypeCount}</div>
									</a>
									<a class="item" :class="{active: reposFilter === 'forks'}" @click="changeReposFilter('forks')">
										{{.i18n.Tr "forks"}}
										<div v-show="reposFilter === 'forks'" class="ui circular mini grey label">${repoTypeCount}</div>
									</a>
									<a class="item" :class="{active: reposFilter === 'mirrors'}" @click="changeReposFilter('mirrors')">
										{{.i18n.Tr "mirrors"}}
										<div v-show="reposFilter === 'mirrors'" class="ui circular mini grey label">${repoTypeCount}</div>
									</a>
									<a class="item" :class="{active: reposFilter === 'collaborative'}" @click="changeReposFilter('collaborative')">
										{{.i18n.Tr "collaborative"}}
										<div v-show="reposFilter === 'collaborative'" class="ui circular mini grey label">${repoTypeCount}</div>
									</a>
								</div>
							</div>
							<div class="ui attached table segment">
								<ul class="repo-owner-name-list">
									<li v-for="repo in repos" :class="{'private': repo.private}" v-show="showRepo(repo, reposFilter)">
										<a :href="suburl + '/' + repo.full_name">
											<i :class="repoClass(repo)"></i>
											<strong class="text truncate item-name">${repo.full_name}</strong>
										</a>
									</li>
									<li v-if="showMoreReposLink">
										<a :href="moreReposLink">{{.i18n.Tr "home.show_more_repos"}}</a>
									</li>
								</ul>
							</div>
						</div>
						<div v-if="!isOrganization" v-show="tab === 'organizations'" class="ui tab active list">
							<h4 class="ui top attached header">
								{{.i18n.Tr "home.my_orgs"}} <span class="ui grey label">${organizationsTotalCount}</span>
								<div v-if="canCreateOrganization" class="ui right">
									<a class="poping up" :href="suburl + '/org/create'" data-content="{{.i18n.Tr "new_org"}}" data-variation="tiny inverted" data-position="left center">
										<i class="plus icon"></i>
										<span class="sr-only">{{.i18n.Tr "new_org"}}</span>
									</a>
								</div>
							</h4>
							<div class="ui attached table segment">
								<ul class="repo-owner-name-list">
									<li v-for="org in organizations">
										<a :href="suburl + '/' + org.name">
											<i class="octicon octicon-organization"></i>
											<strong class="text truncate item-name">${org.name}</strong>
											<span class="ui right text light grey">
												${org.num_repos} <i class="octicon octicon-repo rear"></i>
											</span>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</repo-search>
			</div>
		</div>
	</div>
</div>
{{template "base/footer" .}}