<%
  # API
  my $api = gitprep_api;
  
  # Parameters
  my $user_id = param('user');
  my $project_id = param('project');
  
  my $labels = app->dbi->model('label')->select(
    {__MY__ => '*'},
    where => {'project__user.id' => $user_id, 'project.id' => $project_id},
    append => 'order by id'
  )->all;
  
  layout 'common', title => "Labels - $user_id/$project_id";
%>

%= javascript begin
  $(document).ready(function () {
    $('.labels-new-btn').on('click', function () {
      $('.labels-create-panel').toggle();
    });

    $('.labels-create-cancel-btn').on('click', function () {
      $('.labels-create-panel').hide();
    });
    
    $('.labels-edit').on('click', function () {
      $(this).closest('li').find('.labels-display-area').hide();
      $(this).closest('li').find('.labels-edit-area').show();
    });

    $('.labels-edit-cancel-btn').on('click', function () {
      $(this).closest('li').find('.labels-display-area').show();
      $(this).closest('li').find('.labels-edit-area').hide();
    });
    
    // labels-edit-save-btn
  });
% end

%= include '/include/header';

<div class="container">
  <div class="labels-new-panel">
    <div class="labels-new-btn btn btn-success">
      New label
    </div>
  </div>
  <form class="labels-create-panel" action="<%= url_for %>" method="post" style="display:none">
    <div class="labels-create-left">
      <%= input_tag 'label-id', class => 'labels-create-label-id' %>
      <%= input_tag 'color', class => 'labels-create-label-color' %>
    </div>
    <div class="labels-create-right">
      <div class="labels-create-cancel-btn btn">
        Cancel
      </div>
      <div class="labels-create-create-btn btn btn-success">
        Create label
      </div>
    </div>
  </form>
  <ul class="labels">
    <li><%= @$labels %> labels</li>
    % for my $label (@$labels) {
      <li>
        <div class="labels-display-area">
          <div class="labels-left">
            <div class="labels-tag" style="background:<%= $label->{color} %>;">
              <i class="icon icon-tag"></i>
              <%= $label->{id} %>
            </div>
          </div>
          <div class="labels-right">
            <div class="labels-edit">
              <a href="javascript:void(0)"><i class="icon icon-edit"></i> Edit</a>
            </div>
            <div class="labels-delete">
              <a href="javascript:void(0)"><i class="icon icon-remove"></i> Delete</a>
            </div>
          </div>
        </div>
        <div class="labels-edit-area" style="display:none">
          <div class="labels-left">
            <%= input_tag 'label-id' => $label->{id}, class => 'labels-edit-label-id' %>
            <%= input_tag 'color' => $label->{color}, class => 'labels-edit-label-color' %>
          </div>
          <div class="labels-right">
            <div class="labels-edit-cancel-btn btn">
              Cancel
            </div>
            <div class="labels-edit-save-btn btn btn-success">
              Save changes
            </div>
          </div>
        </div>
      </li>
    % }
  </ul>
</div>

%= include '/include/footer';