{{$pageMeta := .}}
{{$data := .ProjectsData}}
<div class="divider"></div>

{{/* project selector */}}
<div class="issue-sidebar-combo sidebar-project-combo" data-selection-mode="multiple" data-update-algo="all"
		{{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/projects?issue_ids={{$pageMeta.Issue.ID}}"{{end}}
>
	<input class="combo-value" name="project_ids" type="hidden" value="{{SliceUtils.JoinInt64 $data.SelectedProjectIDs}}">
	<div class="ui dropdown full-width {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
		<a class="fixed-text muted">
			<strong>{{ctx.Locale.Tr "repo.issues.new.projects"}}</strong> {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}
		</a>
		<div class="menu">
			{{if or $data.OpenProjects $data.ClosedProjects}}
			<div class="ui icon search input">
				<i class="icon">{{svg "octicon-search" 16}}</i>
				<input type="text" placeholder="{{ctx.Locale.Tr "repo.issues.filter_projects"}}">
			</div>
			{{end}}
			<div class="scrolling menu flex-items-menu">
				<div class="item clear-selection" data-text="">{{ctx.Locale.Tr "repo.issues.new.clear_projects"}}</div>
				<div class="divider"></div>
				{{if $data.OpenProjects}}
					<div class="header">{{ctx.Locale.Tr "repo.issues.new.open_projects"}}</div>
					{{range $data.OpenProjects}}
						<a class="item muted" data-value="{{.ID}}" href="{{.Link ctx}}">
							<span class="item-check-mark">{{svg "octicon-check"}}</span>
							{{svg .IconName 18}}<span class="tw-flex-1 gt-ellipsis">{{.Title}}</span>
						</a>
					{{end}}
				{{end}}
				{{if and $data.OpenProjects $data.ClosedProjects}}<div class="divider"></div>{{end}}
				{{if $data.ClosedProjects}}
					<div class="header">{{ctx.Locale.Tr "repo.issues.new.closed_projects"}}</div>
					{{range $data.ClosedProjects}}
						<a class="item muted" data-value="{{.ID}}" href="{{.Link ctx}}">
							<span class="item-check-mark">{{svg "octicon-check"}}</span>
							{{svg .IconName 18}}<span class="tw-flex-1 gt-ellipsis">{{.Title}}</span>
						</a>
					{{end}}
				{{end}}
			</div>
		</div>
	</div>

	{{/* project cards (column selectors) */}}
	<div class="ui list tw-my-2 flex-relaxed-list issue-sidebar-project-cards" data-combo-list-inited="true">
		<div class="item empty-list {{if $data.ProjectCards}}tw-hidden{{end}}">{{ctx.Locale.Tr "repo.issues.new.no_projects"}}</div>
	{{range $card := $data.ProjectCards}}
		{{$selectedColumn := $card.SelectedColumn}}
		{{/* only show a "project column card" if the selected column exists, otherwise only show the project title */}}
		<div class="item {{if $selectedColumn}}sidebar-project-card{{end}}">
			<a class="suppressed flex-text-block" href="{{$card.Project.Link ctx}}">
				{{svg $card.Project.IconName 16}} <span class="gt-ellipsis">{{$card.Project.Title}}</span>
			</a>
			{{if and $selectedColumn $pageMeta.CanModifyIssueOrPull}}
				<div class="issue-sidebar-combo sidebar-project-column-combo" data-selection-mode="single" data-update-algo="all"
					data-update-url="{{$pageMeta.RepoLink}}/issues/projects/column?issue_id={{$pageMeta.Issue.ID}}"
				>
					<input class="combo-value" name="column_id" type="hidden" value="{{if $selectedColumn}}{{$selectedColumn.ID}}{{end}}">
					<div class="ui dropdown full-width">
						<div class="flex-text-block tw-ml-[16px]">{{/* align with the "project" icon */}}
							<div class="interact-bg tw-px-2 tw-py-1 tw-rounded flex-text-block fixed-text">
								{{if $selectedColumn}}
									{{if $card.SelectedColumn.Color}}<span class="color-icon icon-size-8" style="background-color: {{$card.SelectedColumn.Color}}"></span>{{end}}
									<div class="gt-ellipsis">{{$card.SelectedColumn.Title}}</div>
								{{else}}
									<div class="gt-ellipsis">{{ctx.Locale.Tr "repo.issues.new.no_column"}}</div>
								{{end}}
								{{svg "octicon-triangle-down" 14}}
							</div>
						</div>
						<div class="menu flex-items-menu">
							{{range $columnItem := $card.Columns}}
								<a class="item" data-value="{{$columnItem.ID}}">
									<span class="item-check-mark">{{svg "octicon-check"}}</span>
									{{if $columnItem.Color}}<span class="color-icon icon-size-8" style="background-color: {{$columnItem.Color}}"></span>{{end}}
									<div class="gt-ellipsis">{{$columnItem.Title}}</div>
								</a>
							{{end}}
						</div>
					</div>
				</div>
			{{else if $selectedColumn}}
				<div class="flex-text-block tw-my-1 tw-ml-[22px]">{{/* align with the "project" icon */}}
					{{if $selectedColumn.Color}}<span class="color-icon icon-size-8" style="background-color: {{$selectedColumn.Color}}"></span>{{end}}
					<div class="gt-ellipsis">{{$selectedColumn.Title}}</div>
				</div>
			{{end}}
		</div>
	{{end}}
	</div>
</div>