<h2 class="spacer-bottom"><%= message('my_profile.per_project_notifications.title') -%></h2>

<% @per_project_notifications.each do |r_id, per_project_notif| %>
  <div class="spacer-bottom js-project" data-project-id="<%= r_id -%>">
    <table class="form">
      <thead>
      <tr>
        <th>
          <a class="spacer-right icon-delete js-delete-project" href="#"></a>
          <h3 class="display-inline-block"><%= Project.by_key(r_id).name -%></h3>
        </th>
        <% for channel in @channels %>
          <th class="text-center"><%= message('notification.channel.' + channel.getKey()) -%></th>
        <% end %>
      </tr>
      </thead>
      <tbody>
      <% @per_project_dispatchers.each do |dispatcher| %>
        <tr>
          <td><%= message('notification.dispatcher.' + dispatcher) -%></td>
          <%
             for channel in @channels
               check_box_id = 'project_notifs[' + r_id.to_s + '][' + dispatcher + '][' + channel.getKey() + ']'
               check_box_checked = per_project_notif[dispatcher].include?(channel.getKey())
          %>
            <td class="text-center">
              <%= check_box_tag check_box_id, 'true', check_box_checked %>
            </td>
          <% end %>
        </tr>
      <% end %>
      </tbody>
    </table>
  </div>
<% end %>

<div class="spacer-bottom">
  <%= resource_select_tag 'new_project', {:qualifiers => ['TRK'], :width => '250px',
                                          :select2_options => {'placeholder' => "'" + message('my_profile.add_project') + "'"}
                                       } -%>
</div>

<script>
  (function ($) {
    $('#new_project').on('change', function (e) {
      var id = $(e.currentTarget).val();
      if (id != null) {
        $('#notif_form').submit();
      }
    });

    $('.js-delete-project').on('click', function (e) {
      e.preventDefault();
      $(e.currentTarget).closest('[data-project-id]').remove();
    });
  })(window.jQuery);
</script>
