@(issues: List[service.IssuesService.IssueInfo],
  page: Int,
  openCount: Int,
  closedCount: Int,
  condition: service.IssuesService.IssueSearchCondition,
  collaborators: List[String] = Nil,
  milestones: List[model.Milestone] = Nil,
  labels: List[model.Label] = Nil,
  repository: Option[service.RepositoryService.RepositoryInfo] = None,
  hasWritePermission: Boolean = false)(implicit context: app.Context)
@import context._
@import view.helpers._
@import service.IssuesService.IssueInfo
@if(condition.nonEmpty){
  <a href="@service.IssuesService.IssueSearchCondition().toURL">Clear current search query, filters, and sorts</a>
}
<table class="table table-bordered table-hover table-issues">
  <tr>
    <th style="background-color: #eee;">
      <input type="checkbox"/>
      <a class="button-link@if(condition.state == "open"  ){ selected}" href="@condition.copy(state = "open"  ).toURL">@openCount Open</a>
      <a class="button-link@if(condition.state == "closed"){ selected}" href="@condition.copy(state = "closed").toURL">@closedCount Closed</a>
      <div class="pull-right">
        @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(milestoneId = Some(None)).toURL">
              @helper.html.checkicon(condition.milestoneId == Some(None)) Issues with no milestone
            </a>
          </li>
          @milestones.filter(_.closedDate.isEmpty).map { milestone =>
            <li>
              <a href="@condition.copy(milestoneId = Some(Some(milestone.milestoneId))).toURL">
                @helper.html.checkicon(condition.milestoneId == Some(Some(milestone.milestoneId))) @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>
    </th>
  </tr>
  @if(issues.isEmpty){
    <tr>
      <td style="padding: 20px; background-color: #eee; text-align: center;">
        No issues to show.
        @if(condition.labels.nonEmpty || condition.milestoneId.isDefined){
          <a href="@condition.copy(labels = Set.empty, milestoneId = None).toURL">Clear active filters.</a>
        } else {
          @if(repository.isDefined){
          <a href="@url(repository.get)/issues/new">Create a new issue.</a>
          }
        }
      </td>
    </tr>
  } else {
    @*
    @if(hasWritePermission){
      <tr>
        <td style="background-color: #eee;">
          <div class="btn-group">
            <button class="btn btn-mini strong" id="state">@{if(condition.state == "open") "Close" else "Reopen"}</button>
          </div>
          @helper.html.dropdown("Label") {
            @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("Assignee") {
            <li><a href="javascript:void(0);" class="toggle-assign" data-name=""><i class="icon-remove-circle"></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>
            }
          }
          @helper.html.dropdown("Milestone") {
            <li><a href="javascript:void(0);" class="toggle-milestone" data-id=""><i class="icon-remove-circle"></i> Clear this milestone</a></li>
            @milestones.map { milestone =>
              <li>
                <a href="javascript:void(0);" class="toggle-milestone" data-id="@milestone.milestoneId">
                  <i class="icon-white"></i> @milestone.title
                  <div class="small" style="padding-left: 20px;">
                    @milestone.dueDate.map { dueDate =>
                      @if(isPast(dueDate)){
                        <img src="@assets/common/images/alert_mono.png"/>Due in @date(dueDate)
                      } else {
                        <span class="muted">Due in @date(dueDate)</span>
                      }
                    }.getOrElse {
                      <span class="muted">No due date</span>
                    }
                  </div>
                </a>
              </li>
            }
          }
        </td>
      </tr>
    }
    *@
  }
  @issues.map { case IssueInfo(issue, labels, milestone, commentCount) =>
    <tr>
      <td style="padding-top: 15px; padding-bottom: 15px;">
        @if(hasWritePermission){
          <label class="checkbox" style="cursor: default;">
          <input type="checkbox" value="@issue.issueId"/>
        }
        <img src="@assets/common/images/issue-@(if(issue.closed) "closed" else "open").png" style="margin-right: 20px;"/>
        @if(repository.isEmpty){
          <a href="@path/@issue.userName/@issue.repositoryName">@issue.repositoryName</a>&nbsp;&#xFF65;
        }
        <a href="@path/@issue.userName/@issue.repositoryName/issues/@issue.issueId" class="issue-title">@issue.title</a>
        @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 muted">
          @issue.assignedUserName.map { userName =>
            @avatar(userName, 20, tooltip = true)
          }
          <a href="@path/@issue.userName/@issue.repositoryName/issues/@issue.issueId" class="issue-comment-count"><i class="icon-comment"></i>@commentCount</a>
        </span>
        <div class="small muted" style="margin-left: 40px; margin-top: 5px;">
          #@issue.issueId opened by @user(issue.openedUserName, styleClass="username") @datetime(issue.registeredDate)
          <span style="margin: 20px;"><a href="@condition.copy(milestoneId = Some(Some(1))).toURL" class="username">@milestone</a></span>
        </div>
        @if(hasWritePermission){
          </label>
        }
      </td>
    </tr>
  }
</table>
<div class="pull-right">
  @helper.html.paginator(page, (if(condition.state == "open") openCount else closedCount), service.IssuesService.IssueLimit, 10, condition.toURL)
</div>