@(issues: List[(model.Issue, List[model.Label], Int)],
  page: Int,
  collaborators: List[String],
  milestones: List[model.Milestone],
  labels: List[model.Label],
  openCount: Int,
  closedCount: Int,
  allCount: Int,
  assignedCount: Option[Int],
  createdByCount: Option[Int],
  labelCounts: Map[String, Int],
  condition: service.IssuesService.IssueSearchCondition,
  filter: String,
  repository: service.RepositoryService.RepositoryInfo,
  hasWritePermission: Boolean)(implicit context: app.Context)
@import context._
@import view.helpers._
@html.main(s"Issues - ${repository.owner}/${repository.name}", Some(repository)){
  @html.header("issues", repository)
  @tab("issues", repository)
  <div class="row-fluid">
    <div class="span3">
      <ul class="nav nav-pills nav-stacked">
        <li@if(filter == "all"){ class="active"}>
          <a href="@url(repository)/issues@condition.toURL">
            <span class="count-right">@allCount</span>
            Everyone's Issues
          </a>
        </li>
        @if(loginAccount.isDefined){
        <li@if(filter == "assigned"){ class="active"}>
          <a href="@url(repository)/issues/assigned/@loginAccount.map(_.userName)@condition.toURL">
            <span class="count-right">@assignedCount</span>
            Assigned to you
          </a>
        </li>
        <li@if(filter == "created_by"){ class="active"}>
          <a href="@url(repository)/issues/created_by/@loginAccount.map(_.userName)@condition.toURL">
            <span class="count-right">@createdByCount</span>
            Created by you
          </a>
        </li>
        }
      </ul>
      <hr/>
      @if(condition.milestoneId.isEmpty){
        <span class="muted small">No milestone selected</span>
      } else {
        @if(condition.milestoneId.get.isEmpty){
          <span class="muted small">Issues with no milestone</span>
        } else {
          <span class="muted small">Milestone:</span> @milestones.find(_.milestoneId == condition.milestoneId.get.get).map(_.title)
        }
      }
      @helper.html.dropdown() {
        @if(condition.milestoneId.isDefined){
          <li>
            <a href="@condition.copy(milestoneId = None).toURL">
              <i class="icon-remove-circle"></i> Clear milestone filter
            </a>
          </li>
        }
        <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>
        }
      }
      @if(condition.milestoneId.isDefined && condition.milestoneId.get.isDefined){
        @milestones.find(_.milestoneId == condition.milestoneId.get.get).map { milestone =>
          <div class="milestone-progress" style="margin-top: 8px;">
            @if(closedCount > 0){
              <span class="milestone-progress" style="width: @((closedCount.toDouble / (openCount + closedCount).toDouble * 100).toInt)%;"></span>
            }
          </div>
          <span class="muted small">@openCount open issues</span>
          @if(milestone.closedDate.isDefined){
            @milestone.closedDate.map { closedDate =>
              <span class="small">Closed in @date(closedDate)</span>
            }
          } else {
            @milestone.dueDate.map { dueDate =>
              @if(isPast(dueDate)){
                <img src="@assets/common/images/alert.png"/><span class="small milestone-alert">Due in @date(dueDate)</span>
              } else {
                <span class="small">Due in @date(dueDate)</span>
              }
            }
          }
        }
      }
      <hr/>
      <strong>Labels</strong>
      <div>
        <div id="label-list">
          <ul class="label-list nav nav-pills nav-stacked">
            @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"
                   @if(condition.labels.contains(label.labelName)){style="background-color: #@label.color; color: #@label.fontColor;"}>
                  <span class="count-right">@labelCounts.getOrElse(label.labelName, 0)</span>
                  <span style="background-color: #@label.color;" class="label-color">&nbsp;&nbsp;</span>
                  @label.labelName
                </a>
              </li>
             }
          </ul>
        </div>
      </div>
      @if(hasWritePermission){
        <hr/>
        <input type="button" class="btn btn-block" id="manageLabel" data-toggle="button" value="Manage Labels"/>
        <br/>
        <strong>New label</strong>
        @_root_.issues.labels.html.edit(None, repository)
      }
    </div>
    <div class="span9">
      @if(condition.labels.nonEmpty || condition.milestoneId.isDefined){
        <a href="@condition.copy(labels = Set.empty, milestoneId = None).toURL" id="clear-filter">
          <i class="icon-remove-circle"></i> Clear milestone and label filters
        </a>
      }
      <div class="pull-right">
        @helper.html.paginator(page, (if(condition.state == "open") openCount else closedCount), service.IssuesService.IssueLimit, 7, condition.toURL)
      </div>
      <div class="btn-group">
        <a class="btn@if(condition.state == "open"){ active}" href="@condition.copy(state = "open").toURL">@openCount Open</a>
        <a class="btn@if(condition.state == "closed"){ active}" href="@condition.copy(state = "closed").toURL">@closedCount Closed</a>
      </div>
      <div class="btn-group">
        <button class="btn dropdown-toggle" data-toggle="dropdown">
          Sort:
          <strong>
            @if(condition.sort == "created"  && condition.direction == "desc"){ Newest }
            @if(condition.sort == "created"  && condition.direction == "asc" ){ Oldest }
            @if(condition.sort == "comments" && condition.direction == "desc"){ Most commented }
            @if(condition.sort == "comments" && condition.direction == "asc" ){ Least commented }
            @if(condition.sort == "updated"  && condition.direction == "desc"){ Recently updated }
            @if(condition.sort == "updated"  && condition.direction == "asc" ){ Least recently updated }
          </strong>
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <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>
        </ul>
      </div>
      <table class="table table-bordered table-hover table-issues">
      @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 {
              <a href="@url(repository)/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" id="state"><strong>@{if(condition.state == "open") "Close" else "Reopen"}</strong></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>
              <li class="divider"></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>
              <li class="divider"></li>
              @milestones.map { milestone =>
                <li><a href="javascript:void(0);" class="toggle-milestone" data-id="@milestone.milestoneId"><i class="icon-white"></i> @milestone.title</a></li>
              }
            }
          </td>
        </tr>
        }
      }
      @issues.map { case (issue, labels, commentCount) =>
        <tr>
          <td>
            @if(hasWritePermission){
            <label class="checkbox" style="cursor: default;">
              <input type="checkbox" value="@issue.issueId"/>
            }
              <a href="@url(repository)/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)
                }
                #@issue.issueId
              </span>
              <div class="small muted">
                Opened by <a href="@url(issue.openedUserName)" class="username">@issue.openedUserName</a> @datetime(issue.registeredDate)&nbsp;
                @if(commentCount > 0){
                  <i class="icon-comment"></i><a href="@url(repository)/issues/@issue.issueId" class="issue-comment-count">@commentCount @plural(commentCount, "comment")</a>
                }
              </div>
            </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>
    </div>
  </div>
  @if(hasWritePermission){
    <form id="batcheditForm" method="POST">
      <input type="hidden" name="value"/>
      <input type="hidden" name="checked"/>
    </form>
  }
}
@if(hasWritePermission){
<script>
$(function(){
  $('#manageLabel').click(function(){
    if($(this).data('toggle-state')){
      location.href = '@url(repository)/issues';
    } else {
      $(this).data('toggle-state', 'on');
      $.get('@url(repository)/issues/label/edit', function(data){
        $('#label-list').parent().empty().html(data);
      });
    }
  });

  $('.table-issues input[type=checkbox]').change(function(){
    $('.table-issues button').prop('disabled',
            !$('.table-issues input[type=checkbox]').filter(':checked').length);
  }).filter(':first').change();

  var submitBatchEdit = function(action, value) {
    var checked = $('.table-issues input[type=checkbox]').filter(':checked').map(function(){ return this.value; }).get().join();
    var form = $('#batcheditForm');
    form.find('input[name=value]').val(value);
    form.find('input[name=checked]').val(checked);
    form.attr('action', action);
    form.submit();
  };

  $('#state').click(function(){
    submitBatchEdit('@url(repository)/issues/batchedit/state', $(this).text().toLowerCase());
  });
  $('a.toggle-label').click(function(){
    submitBatchEdit('@url(repository)/issues/batchedit/label', $(this).data('id'));
  });
  $('a.toggle-assign').click(function(){
    submitBatchEdit('@url(repository)/issues/batchedit/assign', $(this).data('name'));
  });
  $('a.toggle-milestone').click(function(){
    submitBatchEdit('@url(repository)/issues/batchedit/milestone', $(this).data('id'));
  });
});
</script>
}