{{$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")}}
			{{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>
		<div class="ui compact mini menu">
			<a class="item" href="{{.Link}}/workflows">
				{{svg "octicon-workflow"}}
				{{ctx.Locale.Tr "projects.workflows"}}
			</a>
			{{if $canWriteProject}}
				<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 type="button" class="item btn link-action" data-url="{{.Link}}/open">
						{{svg "octicon-check"}}
						{{ctx.Locale.Tr "repo.projects.open"}}
					</button>
				{{else}}
					<button type="button" class="item btn link-action" data-url="{{.Link}}/close">
						{{svg "octicon-skip"}}
						{{ctx.Locale.Tr "repo.projects.close"}}
					</button>
				{{end}}
				<button type="button" class="item btn link-action negative" 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 type="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>
			{{end}}
		</div>
	</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}}" {{if $canWriteProject}}data-url="{{$.Link}}/move"{{end}}>
		{{range .Columns}}
			<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 negative" 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}}">
							{{template "repo/issue/card" (dict "Issue" . "Page" $)}}
						</div>
					{{end}}
				</div>
			</div>
		{{end}}
	</div>
</div>

{{if $canWriteProject}}
<dialog class="modal-dialog" 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 type="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>
</dialog>
{{end}}