<%

  # API

  my $api = gitprep_api;

  # Parameters

  my $user_id = param('user');

  my $project_id = param('project');

  # Can write access

  my $session_user_id = $api->session_user_id;

  my $can_write_access = $api->can_write_access($session_user_id, $user_id, $project_id);

  my $errors;

  if (lc $self->req->method eq 'post') {

    unless ($can_write_access) {

      Carp::croak("Don't have write access");

    }

    my $op = param('op') // '';

    my $project_row_id = app->dbi->model('project')->select(

      'project.row_id',

      where => {'user.id' => $user_id, 'project.id' => $project_id}

    )->value;

    if ($op eq 'create') {

      my $id = param('label-id');

      my $color = param('color');

      my $vc = app->vc;

      my $validation = $vc->validation;

      if (!length $id) {

        $validation->add_failed(id => "Name can't be blank");

      }

      elsif (length $id > 100) {

        $validation->add_failed(id => "Name is too long");

      }

      else {

        my $label = app->dbi->model('label')->select(

          where => {

            project => $project_row_id,

            id => $id

          }

        )->one;

        if ($label) {

          $validation->add_failed(id => "Name has already been taken");

        }

      }

      if (!length $color) {

        $validation->add_failed(color => "Color can't be blank");

      }

      if ($validation->is_valid) {

        my $new_label = {

          id => $id,

          color => $color,

          project => $project_row_id

        };

        app->dbi->model('label')->insert($new_label);

        $self->redirect_to;

        return;

      }

      else {

        $errors = $validation->messages;

      }

    }

    elsif ($op eq 'api-delete') {

      my $row_id = param('row-id');

      app->dbi->model('label')->delete(where => {row_id => $row_id});

      $self->render(json => {success => 1});

      return;

    }

    elsif ($op eq 'api-update') {

      my $row_id = param('row-id');

      my $id = param('id');

      my $color = param('color');

      my $vc = app->vc;

      my $validation = $vc->validation;

      if (!length $id) {

        $validation->add_failed(id => "Name can't be blank");

      }

      elsif (length $id > 100) {

        $validation->add_failed(id => "Name is too long");

      }

      else {

        my $label = app->dbi->model('label')->select(

          where => {

            project => $project_row_id,

            id => $id

          }

        )->one;

        if ($label && $id ne $label->{id}) {

          $validation->add_failed(id => "Name has already been taken");

        }

      }

      if (!length $color) {

        $validation->add_failed(color => "Color can't be blank");

      }

      if ($validation->is_valid) {

        app->dbi->model('label')->update({id => $id, color => $color}, where => {row_id => $row_id});

        $self->render(json => {success => 1, id => $id, color => $color});

        return;

      }

      else {

        $self->render(json => {success => 0, message => $validation->messages->[0]});

        return;

      }

    }

  }

  my $labels = app->dbi->model('label')->select(

    {__MY__ => '*'},

    where => {'project__user.id' => $user_id, 'project.id' => $project_id},

    append => 'order by id'

  )->all;

  # Default color;

  my $default_color = "#" . sprintf('%02x', int rand 255) . sprintf('%02x', int rand 255) . sprintf('%02x', int rand 255);

  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-delete').on('click', function () {

      var li = $(this).closest('li');

      var row_id = li.attr('row-id');

      $.post('<%= url_for %>', {'row-id' : row_id, op : 'api-delete'}, function (result) {

        if (result.success) {

          li.fadeOut();

        }

      });

    });

    $('.labels-edit-save-btn').on('click', function () {

      var li = $(this).closest('li');

      var row_id = li.attr('row-id');

      var id = li.find('[name=label-id]').val();

      var color = li.find('[name=color]').val();

      $.post('<%= url_for %>', {'row-id' : row_id, op : 'api-update', id : id, color : color}, function (result) {

        if (result.success) {

          li.find('.labels-label-id').text(result.id);

          li.find('.labels-tag').css('background', result.color);

          li.find('.labels-display-area').show();

          li.find('.labels-edit-area').hide();

        }

        else {

          li.find('.labels-error').text(result.message);

        }

      });

    });

  });

% end

%= include '/include/header';

<div class="container">

  %= include '/include/errors', errors => $errors;

  % if ($can_write_access) {

    <div class="labels-new-panel">

      <div class="labels-new-btn btn btn-green btn-new">

        New label

      </div>

    </div>

  % }

  <form class="labels-create-panel" action="<%= url_for %>" method="post" style="display:none">

    <%= hidden_field op => 'create' %>

    <div class="labels-create-left">

      <%= input_tag 'label-id', class => 'labels-create-label-id' %>

      <div class="labels-create-label-color-area">

        <%= input_tag 'color' => $default_color, class => 'labels-create-label-color' %>

        <div class ="labels-create-label-color-palette" style="background:<%= $default_color %>;"></div>

        <div class="error"></div>

      </div>

    </div>

    <div class="labels-create-right">

      <div class="labels-create-cancel-btn btn">

        Cancel

      </div>

      <input type="submit" value="Create label" class="labels-create-create-btn btn btn-green">

    </div>

  </form>

  <ul class="labels">

    <li><%= @$labels %> labels</li>

    % for my $label (@$labels) {

      <li row-id="<%= $label->{row_id} %>">

        <div class="labels-display-area">

          <div class="labels-left">

            <div class="labels-tag" style="background:<%= $label->{color} %>;">

              <i class="icon icon-tag"></i>

              <span class="labels-label-id"><%= $label->{id} %></span>

            </div>

          </div>

          <div class="labels-right">

            % if ($can_write_access) {

              <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' %>

            <div class="labels-edit-label-color-area">

              <%= input_tag 'color' => $label->{color}, class => 'labels-edit-label-color' %>

              <div class ="labels-edit-label-color-palette" style="background:<%= $label->{color} %>;"></div>

            </div>

            <div class="labels-error" style="display:inline-block;color:red;"></div>

          </div>

          <div class="labels-right">

            <div class="labels-edit-cancel-btn btn">

              Cancel

            </div>

            <div class="labels-edit-save-btn btn btn-green">

              Save changes

            </div>

          </div>

        </div>

      </li>

    % }

  </ul>

</div>

%= include '/include/footer';