@(target: String,
  issues: List[gitbucket.core.service.IssuesService.IssueInfo],
  page: Int,
  openCount: Int,
  closedCount: Int,
  condition: gitbucket.core.service.IssuesService.IssueSearchCondition,
  collaborators: List[String] = Nil,
  milestones: List[gitbucket.core.model.Milestone] = Nil,
  labels: List[gitbucket.core.model.Label] = Nil,
  repository: Option[gitbucket.core.service.RepositoryService.RepositoryInfo] = None,
  hasWritePermission: Boolean = false)(implicit context: gitbucket.core.controller.Context)
@import context._
@import gitbucket.core.view.helpers._
@import gitbucket.core.service.IssuesService.IssueInfo
<br>
@if(condition.nonEmpty){
  <div>
    <a href="@gitbucket.core.service.IssuesService.IssueSearchCondition().toURL" class="header-link">
      <i class="octicon octicon-x" ></i>
      <span class="strong">Clear current search query, filters, and sorts</span>
    </a>
  </div>
}
<table class="table table-bordered table-hover table-issues">
  <tr>
    <th style="background-color: #eee;">
      <input type="checkbox"/>
      <span class="small">
        <a class="button-link@if(condition.state == "open"){ selected}" href="@condition.copy(state = "open").toURL">
          <i class="octicon octicon-issue-opened @(if(condition.state == "open"){"active"})"></i>
          @openCount Open
        </a>&nbsp;&nbsp;
        <a class="button-link@if(condition.state == "closed"){ selected}" href="@condition.copy(state = "closed").toURL">
          <i class="octicon octicon-check @(if(condition.state == "closed"){"active"})"></i>
          @closedCount Closed
        </a>
      </span>
      <div class="pull-right" id="table-issues-control">
        @helper.html.dropdown("Author", flat = true) {
          @collaborators.map { collaborator =>
            <li>
              <a href="@condition.copy(author = (if(condition.author == Some(collaborator)) None else Some(collaborator))).toURL">
                @helper.html.checkicon(condition.author == Some(collaborator))
                @avatar(collaborator, 20) @collaborator
              </a>
            </li>
          }
        }
        @helper.html.dropdown("Label", flat = true) {
          @labels.map { label =>
            <li>
              <a href="@condition.copy(labels = (if(condition.labels.contains(label.labelName)) condition.labels - label.labelName else condition.labels + label.labelName)).toURL">
                @helper.html.checkicon(condition.labels.contains(label.labelName))
                <span style="background-color: #@label.color;" class="label-color">&nbsp;&nbsp;</span>
                @label.labelName
              </a>
            </li>
          }
        }
        @helper.html.dropdown("Milestone", flat = true) {
          <li>
            <a href="@condition.copy(milestone = Some(None)).toURL">
              @helper.html.checkicon(condition.milestone == Some(None)) Issues with no milestone
            </a>
          </li>
          @milestones.filter(_.closedDate.isEmpty).map { milestone =>
            <li>
              <a href="@condition.copy(milestone = Some(Some(milestone.title))).toURL">
                @helper.html.checkicon(condition.milestone == Some(Some(milestone.title))) @milestone.title
              </a>
            </li>
          }
        }
        @helper.html.dropdown("Assignee", flat = true) {
          @collaborators.map { collaborator =>
            <li>
              <a href="@condition.copy(assigned = Some(collaborator)).toURL">
                @helper.html.checkicon(condition.assigned == Some(collaborator))
                @avatar(collaborator, 20) @collaborator
              </a>
            </li>
          }
        }
        @helper.html.dropdown("Sort", flat = true){
          <li>
            <a href="@condition.copy(sort="created",  direction="desc").toURL">
            @helper.html.checkicon(condition.sort == "created"  && condition.direction == "desc") Newest
            </a>
          </li>
          <li>
            <a href="@condition.copy(sort="created",  direction="asc" ).toURL">
            @helper.html.checkicon(condition.sort == "created"  && condition.direction == "asc") Oldest
            </a>
          </li>
          <li>
            <a href="@condition.copy(sort="comments", direction="desc").toURL">
            @helper.html.checkicon(condition.sort == "comments"  && condition.direction == "desc") Most commented
            </a>
          </li>
          <li>
            <a href="@condition.copy(sort="comments", direction="asc" ).toURL">
            @helper.html.checkicon(condition.sort == "comments"  && condition.direction == "asc") Least commented
            </a>
          </li>
          <li>
            <a href="@condition.copy(sort="updated",  direction="desc").toURL">
            @helper.html.checkicon(condition.sort == "updated"  && condition.direction == "desc") Recently updated
            </a>
          </li>
          <li>
            <a href="@condition.copy(sort="updated",  direction="asc" ).toURL">
            @helper.html.checkicon(condition.sort == "updated"  && condition.direction == "asc") Least recently updated
            </a>
          </li>
        }
      </div>
      @if(hasWritePermission){
        <div class="pull-right" id="table-issues-batchedit">
          @helper.html.dropdown("Mark as", flat = true) {
            <li><a href="javascript:void(0);" class="toggle-state" data-id="open">Open</a></li>
            <li><a href="javascript:void(0);" class="toggle-state" data-id="close">Close</a></li>
          }
          @helper.html.dropdown("Label", flat = true) {
            @labels.map { label =>
              <li>
                <a href="javascript:void(0);" class="toggle-label" data-id="@label.labelId">
                  <i class="icon-white"></i>
                  <span class="label" style="background-color: #@label.color;">&nbsp;</span>
                  @label.labelName
                </a>
              </li>
            }
          }
          @helper.html.dropdown("Milestone", flat = true) {
            <li><a href="javascript:void(0);" class="toggle-milestone" data-id="">No milestone</a></li>
            @milestones.filter(_.closedDate.isEmpty).map { milestone =>
              <li><a href="javascript:void(0);" class="toggle-milestone" data-id="@milestone.milestoneId">@milestone.title</a></li>
            }
          }
          @helper.html.dropdown("Assignee", flat = true) {
            <li><a href="javascript:void(0);" class="toggle-assign" data-name=""><i class="octicon octicon-x"></i> Clear assignee</a></li>
            @collaborators.map { collaborator =>
              <li><a href="javascript:void(0);" class="toggle-assign" data-name="@collaborator"><i class="icon-white"></i>@avatar(collaborator, 20) @collaborator</a></li>
            }
          }
        </div>
      }
    </th>
  </tr>
  @if(issues.isEmpty){
    <tr>
      <td style="padding: 20px; background-color: #eee; text-align: center;">
        @if(target == "issues"){
          No issues to show.
        } else {
          No pull requests to show.
        }
        @if(condition.labels.nonEmpty || condition.milestone.isDefined){
          <a href="@condition.copy(labels = Set.empty, milestone = None).toURL">Clear active filters.</a>
        } else {
          @if(repository.isDefined){
            @if(target == "issues"){
              <a href="@url(repository.get)/issues/new">Create a new issue.</a>
            } else {
              <a href="@url(repository.get)/compare">Create a new pull request.</a>
            }
          }
        }
      </td>
    </tr>
  }
  @issues.map { case IssueInfo(issue, labels, milestone, commentCount, commitStatus) =>
    <tr>
      <td style="padding-top: 15px; padding-bottom: 15px;">
        @if(hasWritePermission){
          <input type="checkbox" value="@issue.issueId"/>
        }
        <i class="octicon octicon-issue-@(if(issue.closed) "closed" else "opened")" style="margin-right: 3px;"></i>
        @if(repository.isEmpty){
          <a href="@path/@issue.userName/@issue.repositoryName">@issue.repositoryName</a>&nbsp;&#xFF65;
        }
        @if(target == "issues"){
          <a href="@path/@issue.userName/@issue.repositoryName/issues/@issue.issueId" class="issue-title">@issue.title</a>
        } else {
          <a href="@path/@issue.userName/@issue.repositoryName/pull/@issue.issueId" class="issue-title">@issue.title</a>
        }
        @commitstatus(issue, commitStatus)
        @labels.map { label =>
          <span class="label-color small" style="background-color: #@label.color; color: #@label.fontColor; padding-left: 4px; padding-right: 4px">@label.labelName</span>
        }
        <span class="pull-right small">
          @issue.assignedUserName.map { userName =>
            @avatar(userName, 20, tooltip = true)
          }
          @if(commentCount > 0){
            <a href="@path/@issue.userName/@issue.repositoryName/issues/@issue.issueId" class="issue-comment-count">
              <i class="octicon octicon-comment active"></i> @commentCount
            </a>
          } else {
            <a href="@path/@issue.userName/@issue.repositoryName/issues/@issue.issueId" class="issue-comment-count" style="color: silver;">
              <i class="octicon octicon-comment"></i> @commentCount
            </a>
          }
        </span>
        <div class="small muted" style="margin-left: 40px; margin-top: 5px;">
          #@issue.issueId opened  @helper.html.datetimeago(issue.registeredDate) by @user(issue.openedUserName, styleClass="username")
          @milestone.map { milestone =>
            <span style="margin: 20px;"><a href="@condition.copy(milestone = Some(Some(milestone))).toURL" class="username"><i class="octicon octicon-milestone"></i>
@milestone</a></span>
          }
        </div>
      </td>
    </tr>
  }
</table>
<div class="pull-right">
  @helper.html.paginator(page, (if(condition.state == "open") openCount else closedCount), gitbucket.core.service.IssuesService.IssueLimit, 10, condition.toURL)
</div>