<%

  # 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';