@(issues: List[model.Issue], labels: List[model.Label], repository: service.RepositoryService.RepositoryInfo)(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 class="active"><a href="#">Everyone's Issues</a></li>
        <li><a href="#">Assigned to you</a></li>
        <li><a href="#">Created by you</a></li>
      </ul>
      <hr/>
      No milestone selected
      <hr/>
      <strong>Labels</strong>
      <ul class="label-list">
        @labels.map { label =>
          <li>
            <span style="float: right; font-weight: bold;">0</span>
            <span style="background-color: #@label.color;" class="label-color">&nbsp;</span>
            @label.labelName
          </li>
        }
      </ul>
      <hr/>
      <a class="btn btn-block" href="#">Manage Labels</a>
      <br/>
      <strong>New label</strong>
      <form method="POST" action="@path/@repository.owner/@repository.name/issues/label/new" validate="true">
        <input type="text" name="labelName" value="" placeholder="New label name"/>
        <div class="input-append color bscp" data-color="#ff0000" data-color-format="hex" id="cp3">
          <input type="text" class="span3" name="color" value="" readonly style="width: 100%;">
          <span class="add-on"><i style="background-color: #ff0000;"></i></span>
        </div>
        <input type="submit" class="btn" value="Create"/>
      </form>
    </div>
    <div class="span9">
      <div class="pagination pull-right">
        <ul>
          <li class="disabled"><span>&#9664;</span></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>
          <li><a href="#">&#9654;</a></li>
        </ul>
      </div>
      <div class="btn-group">
        <a class="btn active" href="#">1 Open</a>
        <a class="btn" href="#">1 Closed</a>
      </div>
      <div class="btn-group">
        <button class="btn dropdown-toggle" data-toggle="dropdown">
          Sort: <strong>Newest</strong>
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Newest</a></li>
          <li><a href="#">Oldest</a></li>
          <li><a href="#">Most commented</a></li>
          <li><a href="#">Least commented</a></li>
          <li><a href="#">Recently updated</a></li>
          <li><a href="#">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>
      }
      </table>
    </div>
  </div>
}
<script>
$(function(){
  $('#cp3').colorpicker();
});
</script>
<style type="text/css">
ul.label-list {
  list-style-type: none;
  padding-left: 0px;
  margin-left: 0px;
  font-size: 90%;
  color: #444;
}

ul.label-list li {
  margin-bottom: 4px;
}

span.label-color {
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}
</style>