[define title]Spam Moderation Queue[end]
[define category_css]css/ph_list.css[end]
[define page_css]css/ph_detail.css[end][# needed for infopeek]

[if-any projectname]
  [include "../framework/header.ezt" "showtabs"]
[else]
  [include "../framework/header.ezt" "hidetabs"]
[end]
[include "../framework/js-placeholders.ezt" "showtabs"]

<h2>Spam Moderation Queue: Automatic Classifier Close Calls</h2>
[include "../framework/artifact-list-pagination-part.ezt"]

<button type="submit" vaue="mark_spam" disabled="true">Mark as Spam</button>
<button type="submit" value="mark_ham" disabled="true">Mark as Ham</button>

<span style="margin:0 .7em">Select:
  <a id="selectall" href="#">All</a>
  <a id="selectnone" href="#">None</a>
</span>

<table id='resultstable'>
<tr>
  <td>
  </td>
  <td>ID</td>
  <td>Author</td>
  <td>Summary</td>
  <td>Snippet</td>
  <td>Opened at</td>
  <td>Spam?</td>
  <td>Verdict reason</td>
  <td>Confidence</td>
  <td>Verdict at</td>
  <td>Flag count</td>
</tr>
[for issue_queue]
<tr>
  <td><input type='checkbox' name='issue_local_id' value='[issue_queue.issue.local_id]'/></td>
  <td><a href='/p/[projectname]/issues/detail?id=[issue_queue.issue.local_id]'>[issue_queue.issue.local_id]</a></td>
  <td><a href='/u/[issue_queue.reporter.email]'>[issue_queue.reporter.email]</a></td>
  <td><a href='/p/[projectname]/issues/detail?id=[issue_queue.issue.local_id]'>[issue_queue.summary]</a></td>
  <td>
  [issue_queue.comment_text]
  </td>
  <td>[issue_queue.issue.opened_timestamp]</td>
  <td>[issue_queue.issue.is_spam]</td>

  <td>[issue_queue.reason]</td>
  <td>[issue_queue.classifier_confidence]</td>
  <td>[issue_queue.verdict_time]</td>
  <td>[issue_queue.flag_count]</td>
</tr>
[end]
</table>

[include "../framework/artifact-list-pagination-part.ezt"]
<button type="submit" vaue="mark_spam" disabled="true">Mark as Spam</button>
<button type="submit" value="mark_ham" disabled="true">Mark as Ham</button>

</form>

<script type="text/javascript" nonce="[nonce]">
runOnLoad(function() {
  if ($("selectall")) {
    $("selectall").addEventListener("click", function() {
        _selectAllIssues();
        setDisabled(false);
    });
  }
  if ($("selectnone")) {
    $("selectnone").addEventListener("click", function() {
        _selectNoneIssues();
        setDisabled(true);
    });
  }

  const checkboxes = Array.from(
      document.querySelectorAll('input[type=checkbox]'));
  checkboxes.forEach(checkbox => {
    checkbox.addEventListener('change', updateEnabled);
  });

  const buttons = Array.from(
      document.querySelectorAll('button[type=submit]'));
  buttons.forEach(button => {
    button.addEventListener('click', function(event) {
      const markSpam = (button.value === 'mark_spam');
      const issueRefs = [];
      checkboxes.forEach(checkbox => {
        if (checkbox.checked) {
          issueRefs.push({
              projectName: window.CS_env.projectName,
              localId: checkbox.value,
          });
          const rowElement = checkbox.parentElement.parentElement;
          rowElement.parentElement.removeChild(rowElement);
        }
      });
      window.prpcClient.call('monorail.Issues', 'FlagIssues', {
        issueRefs: issueRefs,
        flag: markSpam,
      });
    });
  });

  function updateEnabled() {
    const anySelected = checkboxes.some(checkbox => checkbox.checked);
    setDisabled(!anySelected);
   }

  function setDisabled(disabled) {
    buttons.forEach(button => {
      button.disabled = disabled;
    });
  }
});
</script>

[include "../framework/footer.ezt"]