<div class="fitted item choose reference mr-1">
<div class="ui floating filter dropdown custom" data-can-create-branch=" {{ .CanCreateBranch }} " data-no-results=" {{ .i18n .Tr "repo.pulls.no_results" }} ">
<div class="ui basic small compact button" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
<span class="text">
{{ svg "octicon-git-branch" }}
{{ if .IsViewBranch }} {{ .i18n .Tr "repo.branch" }} {{ else }} {{ .i18n .Tr "repo.tree" }} {{ end }} :
<strong> {{ if .IsViewBranch }} {{ .BranchName }} {{ else }} {{ ShortSha .BranchName }} {{ end }} </strong>
</span>
{{ svg "octicon-triangle-down" 1 4 "dropdown icon" }}
</div>
<div class="data" style="display: none" data-mode=" {{ if .IsViewTag }} tags {{ else }} branches {{ end }} ">
{{ range .Branches }}
<div class="item branch {{ if eq $ .BranchName . }} selected {{ end }} " data-url=" {{ $ .RepoLink }} / {{ if $ .PageIsCommits }} commits {{ else }} src {{ end }} /branch/ {{ EscapePound . }} {{ if $ .TreePath }} / {{ EscapePound $ .TreePath }} {{ end }} "> {{ . }} </div>
{{ end }}
{{ range .Tags }}
<div class="item tag {{ if eq $ .BranchName . }} selected {{ end }} " data-url=" {{ $ .RepoLink }} / {{ if $ .PageIsCommits }} commits {{ else }} src {{ end }} /tag/ {{ EscapePound . }} {{ if $ .TreePath }} / {{ EscapePound $ .TreePath }} {{ end }} "> {{ . }} </div>
{{ end }}
</div>
<div class="menu transition" :class=" { visible: menuVisible}" v-if="menuVisible" v-cloak>
<div class="ui icon search input">
<i class="icon df ac jc m-0"> {{ svg "octicon-filter" 1 6 }} </i>
<input name="search" ref="searchField" v-model="searchTerm" @keydown="keydown($event)" placeholder=" {{ .i18n .Tr "repo.filter_branch_and_tag" }} ...">
</div>
<div class="header branch-tag-choice">
<div class="ui grid">
<div class="two column row">
<a class="reference column" href="#" @click="mode = 'branches'; focusSearchField()">
<span class="text" :class=" { black: mode == 'branches'}">
{{ svg "octicon-git-branch" 1 6 "mr-2" }} {{ .i18n .Tr "repo.branches" }}
</span>
</a>
<a class="reference column" href="#" @click="mode = 'tags'; focusSearchField()">
<span class="text" :class=" { black: mode == 'tags'}">
{{ svg "octicon-tag" 1 6 "mr-2" }} {{ .i18n .Tr "repo.tags" }}
</span>
</a>
</div>
</div>
</div>
<div class="scrolling menu" ref="scrollContainer">
<div v-for="(item, index) in filteredItems" :key="item.name" class="item" :class=" { selected: item.selected, active: active == index}" @click="selectItem(item)" :ref="'listItem' + index">$ { item.name }</div>
<div class="item" v-if="showCreateNewBranch" :class=" { active: active == filteredItems.length}" :ref="'listItem' + filteredItems.length">
<a href="#" @click="createNewBranch()">
<div>
{{ svg "octicon-git-branch" }}
{{ .i18n .Tr "repo.branch.create_branch" ` $ { searchTerm } ` | Safe }}
</div>
<div class="text small">
{{ if .IsViewBranch }}
{{ .i18n .Tr "repo.branch.create_from" .BranchName }}
{{ else }}
{{ .i18n .Tr "repo.branch.create_from" ( ShortSha .BranchName ) }}
{{ end }}
</div>
</a>
<form ref="newBranchForm" action=" {{ .RepoLink }} /branches/_new/ {{ EscapePound .BranchNameSubURL }} " method="post">
{{ .CsrfTokenHtml }}
<input type="hidden" name="new_branch_name" v-model="searchTerm">
</form>
</div>
</div>
<div class="message" v-if="showNoResults">$ { noResults }</div>
</div>
</div>
</div>