{{$canWriteProject := and .CanWriteProjects (or (not .Repository) (not .Repository.IsArchived))}}

<div class="ui container fluid padded projects-view" data-global-init="initRepoProjectsView">
	<div class="ui container flex-text-block project-header">
		<h2>{{.Project.Title}}</h2>
		<div class="tw-flex-1"></div>
		<div class="list-header-filters ui secondary menu tw-m-0">
			{{$queryLink := QueryBuild "?" "labels" .SelectLabels "assignee" $.AssigneeID "milestone" $.MilestoneID "archived_labels" (Iif $.ShowArchivedLabels "true") "filter" $.ProjectFilter "group_by" $.ProjectGroupBy}}
			{{template "repo/issue/filter_item_label" dict "Labels" .Labels "QueryLink" $queryLink "SupportArchivedLabel" true}}
			{{template "repo/issue/filter_item_user_assign" dict
				"QueryParamKey" "assignee"
				"QueryLink" $queryLink
				"UserSearchList" $.Assignees
				"SelectedUserId" $.AssigneeID
				"TextFilterTitle" (ctx.Locale.Tr "repo.issues.filter_assignee")
				"TextFilterMatchNone" (ctx.Locale.Tr "repo.issues.filter_assignee_no_assignee")
				"TextFilterMatchAny" (ctx.Locale.Tr "repo.issues.filter_assignee_any_assignee")
			}}
			{{template "repo/issue/filter_item_milestone" dict
				"QueryLink" $queryLink
				"MilestoneID" $.MilestoneID
				"OpenMilestones" .OpenMilestones
				"ClosedMilestones" .ClosedMilestones
			}}
		</div>
		{{if $canWriteProject}}
			<div class="ui compact mini menu">
				<a class="item screen-full">
					{{svg "octicon-screen-full"}}
					{{ctx.Locale.Tr "projects.enter_fullscreen"}}
				</a>
				<a class="item screen-normal tw-hidden">
					{{svg "octicon-screen-normal"}}
					{{ctx.Locale.Tr "projects.exit_fullscreen"}}
				</a>
				<a class="item" href="{{.Link}}/edit?redirect=project">
					{{svg "octicon-pencil"}}
					{{ctx.Locale.Tr "repo.issues.label_edit"}}
				</a>
				{{if .Project.IsClosed}}
					<button class="item btn link-action" data-url="{{.Link}}/open">
						{{svg "octicon-check"}}
						{{ctx.Locale.Tr "repo.projects.open"}}
					</button>
				{{else}}
					<button class="item btn link-action" data-url="{{.Link}}/close">
						{{svg "octicon-skip"}}
						{{ctx.Locale.Tr "repo.projects.close"}}
					</button>
				{{end}}
				<button class="item btn link-action" data-url="{{.Link}}/delete?id={{.Project.ID}}"
								data-modal-confirm-header="{{ctx.Locale.Tr "repo.projects.deletion"}}"
								data-modal-confirm-content="{{ctx.Locale.Tr "repo.projects.deletion_desc"}}"
				>
					{{svg "octicon-trash"}}
					{{ctx.Locale.Tr "repo.issues.label_delete"}}
				</button>
				<button class="item btn show-modal show-project-column-modal-edit" data-modal="#project-column-modal-edit"
								data-modal-header="{{ctx.Locale.Tr "repo.projects.column.new"}}"
								data-modal-project-column-title-label="{{ctx.Locale.Tr "repo.projects.column.new_title"}}"
								data-modal-project-column-button-save="{{ctx.Locale.Tr "repo.projects.column.new_submit"}}"
								data-modal-project-column-id=""
								data-modal-project-column-title-input=""
								data-modal-project-column-color-input=""
				>
					{{svg "octicon-plus"}}
					{{ctx.Locale.Tr "new_project_column"}}
				</button>
			</div>
		{{end}}
	</div>

	<div class="ui container project-board-controls">
		<div class="ui action input project-filter-input">
			<label class="tw-sr-only" for="project-filter-input">{{ctx.Locale.Tr "repo.projects.filter"}}</label>
			<input id="project-filter-input" type="search" data-project-filter-input value="{{.ProjectFilter}}" placeholder="{{ctx.Locale.Tr "repo.projects.filter_placeholder"}}" autocomplete="off" aria-describedby="project-filter-error project-filter-empty">
			<button type="button" class="ui button" data-project-filter-clear>{{ctx.Locale.Tr "repo.projects.filter_clear"}}</button>
		</div>
		<div class="project-group-select">
			<label for="project-group-by">{{ctx.Locale.Tr "repo.projects.group_by"}}</label>
			<select id="project-group-by" data-project-group-by>
				<option value="none">{{ctx.Locale.Tr "repo.projects.group_by.none"}}</option>
				<option value="assignee">{{ctx.Locale.Tr "repo.issues.filter_assignee"}}</option>
				<option value="label">{{ctx.Locale.Tr "repo.issues.filter_label"}}</option>
				<option value="milestone">{{ctx.Locale.Tr "repo.issues.filter_milestone"}}</option>
				<option value="repository">{{ctx.Locale.Tr "repo.repository"}}</option>
				<option value="state">{{ctx.Locale.Tr "repo.issues.filter_state"}}</option>
				<option value="type">{{ctx.Locale.Tr "repo.issues.filter_type"}}</option>
				<option value="status">{{ctx.Locale.Tr "repo.projects.column"}}</option>
			</select>
		</div>
		<p id="project-filter-error" class="tw-text-red" data-project-filter-error role="alert" hidden
			data-project-filter-error-unknown="{{ctx.Locale.Tr "repo.projects.filter.error.unknown"}}"
			data-project-filter-error-malformed="{{ctx.Locale.Tr "repo.projects.filter.error.malformed"}}"
			data-project-filter-error-unclosed="{{ctx.Locale.Tr "repo.projects.filter.error.unclosed"}}"
		></p>
		<p id="project-filter-empty" data-project-filter-empty role="status" hidden>{{ctx.Locale.Tr "repo.projects.filter.no_results"}}</p>
	</div>

	<div class="ui container project-description">
		<div class="render-content markup">
			{{$.Project.RenderedContent}}
		</div>
		<div class="divider"></div>
	</div>

	<div id="project-board" class="board {{if $canWriteProject}}sortable{{end}}" data-project-board-writable="{{$canWriteProject}}" data-project-group-no-value="{{ctx.Locale.Tr "repo.projects.group_by.no_value"}}" {{if $canWriteProject}}data-url="{{$.Link}}/move"{{end}}>
		{{range .Columns}}
			{{$columnTitle := .Title}}
			<div class="project-column" {{if .Color}}style="background: {{.Color}} !important; color: {{ContrastColor .Color}} !important"{{end}} data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.Link}}/{{.ID}}">
				<div class="project-column-header{{if $canWriteProject}} tw-cursor-grab{{end}}">
					<div class="ui circular label project-column-issue-count">
						{{.NumIssues}}
					</div>
					<div class="project-column-title-text flex-text-inline gt-ellipsis" {{if .Default}}data-tooltip-content="{{ctx.Locale.Tr "repo.projects.column.default_column_hint"}}"{{end}}>
						{{if .Default}}{{svg "octicon-star"}} {{end}}{{.Title}}
					</div>
					{{if $canWriteProject}}
						<div class="ui dropdown tw-p-1">
							{{svg "octicon-kebab-horizontal"}}
							<div class="menu">
								<a class="item button show-modal show-project-column-modal-edit" data-modal="#project-column-modal-edit"
									data-modal-header="{{ctx.Locale.Tr "repo.projects.column.edit"}}"
									data-modal-project-column-title-label="{{ctx.Locale.Tr "repo.projects.column.edit_title"}}"
									data-modal-project-column-button-save="{{ctx.Locale.Tr "repo.projects.column.edit"}}"
									data-modal-project-column-id="{{.ID}}"
									data-modal-project-column-title-input="{{.Title}}"
									data-modal-project-column-color-input="{{.Color}}"
								>
									{{svg "octicon-pencil"}} {{ctx.Locale.Tr "repo.projects.column.edit"}}
								</a>
								{{if not .Default}}
									<a class="item button link-action" data-url="{{$.Link}}/{{.ID}}/default"
										data-modal-confirm-header="{{ctx.Locale.Tr "repo.projects.column.set_default"}}"
										data-modal-confirm-content="{{ctx.Locale.Tr "repo.projects.column.set_default_desc"}}"
									>
										{{svg "octicon-star"}} {{ctx.Locale.Tr "repo.projects.column.set_default"}}
									</a>
									<a class="item button link-action" data-url="{{$.Link}}/{{.ID}}" data-fetch-method="DELETE"
										data-modal-confirm-header="{{ctx.Locale.Tr "repo.projects.column.delete"}}"
										data-modal-confirm-content="{{ctx.Locale.Tr "repo.projects.column.deletion_desc"}}"
									>
										{{svg "octicon-trash"}} {{ctx.Locale.Tr "repo.projects.column.delete"}}
									</a>
								{{end}}
							</div>
						</div>
					{{end}}
				</div>
				<div class="divider"{{if .Color}} style="color: {{ContrastColor .Color}} !important"{{end}}></div>
				<div class="ui cards" data-url="{{$.Link}}/{{.ID}}" data-project="{{$.Project.ID}}" data-board="{{.ID}}" id="board_{{.ID}}">
					{{range (index $.IssuesMap .ID)}}
						<div class="issue-card tw-break-anywhere {{if $canWriteProject}}tw-cursor-grab{{end}}" data-issue="{{.ID}}"
							data-project-card-id="{{.ID}}"
							data-project-card-title="{{.Title}}"
							data-project-card-assignees="[{{range $index, $assignee := .Assignees}}{{if $index}},{{end}}{{printf "%q" $assignee.Name}}{{end}}]"
                                                        data-project-card-author="{{if .OriginalAuthor}}{{.OriginalAuthor}}{{else}}{{.Poster.Name}}{{end}}"
							data-project-card-labels="[{{range $index, $label := .Labels}}{{if $index}},{{end}}{{printf "%q" $label.Name}}{{end}}]"
							data-project-card-milestone="{{if .MilestoneID}}{{.Milestone.Name}}{{end}}"
							data-project-card-repository="{{.Repo.FullName}}"
							data-project-card-state="{{if .IsClosed}}closed{{else}}open{{end}}"
							data-project-card-type="{{if .IsPull}}pull{{else}}issue{{end}}"
							data-project-card-status="{{$columnTitle}}"
						>
							{{template "repo/issue/card" (dict "Issue" . "Page" $)}}
						</div>
					{{end}}
				</div>
			</div>
		{{end}}
	</div>
</div>

{{if $canWriteProject}}
<div class="ui small modal" id="project-column-modal-edit">
	<div class="header">{{ctx.Locale.Tr "repo.projects.column.edit"}}</div>
	<div class="content">
		<form class="ui form ignore-dirty" method="post" data-action-base-link="{{$.Link}}">
			<input class="project-column-id" type="hidden" name="id">
			<div class="required field">
				<label class="project-column-title-label" for="project-column-title-input">{{ctx.Locale.Tr "repo.projects.column.edit_title"}}</label>
				<input id="project-column-title-input" name="title" required>
			</div>
			<div class="field">
				<label class="project-column-color-label" for="project-column-color-input">{{ctx.Locale.Tr "repo.projects.column.color"}}</label>
				<div class="color-picker-combo" data-global-init="initColorPicker">
					<input maxlength="7" placeholder="#c320f6" id="project-column-color-input" name="color">
					{{template "repo/issue/label_precolors"}}
				</div>
			</div>
			<div class="actions">
				<button class="ui cancel button">{{ctx.Locale.Tr "settings.cancel"}}</button>
				<button type="submit" class="ui primary button project-column-button-save">{{ctx.Locale.Tr "save"}}</button>
			</div>
		</form>
	</div>
</div>
{{end}}