{{template "base/head" .}}
<div class="repository">
	{{template "repo/header" .}}
	<div class="ui container">
		<div class="ui three column stackable grid">
			<div class="column">
				{{template "repo/issue/navbar" .}}
			</div>
			<div class="column center aligned">
				{{template "repo/issue/search" .}}
			</div>
			<div class="column right aligned">
				{{if and .CanWriteProjects (not .Repository.IsArchived) .PageIsProjects}}
					<a class="ui green button show-modal item" data-modal="#new-board-item">{{.i18n.Tr "new_project_board"}}</a>
				{{end}}
				<div class="ui small modal" id="new-board-item">
					<div class="header">
						{{$.i18n.Tr "repo.projects.board.new"}}
					</div>
					<div class="content">
						<form class="ui form">
							<div class="required field">
								<label for="new_board">{{$.i18n.Tr "repo.projects.board.new_title"}}</label>
								<input class="new-board" id="new_board" name="title" required>
							</div>

							<div class="text right actions">
								<div class="ui cancel button">{{$.i18n.Tr "settings.cancel"}}</div>
								<button data-url="{{$.RepoLink}}/projects/{{$.Project.ID}}" class="ui green button" id="new_board_submit">{{$.i18n.Tr "repo.projects.board.new_submit"}}</button>
							</div>
						</form>
					</div>
				</div>
			</div>
		</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">
				<div class="board-column-header">
					<div class="ui large label board-label">{{.Title}}</div>
					{{if and $.CanWriteProjects (not $.Repository.IsArchived) $.PageIsProjects (ne .ID 0)}}
						<div class="ui dropdown jump item poping up right" data-variation="tiny inverted">
							<span class="ui text">
								<img class="ui tiny avatar image" width="24" height="24">
								<span class="fitted not-mobile" tabindex="-1">{{svg "octicon-kebab-horizontal" 24}}</span>
							</span>
							<div class="menu user-menu" tabindex="-1">
								<a class="item show-modal button" data-modal="#edit-project-board-modal-{{.ID}}">
									{{svg "octicon-pencil"}}
									{{$.i18n.Tr "repo.projects.board.edit"}}
								</a>
								<a class="item show-modal button" data-modal="#delete-board-modal-{{.ID}}">
									{{svg "octicon-trashcan"}}
									{{$.i18n.Tr "repo.projects.board.delete"}}
								</a>

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

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

								<div class="ui basic modal" id="delete-board-modal-{{.ID}}">
									<div class="ui icon header">
										{{$.i18n.Tr "repo.projects.board.delete"}}
									</div>
									<div class="content center">
										<input type="hidden" name="action" value="delete">
										<div class="field">
											<label>
												{{$.i18n.Tr "repo.projects.board.deletion_desc"}}
											</label>
										</div>
									</div>
									<form class="ui form" method="post">
										<div class="text right actions">
											<div class="ui cancel button">{{$.i18n.Tr "settings.cancel"}}</div>
											<button class="ui red button delete-project-board" data-url="{{$.RepoLink}}/projects/{{$.Project.ID}}/{{.ID}}">{{$.i18n.Tr "repo.projects.board.delete"}}</button>
										</div>
									</form>
								</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 .Issues }}

					<!-- start issue card -->
					<div class="card board-card" data-issue="{{.ID}}">
						<div class="content">
							<div class="header">
								<span class="{{if .IsClosed}}red{{else}}green{{end}}">
									{{if .IsPull}}{{svg "octicon-git-merge"}}
									{{else if .IsClosed}}{{svg "octicon-issue-closed"}}
									{{else}}{{svg "octicon-issue-opened"}}
									{{end}}
								</span>
								<a class="project-board-title" href="{{$.RepoLink}}/issues/{{.Index}}">#{{.Index}} {{.Title}}</a>
							</div>
							<div class="meta">
								{{ if .MilestoneID }}
								<a class="milestone" href="{{$.RepoLink}}/milestone/{{ .MilestoneID}}">
									{{svg "octicon-milestone"}} {{ .Milestone.Name }}
								</a>
								{{ end }}
							</div>
						</div>
						<div class="extra content">
							{{ range .Labels }}
							<a class="ui label" href="{{$.RepoLink}}/issues?labels={{.ID}}" style="color: {{.ForegroundColor}}; background-color: {{.Color}}; margin-bottom: 3px;" title="{{.Description | RenderEmojiPlain}}">{{.Name | RenderEmoji}}</a>
							{{ end }}
						</div>
					</div>
					<!-- stop issue card -->

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

	</div>

</div>

{{template "base/footer" .}}