@(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 id="label-list" class="label-list nav nav-pills nav-stacked">
        @labels.map { label =>
          <li>
            <a href="#">
              <span class="count-right">0</span>
              <span style="background-color: #@label.color;" class="label-color">&nbsp;&nbsp;</span>
              @label.labelName
            </a>
          </li>
        }
      </ul>
      <ul id="label-edit" class="label-list nav nav-pills nav-stacked" style="display: none;">
        @labels.map { label =>
        <li style="border: 1px solid white;">
          <a href="javascript:void(0);" class="label-edit-link" labelId="@label.labelId" labelName="@label.labelName" color="#@label.color">
            <span class="count-right"><i class="icon-remove-circle" onclick="alert('delete!');"></i></span>
            <span style="background-color: #@label.color;" class="label-color">&nbsp;&nbsp;</span>
            @label.labelName
          </a>
        </li>
        }
        @*
        <form id="editLabelForm" style="display: none; margin-bottom: 8px;">
          <span id="error-editLabelName" class="error"></span>
          <input type="text" name="editLabelName" id="editLabelName" value="" style="width: 180px; margin-left: 8px; margin-bottom: 0px;"/>
          <span id="error-editColor" class="error"></span>
          <div class="input-append color bscp" data-color="#888888" data-color-format="hex" id="editColor" style="width: 180px; margin-bottom: 0px;">
            <input type="text" class="span3" name="editColor" value="" readonly style="width: 168px; margin-left: 8px;"/>
            <span class="add-on"><i style="background-color: #888888;"></i></span>
          </div>
          <input type="hidden" name="editLabelId"/>
          <input type="submit" class="btn label-submit" value="Save" style="margin-left: 8px; margin-bottom: 0px;"/>
        </form>
        *@
      </ul>
      <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">
      <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(){
  $('#editColor').colorpicker();

  $('#manageLabel').click(function(){
    if($(this).data('toggle-state')){
      location.href = '@path/@repository.owner/@repository.name/issues';
    } else {
      $(this).data('toggle-state', 'on');
      $('#label-list').hide();
      $('#label-edit').show();
    }
  });

  $('a.label-edit-link').click(function(e){
    e.stopPropagation();
    if($('input[name=editLabelId]').val() != $(this).attr('labelId')){
      showEditLabelForm(this);
    } else {
      hideEditLabelForm();
    }
  });

  $('#editLabelForm').click(function(e){
    e.stopPropagation();
  });

  $('body').click(function(){
    hideEditLabelForm();
  });

  function showEditLabelForm(element){
    var form = $('#editLabelForm');
    form.detach();
    form.find('input[name=editLabelName]').val($(element).attr('labelName'));
    //form.find('input[name=editColor]').colorpicker('setValue', $(element).attr('color'));
    form.find('input[name=editLabelId]').val($(element).attr('labelId'));
    $(element).parent().append(form);
    form.show();
    $('ul#label-edit li').css('border', '1px solid white');
    $(element).parent().css('border', '1px solid #eee');
  }

  function hideEditLabelForm(){
    var form = $('#editLabelForm');
    form.find('input[name=editLabelId]').val('');
    form.hide();
    $('ul#label-edit li').css('border', '1px solid white');
  }
});
</script>
<style type="text/css">
ul.label-list {
  list-style-type: none;
  padding-left: 0px;
  margin-left: 0px;
  font-size: 90%;
}

ul.label-list li 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;
}
</style>