<%
  # 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') // '';

  # Issue
  my $issue = app->dbi->model('issue')->select(
    [
      {__MY__ => '*'},
      {open_user => ['id']}
    ],
    where => {
      'project.id' => $project_id,
      'issue.number' => $issue_number
    }
  )->one;
  
  my $errors;
  if (lc $self->req->method eq 'post') {
    if ($op eq 'reopen-issue') {
      my $issue_row_id = app->dbi->model('issue')->select(
        'issue.row_id',
        where => {
          'project__user.id' => $user_id,
          'project.id' => $project_id,
          number => $number
        }
      )->value;
      
      app->dbi->model('issue')->update({open => 1}, where => {row_id => $issue_row_id});
      
      $self->redirect_to;
      return;
    }
    elsif ($op eq 'close-issue') {
      my $issue_row_id = app->dbi->model('issue')->select(
        'issue.row_id',
        where => {
          'project__user.id' => $user_id,
          'project.id' => $project_id,
          number => $number
        }
      )->value;
            
      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) {
        app->dbi->connector->txn(sub {
          my $issue_row_id = app->dbi->model('issue')->select(
            'issue.row_id',
            where => {
              'project__user.id' => $user_id,
              'project.id' => $project_id,
              number => $number
            }
          )->value;

          # Issue message number
          my $issue_message_number = app->dbi->model('issue_message')->select(
            'max(number)',
            where => {issue => $issue_row_id}
          )->value;
          $issue_message_number++;

          # New issue message
          my $now_tm = Time::Moment->now_utc;
          my $now_epoch = $now_tm->epoch;
          my $session_user_row_id = $api->session_user_row_id;
          my $new_issue_message = {
            issue => $issue_row_id,
            number => $issue_message_number,
            message => $message,
            create_time => $now_epoch,
            update_time => $now_epoch,
            user => $session_user_row_id
          };
          
          app->dbi->model('issue_message')->insert($new_issue_message);
 
          $self->redirect_to;
          return;
        });
      }
      else {
        $errors = $validation->messages;
      }
    }
  }

  # Issue message
  my $issue_messages = app->dbi->model('issue_message')->select(
    [
      {__MY__ => '*'},
      {user => ['id']}
    ],
    where => {issue => $issue->{row_id}},
    append => 'order by number'
  )->all;

  my $issue_messages_count = app->dbi->model('issue_message')->select(
    'count(*)',
    where => {issue => $issue->{row_id}},
  )->value;
  
  layout 'common', title => "Issue - $user_id/$project_id #$issue_number";
%>

%= javascript begin
  $(document).ready(function() {
    
    // Click write tab
    $('#write-tab').on('click', function () {
      $('#write-tab').find('a').attr('class', '');
      $('#preview-tab').find('a').attr('class', 'disable');
      $('#write-area').css('display', 'block');
      $('#preview-area').css('display', 'none');
    });
    
    // Click preview tab
    $('#preview-tab').on('click', function () {
      $('#write-tab').find('a').attr('class', 'disable');
      $('#preview-tab').find('a').attr('class', '');
      $('#write-area').css('display', 'none');
      $('#preview-area').css('display', 'block');
      
      var text = $('[name=message]').val();
      
      $.post('/api/markdown', {text : text}, function (result) {
        var markdown = result.markdown;
        $('#preview-area').html(markdown);
      });
    });
  });
% end

%= include '/include/header';

<div class="container">
  %= include '/include/errors', errors => $errors;
  <div class="issue-left">
    <div class="issue-panel">
      <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>
        % for my $issue_message (@$issue_messages) {
          <div class="issue-message">
            <div class="issue-message-header">
              <b><%= $issue_message->{'user.id'} %></b> <span style="color:#767676;">commented <%= $api->age_string($issue_message->{create_time}) %></span>
            </div>
            <div class="issue-message-body markdown-body" style="padding:10px">
              <%== $api->markdown($issue_message->{message}) %>
            </div>
          </div>
        % }
      </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 id="write-tab" class="issue-add-comment-header-tab"><a href="javascript:void(0)">Write</a></div>
            <div id="preview-tab" class="issue-add-comment-header-tab"><a class="disable" href="javascript:void(0)">Preview</a></div>
          </div>
          <div class="issue-add-comment-body">
            <div id="write-area" class="issue-add-comment-message">
              <%= text_area 'message' %>
            </div>
            <div id="preview-area" class="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-success">
              </div>
            </div>
          </div>
        </form>
      </div>
    % }
  </div>
</div>

%= include '/include/footer';