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

<div class="ui container tw-max-w-full">
	<div class="tw-flex tw-justify-between tw-items-center tw-mb-4 tw-gap-3">
		<h2 class="tw-mb-0 tw-flex-1 tw-break-anywhere">{{.Project.Title}}</h2>
			<div class="project-toolbar-right">
				<div class="ui secondary filter menu labels">
					{{$queryLink := QueryBuild "?" "labels" .SelectLabels "assignee" $.AssigneeID "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")
						"TextZeroValue" (ctx.Locale.Tr "repo.issues.filter_assginee_no_select")
						"TextNegativeOne" (ctx.Locale.Tr "repo.issues.filter_assginee_no_assignee")
					}}
				</div>
			</div>
		{{if $canWriteProject}}
			<div class="ui compact mini menu">
				<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="content">{{$.Project.RenderedContent}}</div>

	<div class="divider"></div>
</div>

<div id="project-board" data-project-borad-writable="{{$canWriteProject}}">
	<div class="board {{if $canWriteProject}}sortable{{end}}" {{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 gt-ellipsis">{{.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-pin"}} {{ctx.Locale.Tr "repo.projects.column.set_default"}}
									</a>
									<a class="item button link-action" data-url="{{$.Link}}/{{.ID}}" data-link-action-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}}
<div class="ui small modal" id="project-column-modal-edit">
	<div class="header">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">title</label>
				<input id="project-column-title-input" name="title" value="{{.Title}}" required>
			</div>
			<div class="field">
				<label class="project-column-color-label" for="project-column-color-input">color</label>
				<div class="js-color-picker-input column">
					<input maxlength="7" placeholder="#c320f6" id="project-column-color-input" name="color" value="{{.Color}}">
					{{template "repo/issue/label_precolors"}}
				</div>
			</div>
			<div class="actions tw-text-right">
				<button class="ui cancel button">{{ctx.Locale.Tr "settings.cancel"}}</button>
				<button type="submit" class="ui primary button project-column-button-save">save</button>
			</div>
		</form>
	</div>
</div>
{{end}}