@(issues: List[model.Issue], page: Int, labels: List[model.Label], milestones: List[model.Milestone],
  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, isWritable: Boolean)(implicit context: app.Context)
@import context._
@import view.helpers._
@html.main("Issues - " + repository.owner + "/" + repository.name){
  @html.header("issues", repository)
  @issuestab("issues", repository)
  <div class="row-fluid">
    <div class="span3">
      <ul class="nav nav-pills nav-stacked">
        <li@if(filter == "all"){ class="active"}>
          <a href="@path/@repository.owner/@repository.name/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="@path/@repository.owner/@repository.name/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="@path/@repository.owner/@repository.name/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){
        No milestone selected
      } else {
        <span class="description">Milestone:</span> @milestones.find(_.milestoneId == condition.milestoneId.get).map(_.title)
      }
      <div class="btn-group">
        <button class="btn dropdown-toggle" data-toggle="dropdown">
          <i class="icon-cog"></i>
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          @milestones.map { milestone =>
            <li><a href="@condition.copy(milestoneId = Some(milestone.milestoneId)).toURL">@milestone.title</a></li>
          }
        </ul>
      </div>
      <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(isWritable){
        <hr/>
        <input type="button" class="btn btn-block" id="manageLabel" data-toggle="button" value="Manage Labels"/>
        <br/>
        <strong>New label</strong>
        @labeledit(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>
      }
      @defining(if(condition.state == "open") openCount else closedCount){ count =>
        @if(count > service.IssuesService.IssueLimit){
          <div class="pagination pull-right">
            <ul>
              @if(page == 1){
                <li class="disabled"><span>&#9664;</span></li>
              } else {
                <li><a href="@condition.toURL&page=@(page - 1)">&#9664;</a></li>
              }
              @for(i <- 1 to (count - 1) / service.IssuesService.IssueLimit + 1){
                @if(i == page){
                  <li class="active"><span>@i</span></li>
                } else {
                  <li><a href="@condition.toURL&page=@i">@i</a></li>
                }
              }
              @*
              <li class="active"><span>1</span></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><span>&hellip;</span></li>
              <li><a href="#">7</a></li>
              *@
              @if(page == (count - 1) / service.IssuesService.IssueLimit + 1){
                <li class="disabled"><span>&#9654;</span></li>
              } else {
                <li><a href="@condition.toURL&page=@(page + 1)">&#9654;</a></li>
              }
            </ul>
          </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">Newest</a></li>
          <li><a href="@condition.copy(sort="created",  direction="asc" ).toURL">Oldest</a></li>
          <li><a href="@condition.copy(sort="comments", direction="desc").toURL">Most commented</a></li>
          <li><a href="@condition.copy(sort="comments", direction="asc" ).toURL">Least commented</a></li>
          <li><a href="@condition.copy(sort="updated",  direction="desc").toURL">Recently updated</a></li>
          <li><a href="@condition.copy(sort="updated",  direction="asc" ).toURL">Least recently updated</a></li>
        </ul>
      </div>
      <table class="table table-bordered table-hover">
      @issues.map { issue =>
        <tr>
          <td>
            <a href="@path/@repository.owner/@repository.name/issues/@issue.issueId">@issue.title</a>
            <span class="pull-right muted">#@issue.issueId</span>
            <div class="small muted">
              Opened by <a href="@path/@repository.owner">@issue.openedUserName</a> @datetime(issue.registeredDate)
            </div>
          </td>
        </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 {
              <a href="@path/@repository.owner/@repository.name/issues/new">Create a new issue.</a>
            }
          </td>
        </tr>
      }
      </table>
    </div>
  </div>
}
@if(isWritable){
<script>
$(function(){
  $('#manageLabel').click(function(){
    if($(this).data('toggle-state')){
      location.href = '@path/@repository.owner/@repository.name/issues';
    } else {
      $(this).data('toggle-state', 'on');
      $.get('@path/@repository.owner/@repository.name/issues/label/edit', function(data){
        var parent = $('#label-list').parent();
        $('#label-list').remove();
        parent.append(data);
      });
    }
  });
});
</script>
}
<style type="text/css">
ul.label-list {
  list-style-type: none;
  padding-left: 0px;
  margin-left: 0px;
  font-size: 90%;
}

ul.label-list a {
  padding-left: 6px;
  padding-top: 4px;
  padding-bottom: 4px;
  margin-bottom: 8px;
  color: #444;
}

span.label-color {
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}

a#clear-filter {
  display: block;
  color: #444;
  font-weight: bold;
  margin-bottom: 10px;
}
</style>