{% extends sitebase.html %}

{% block head %}

<script type="text/javascript">

  function checkbox_action(action) {

    var boxes = $('.msg-checkbox');

    if(action == 'check') { boxes.prop('checked',true); }

    else if(action == 'uncheck') { boxes.prop('checked',false); }

    else if(action='invert') { boxes.each( function() {

      $(this).is(':checked') ? $(this).prop('checked',false) : $(this).prop('checked',true);

    });}

    show_hide_actions();

    return false;

  }

  function submit_form(action) {

    $('#action').val(action);

    if($("input:checked").length == 0) {

      return false;

    }

    document.msgform.submit();

  }

  function show_hide_actions() {

    if($('input:checked').length > 0) { $('#message-actions').show(); }

    else { $('#message-actions').hide(); }

  }

  $(document).ready(function() {

    $('#message-actions').hide();

  });

</script>

{% end %}

{% block content%}

<h2 style="text-decoration: underline;">System Messages</h2>

<form method="POST" action="{% raw qiita_config.portal_dir %}/user/messages/" name="msgform">

<div class="row">

  <div class="col-sm-6"><a href="#" onclick="checkbox_action('check')">Select all</a> | <a href="#" onclick="checkbox_action('uncheck')">Select None</a> | <a href="#" onclick="checkbox_action('invert')">Select Inverse</a></div>

  <input type="hidden" name="action" id="action" value="">

  <div class="col-sm-6" style="text-align:right" id="message-actions"><a href="#" onclick="return submit_form('read')">Mark as Read</a> | <a href="#" onclick="return submit_form('unread')">Mark as Unread</a> | <a href="#" onclick="return submit_form('delete')">Delete</a></div>

</div>

  {% set user_messages = current_user.messages() %}

    {% if user_messages %}

    <table class="table">

      <thead>

        <td class="col-sm-1"></td class="col-md-9"><td>Message</td><td class="col-md-2">Timestamp</td></tr>

      </thead>

      <tbody>

        {% for m_id, message, ts, read, _ in user_messages %}

          <tr><td>

          <input type="checkbox" class="msg-checkbox" name="messages" value="{{m_id}}" onchange="show_hide_actions()">

          </td><td {% if not read %}style="font-weight:bold"{% end %}>{% raw message %}</td><td>{{ts}}</td></tr>

        {% end %}

      </tbody>

    </table>

</form>

    {% else %}

      <h3>You have no messages</h3>

    {% end %}

{% end %}