<%
  # API
  my $api = gitprep_api;

  # Parameters
  my $user_id = param('user');
  my $project_id = param('project');
  my $issue_number = param('number');
  my $op = param('op') // '';

  my $project_row_id = $api->get_project_row_id($user_id, $project_id);
  
  my $session_id = $api->session_user_id;

  # Issue
  my $issue = app->dbi->model('issue')->select(
    [
      {__MY__ => '*'},
      {open_user => ['id']}
    ],
    where => {
      project => $project_row_id,
      'issue.number' => $issue_number
    }
  )->one;
  my $issue_row_id = $issue->{row_id};
  
  my $errors;
  if (lc $self->req->method eq 'post') {
    if ($op eq 'reopen-issue') {
      app->dbi->model('issue')->update({open => 1}, where => {row_id => $issue_row_id});
      
      $self->redirect_to;
      return;
    }
    elsif ($op eq 'close-issue') {
      app->dbi->model('issue')->update({open => 0}, where => {row_id => $issue_row_id});
      
      $self->redirect_to;
      return;
    }
    elsif ($op eq 'add-comment') {

      # Parameters
      my $message = param('message');
      
      # Validation
      my $vc = app->vc;
      my $validation = $vc->validation;
      
      # Check Message
      if (!length $message) {
        $validation->add_failed(message => 'message is empty');
      }
      elsif (length $message > 1000) {
        $validation->add_failed(message => 'message is too long');
      }
      
      if ($validation->is_valid) {

        $api->add_issue_message($user_id, $project_id, $number, $message);
        
        $self->redirect_to;
        return;
      }
      else {
        $errors = $validation->messages;
      }
    }
    elsif ($op eq 'api-delete-issue-message') {
      my $issue_message_row_id = param('issue_message_row_id');
      
      my $json = $api->api_delete_issue_message($issue_message_row_id, $user_id);
      
      $self->render(json => $json);
      return;
    }
    elsif ($op eq 'api-update-issue-message') {
      
      my $issue_message_row_id = param('issue_message_row_id');
      my $message = param('message');
      
      my $json = $api->api_update_issue_message($issue_message_row_id, $message, $user_id);
      
      $self->render(json => $json);
      return;
    }
    elsif ($op eq 'api-toggle-label') {
      my $label_row_id = param('popup-label-row-id');
      
      my $label_checked = app->dbi->model('issue_label')->select(
        where => {issue => $issue_row_id, label => $label_row_id}
      )->one;
      
      my $json = {};
      if ($label_checked) {
        app->dbi->model('issue_label')->delete(where => {issue => $issue_row_id, label => $label_row_id});
        $json->{checked} = 0;
      }
      else {
        app->dbi->model('issue_label')->insert({issue => $issue_row_id, label => $label_row_id});
        my $label = app->dbi->model('label')->select(where => {row_id => $label_row_id})->one;
        $json->{checked} = 1;
        $json->{id} = $label->{id};
        $json->{color} = $label->{color};
      }
      $json->{success} = 1;
      
      $self->render(json => $json);
      return;
    }
  }

  # Issue message
  my $issue_messages = app->dbi->model('issue_message')->select(
    [
      {__MY__ => '*'},
      {user => ['id']}
    ],
    where => {issue => $issue->{row_id}},
    append => 'order by number'
  )->all;
  
  # Issue message count
  my $issue_messages_count = app->dbi->model('issue_message')->select(
    'count(*)',
    where => {issue => $issue->{row_id}},
  )->value;
  
  # Participants
  my $participants = app->dbi->model('issue_message')->select(
    ['distinct user.id'],
    where => {issue => $issue->{row_id}},
  )->values;
  
  # Labels
  my $labels = app->dbi->model('label')->select(
    {__MY__ => '*'},
    where => {project => $project_row_id}
  )->all;
  
  # Issue labels
  my $issue_labels = app->dbi->model('issue_label')->select(
    {label => '*'},
    where => {'issue_label.issue' => $issue_row_id},
    appden => 'order by label.id'
  )->all;
  
  layout 'common', title => "Issue - $user_id/$project_id #$issue_number";
%>

%= javascript begin
  $(document).ready(function() {
    %= include '/include/js/issue';
    
    // Click labels btn
    $('.issue-labels-setting-btn').on('click', function () {
      var popup = $('.issue-labels-popup');
      popup.css('display', 'block');
      
      var top = $('.issue-labels').offset().top;
      var left = $('.issue-labels').offset().left;
      
      popup.css('top', (top + 30) + 'px');
      popup.css('left', (left - 165) + 'px');
    });
    
    // Click label check button
    $('.issue-labels-popup-body li').on('click', function () {
      var that = this;
      
      var label_row_id = $(this).attr('popup-label-row-id');
      $.post('<%= url_for %>', {'popup-label-row-id' : label_row_id, op : 'api-toggle-label'}, function (result) {
        if (result.success) {
          if (result.checked) {
            $(that).find('.issue-labels-popup-check i').css('display', 'block');
            var li = '<li label-row-id="' + label_row_id + '" style="background:' + result.color + '">' + result.id + '</li>';
            $('.issue-labels-setting-pallet').append(li);
          }
          else {
            $(that).find('.issue-labels-popup-check i').css('display', 'none');
            $('.issue-labels-setting-pallet li').each(function () {
              if ($(this).attr('label-row-id') === label_row_id) {
                $(this).remove();
              }
            });
          }
        }
      });
    });
    
    // Click label popup close button
    $('.issue-labels-popup-close-btn').on('click', function () {
      $('.issue-labels-popup').hide();
    });
  });
% end

%= include '/include/header';

<div class="container">
  %= include '/include/errors', errors => $errors;

  <div class="issue-title-panel">
    <div class="issue-title">
      Some <%= $issue->{title} %> <span style="color:#aaa;">#<%= $issue->{number} %></span>
    </div>
    <div>
      % if ($issue->{open}) {
        <div class="issue-open">Open</div>
      % } else {
        <div class="issue-close">Close</div>
      % }
      <b><%= $issue->{'open_user.id'} %></b> <span style="color:#767676;">opened this issue <%= $api->age_string($issue->{open_time}) %> / <%= $issue_messages_count %> comment</span>
    </div>
  </div>
  
  <div class="issue">
    <div class="issue-left">
      <div class="issue-panel">
        <div>
          % for my $issue_message (@$issue_messages) {
            <%
              my %issue_message_param = (
                user_id => $user_id,
                issue_message => $issue_message
              );
            %>
            
            %= include '/include/issue_message', %issue_message_param;
          % }
        </div>
      </div>
      
      % if ($api->logined) {
        <div class="issue-add-comment">
          <form action="<%= url_for %>" method="post">
            <%= hidden_field 'op' %>
            <div class="issue-add-comment-header">
              <div class="issue-message-write-tab issue-add-comment-header-tab"><a href="javascript:void(0)">Write</a></div>
              <div class="issue-message-preview-tab issue-add-comment-header-tab"><a class="disable" href="javascript:void(0)">Preview</a></div>
              %= include '/include/issue_comment_icon';
            </div>
            <div class="issue-add-comment-body">
              <div class="issue-message-write-area issue-add-comment-message">
                <%= text_area 'message' => '' %>
              </div>
              <div class="issue-message-preview-area issue-add-comment-preview markdown-body" style="padding:10px">
              </div>
              <div class="issue-add-comment-bottom">
                <div class="issue-add-comment-button-left">
                  Styling with Markdown is supported
                </div>
                <div class="issue-add-comment-button">
                  % if ($issue->{open}) {
                    <input type="submit" value="Close issue" onclick="$(this).closest('form').find('[name=op]').val('close-issue'); $(this).closest('form').submit();" class="btn">
                  % } else {
                    <input type="submit" value="Reopen issue" onclick="$(this).closest('form').find('[name=op]').val('reopen-issue'); $(this).closest('form').submit();" class="btn">
                  % }
                  <input type="submit" value="Comment" onclick="$(this).closest('form').find('[name=op]').val('add-comment'); $(this).closest('form').submit();" class="btn btn-green">
                </div>
              </div>
            </div>
          </form>
        </div>
      % }
    </div>
    <div class="issue-right">
      <div class="issue-labels">
        <div class="issue-labels-title-area">
          <div class="issue-labels-title">
            labels
          </div>
          <div class="issue-labels-setting-btn">
            <a href="javascript:void(0)"><i class="icon icon-cog"></i></a>
          </div>
        </div>
        <div class="issue-labels-popup">
          <div class="issue-labels-popup-title-area">
            <div class="issue-labels-popup-title">
              Apply labels to this issue
            </div>
            <div class="issue-labels-popup-close-btn">
              <a href="javascript:void(0)"><i class="icon icon-remove"></i></a>
            </div>
          </div>
          <ul class="issue-labels-popup-body">
            % for my $label (@$labels) {
              % my $checked = app->dbi->model('issue_label')->select(where => {issue => $issue_row_id, label => $label->{row_id}})->one;
              <li popup-label-row-id="<%= $label->{row_id} %>">
                <div class="issue-labels-popup-check"><i class="icon icon-ok" style="display:<%= $checked ? 'block' : 'none' %>"></i></div>
                <div class="issue-labels-popup-pallet" style="background:<%= $label->{color} %>"></div>
                <div class="issue-labels-popup-pallet-id"><%= $label->{id} %></div>
              </li>
            % }
          </ul>
        </div>
        % if (@$labels) {
          <ul class="issue-labels-setting-pallet">
            % for my $issue_label (@$issue_labels) {
              <li label-row-id="<%= $issue_label->{'label.row_id'} %>" style="background:<%= $issue_label->{'label.color'} %>">
                <%= $issue_label->{'label.id'} %>
              </li>
            % }
          </ul>
        % } else {
          <ul>
            <li>
              None yet
            </li>
          </ul>
        % }
      </div>
      <div style="font-weight:bold;padding-bottom:3px"><%= @$participants %> participants</div>
      <ul>
        % for my $participant (@$participants) {
          <li>
            <a href="<%= url_for("/$participant") %>"><%= $participant %></a>
          </li>
        % }
      </ul>
    </div>
  </div>
</div>


%= include '/include/footer';