{{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content repository projects view-project">
	{{template "repo/header" .}}
	<div class="ui container">
		<div class="ui two column stackable grid">
			<div class="column">
				{{template "repo/issue/navbar" .}}
			</div>
			<div class="column right aligned">
				{{if and .CanWriteProjects (not .Repository.IsArchived)}}
					<a class="ui green button show-modal item" href="{{$.RepoLink}}/issues/new/choose?project={{$.Project.ID}}">{{.locale.Tr "repo.issues.new"}}</a>
					<a class="ui green button show-modal item" data-modal="#new-board-item">{{.locale.Tr "new_project_column"}}</a>
				{{end}}
				<div class="ui small modal new-board-modal" id="new-board-item">
					<div class="header">
						{{$.locale.Tr "repo.projects.column.new"}}
					</div>
					<div class="content">
						<form class="ui form">
							<div class="required field">
								<label for="new_board">{{$.locale.Tr "repo.projects.column.new_title"}}</label>
								<input class="new-board" id="new_board" name="title" required>
							</div>

							<div class="field color-field">
								<label for="new_board_color">{{$.locale.Tr "repo.projects.column.color"}}</label>
								<div class="color picker column">
									<input class="color-picker" maxlength="7" placeholder="#c320f6" id="new_board_color_picker" name="color">
									<div class="column precolors">
										{{template "repo/issue/label_precolors"}}
									</div>
								</div>
							</div>

							<div class="text right actions">
								<div class="ui cancel button">{{$.locale.Tr "settings.cancel"}}</div>
								<button data-url="{{$.RepoLink}}/projects/{{$.Project.ID}}" class="ui primary button" id="new_board_submit">{{$.locale.Tr "repo.projects.column.new_submit"}}</button>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<div class="ui divider"></div>
		<div class="ui two column stackable grid">
			<div class="column">
				<h2 class="project-title">{{$.Project.Title}}</h2>
				<div class="content project-description">{{$.Project.RenderedContent|Str2html}}</div>
			</div>
			{{if and (or $.CanWriteIssues $.CanWritePulls) (not $.Repository.IsArchived)}}
				<div class="column right aligned">
					<div class="ui compact right small menu">
						<a class="item" href="{{$.RepoLink}}/projects/{{.Project.ID}}/edit" data-id={{$.Project.ID}} data-title={{$.Project.Title}}>
							{{svg "octicon-pencil"}}
							<span class="gt-mx-3">{{$.locale.Tr "repo.issues.label_edit"}}</span>
						</a>
						{{if .Project.IsClosed}}
							<a class="item link-action" href data-url="{{$.RepoLink}}/projects/{{.Project.ID}}/open">
								{{svg "octicon-check"}}
								<span class="gt-mx-3">{{$.locale.Tr "repo.projects.open"}}</span>
							</a>
						{{else}}
							<a class="item link-action" href data-url="{{$.RepoLink}}/projects/{{.Project.ID}}/close">
								{{svg "octicon-skip"}}
								<span class="gt-mx-3">{{$.locale.Tr "repo.projects.close"}}</span>
							</a>
						{{end}}
						<a class="item delete-button" href="#" data-url="{{$.RepoLink}}/projects/{{.Project.ID}}/delete" data-id="{{.Project.ID}}">
							{{svg "octicon-trash"}}
							<span class="gt-mx-3">{{$.locale.Tr "repo.issues.label_delete"}}</span>
						</a>
					</div>
				</div>
			{{end}}
		</div>
		<div class="ui divider"></div>
	</div>
	<div class="ui container fluid padded" id="project-board">

		<div class="board">
			{{range $board := .Boards}}

			<div class="ui segment board-column" style="background: {{.Color}} !important;" data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.RepoLink}}/projects/{{$.Project.ID}}/{{.ID}}">
				<div class="board-column-header gt-df gt-ac gt-sb">
					<div class="ui large label board-label gt-py-2">
						<div class="ui small circular grey label board-card-cnt">
							{{.NumIssues}}
						</div>
						{{.Title}}
					</div>
					{{if and $.CanWriteProjects (not $.Repository.IsArchived) (ne .ID 0)}}
						<div class="ui dropdown jump item tooltip">
							<div class="not-mobile gt-px-3" tabindex="-1">
								{{svg "octicon-kebab-horizontal"}}
							</div>
							<div class="menu user-menu" tabindex="-1">
								<a class="item show-modal button" data-modal="#edit-project-board-modal-{{.ID}}">
									{{svg "octicon-pencil"}}
									{{$.locale.Tr "repo.projects.column.edit"}}
								</a>
								{{if not .Default}}
									<a class="item show-modal button" data-modal="#set-default-project-board-modal-{{.ID}}">
										{{svg "octicon-pin"}}
										{{$.locale.Tr "repo.projects.column.set_default"}}
									</a>
								{{end}}
								<a class="item show-modal button" data-modal="#delete-board-modal-{{.ID}}">
									{{svg "octicon-trash"}}
									{{$.locale.Tr "repo.projects.column.delete"}}
								</a>

								<div class="ui small modal edit-project-board" id="edit-project-board-modal-{{.ID}}">
									<div class="header">
										{{$.locale.Tr "repo.projects.column.edit"}}
									</div>
									<div class="content">
										<form class="ui form">
											<div class="required field">
												<label for="new_board_title">{{$.locale.Tr "repo.projects.column.edit_title"}}</label>
												<input class="project-board-title" id="new_board_title" name="title" value="{{.Title}}" required>
											</div>

											<div class="field color-field">
												<label for="new_board_color">{{$.locale.Tr "repo.projects.column.color"}}</label>
												<div class="color picker column">
													<input class="color-picker" maxlength="7" placeholder="#c320f6" id="new_board_color" name="color" value="{{.Color}}">
													<div class="column precolors">
														{{template "repo/issue/label_precolors"}}
													</div>
												</div>
											</div>

											<div class="text right actions">
												<div class="ui cancel button">{{$.locale.Tr "settings.cancel"}}</div>
												<button data-url="{{$.RepoLink}}/projects/{{$.Project.ID}}/{{.ID}}" class="ui primary button">{{$.locale.Tr "repo.projects.column.edit"}}</button>
											</div>
										</form>
									</div>
								</div>

								<div class="ui basic modal" id="set-default-project-board-modal-{{.ID}}">
									<div class="ui icon header">
										{{$.locale.Tr "repo.projects.column.set_default"}}
									</div>
									<div class="content center">
										<label>
											{{$.locale.Tr "repo.projects.column.set_default_desc"}}
										</label>
									</div>
									<div class="text right actions">
										<div class="ui cancel button">{{$.locale.Tr "settings.cancel"}}</div>
										<button class="ui primary button set-default-project-board" data-url="{{$.RepoLink}}/projects/{{$.Project.ID}}/{{.ID}}/default">{{$.locale.Tr "repo.projects.column.set_default"}}</button>
									</div>
								</div>

								<div class="ui basic modal" id="delete-board-modal-{{.ID}}">
									<div class="ui icon header">
										{{$.locale.Tr "repo.projects.column.delete"}}
									</div>
									<div class="content center">
										<label>
											{{$.locale.Tr "repo.projects.column.deletion_desc"}}
										</label>
									</div>
									<div class="text right actions">
										<div class="ui cancel button">{{$.locale.Tr "settings.cancel"}}</div>
										<button class="ui red button delete-project-board" data-url="{{$.RepoLink}}/projects/{{$.Project.ID}}/{{.ID}}">{{$.locale.Tr "repo.projects.column.delete"}}</button>
									</div>
								</div>
							</div>
						</div>
					{{end}}
				</div>
				<div class="ui divider"></div>

				<div class="ui cards board" data-url="{{$.RepoLink}}/projects/{{$.Project.ID}}/{{.ID}}" data-project="{{$.Project.ID}}" data-board="{{.ID}}" id="board_{{.ID}}">

					{{range (index $.IssuesMap .ID)}}

					<!-- start issue card -->
					<div class="card board-card" data-issue="{{.ID}}">
						{{if eq $.Project.CardType 1}}{{/* Images and Text*/}}
							<div class="card-attachment-images">
								{{range (index $.issuesAttachmentMap .ID)}}
									<img src="{{.DownloadURL}}" alt="{{.Name}}" />
								{{end}}
							</div>
						{{end}}
						<div class="content gt-p-0">
							<div class="header">
								<span class="gt-dif gt-ac gt-vm {{if .IsClosed}}red{{else}}green{{end}}">
									{{if .IsPull}}
										{{if .PullRequest.HasMerged}}
											{{svg "octicon-git-merge" 16 "text purple"}}
										{{else}}
											{{if .IsClosed}}
												{{svg "octicon-git-pull-request" 16 "text red"}}
											{{else}}
												{{svg "octicon-git-pull-request" 16 "text green"}}
											{{end}}
										{{end}}
									{{else}}
										{{if .IsClosed}}
											{{svg "octicon-issue-closed" 16 "text red"}}
										{{else}}
											{{svg "octicon-issue-opened" 16 "text green"}}
										{{end}}
									{{end}}
								</span>
								<a class="project-board-title gt-vm" href="{{.Link}}">
									{{.Title}}
								</a>
							</div>
							<div class="meta gt-my-2">
								<span class="text light grey">
									#{{.Index}}
									{{$timeStr := TimeSinceUnix .GetLastEventTimestamp $.locale}}
									{{if .OriginalAuthor}}
										{{$.locale.Tr .GetLastEventLabelFake $timeStr (.OriginalAuthor|Escape) | Safe}}
									{{else if gt .Poster.ID 0}}
										{{$.locale.Tr .GetLastEventLabel $timeStr (.Poster.HomeLink|Escape) (.Poster.GetDisplayName | Escape) | Safe}}
									{{else}}
										{{$.locale.Tr .GetLastEventLabelFake $timeStr (.Poster.GetDisplayName | Escape) | Safe}}
									{{end}}
								</span>
							</div>
							{{- if .MilestoneID}}
							<div class="meta gt-my-2">
								<a class="milestone" href="{{$.RepoLink}}/milestone/{{.MilestoneID}}">
									{{svg "octicon-milestone" 16 "gt-mr-2 gt-vm"}}
									<span class="gt-vm">{{.Milestone.Name}}</span>
								</a>
							</div>
							{{- end}}
							{{- range index $.LinkedPRs .ID}}
							<div class="meta gt-my-2">
								<a href="{{$.RepoLink}}/pulls/{{.Index}}">
									<span class="gt-m-0 {{if .PullRequest.HasMerged}}purple{{else if .IsClosed}}red{{else}}green{{end}}">{{svg "octicon-git-merge" 16 "gt-mr-2 gt-vm"}}</span>
									<span class="gt-vm">{{.Title}} <span class="text light grey">#{{.Index}}</span></span>
								</a>
							</div>
							{{- end}}
						</div>

						{{if or .Labels .Assignees}}
						<div class="extra content labels-list gt-p-0 gt-pt-2">
							{{range .Labels}}
								<a target="_blank" href="{{$.RepoLink}}/issues?labels={{.ID}}">{{RenderLabel .}}</a>
							{{end}}
							<div class="right floated">
								{{range .Assignees}}
									<a class="tooltip" target="_blank" href="{{.HomeLink}}" data-content="{{$.locale.Tr "repo.projects.column.assigned_to"}} {{.Name}}">{{avatar $.Context . 28 "mini gt-mr-3"}}</a>
								{{end}}
							</div>
						</div>
						{{end}}
					</div>
					<!-- stop issue card -->

					{{end}}
				</div>
			</div>
			{{end}}
		</div>

	</div>

</div>

{{if or .CanWriteIssues .CanWritePulls}}
	<div class="ui small basic delete modal">
		<div class="ui icon header">
			{{svg "octicon-trash"}}
			{{.locale.Tr "repo.projects.deletion"}}
		</div>
		<div class="content">
			<p>{{.locale.Tr "repo.projects.deletion_desc"}}</p>
		</div>
		<div class="actions">
			<div class="ui red basic inverted cancel button">
				<i class="remove icon"></i>
				{{.locale.Tr "modal.no"}}
			</div>
			<div class="ui green basic inverted ok button">
				<i class="checkmark icon"></i>
				{{.locale.Tr "modal.yes"}}
			</div>
		</div>
	</div>
{{end}}

{{template "base/footer" .}}