<a href="/admin/global-notification/new">
  <p class="btn btn-default">{{ t('notification_setting.add_notification') }}</p>
</a>
<h2>{{ t('notification_setting.notification_list') }}</h2>

{% set tags = {
  pageCreate: '<span class="label label-success" data-toggle="tooltip" data-placement="top" title="Page Create"><i class="icon-doc"></i> CREATE</span>',
  pageEdit: '<span class="label label-warning" data-toggle="tooltip" data-placement="top" title="Page Edit"><i class="icon-pencil"></i> EDIT</span>',
  pageMove: '<span class="label label-warning" data-toggle="tooltip" data-placement="top" title="Page Move"><i class="icon-action-redo"></i> MOVE</span>',
  pageDelete: '<span class="label label-danger" data-toggle="tooltip" data-placement="top" title="Page Delte"><i class="icon-fire"></i> DELETE</span>',
  pageLike: '<span class="label label-info" data-toggle="tooltip" data-placement="top" title="Page Like"><i class="icon-like"></i> LIKE</span>',
  comment: '<span class="label label-default" data-toggle="tooltip" data-placement="top" title="New Comment"><i class="icon-fw icon-bubble"></i> POST</span>'
} %}

<table class="table table-bordered">
  <thead>
    <th>ON/OFF</th>
    <th>{{ t('notification_setting.trigger_path') }} {{ t('notification_setting.trigger_path_help', '<code>*</code>') }}</th>
    <th>{{ t('notification_setting.trigger_events') }}</th>
    <th>{{ t('notification_setting.notify_to') }}</th>
    <th></th>
  </thead>
  <tbody class="admin-notif-list">
    {% for globalNotif in globalNotifications %}
    {% set detailPageUrl = '/admin/global-notification/' + globalNotif.id %}
    <tr>
      <td class="align-middle td-abs-center">
        <input type="checkbox" class="js-switch" data-size="small" data-id="{{ globalNotif._id.toString() }}" {% if globalNotif.isEnabled %}checked{% endif %} />
      </td>
      <td>
        {{ globalNotif.triggerPath }}
      </td>
      <td style="max-width: 200px;">
        {% for event in globalNotif.triggerEvents %}
          {{ tags[event] | safe }}
        {% endfor %}
      </td>
      <td>
        {% if globalNotif.__t == 'mail' %}<span data-toggle="tooltip" data-placement="top" title="Email"><i class="ti-email"></i> {{ globalNotif.toEmail }}</span>
        {% elseif globalNotif.__t == 'slack' %}<span data-toggle="tooltip" data-placement="top" title="Slack"><i class="fa fa-slack"></i> {{ globalNotif.slackChannels }}</span>
        {% endif %}
      </td>
      <td class="td-abs-center">
        <div class="btn-group admin-group-menu">
          <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
            <i class="icon-settings"></i> <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li>
              <a href="{{ detailPageUrl }}">
                <i class="icon-fw icon-note"></i> {{ t('Edit') }}
              </a>
            </li>

            <li class="btn-delete">
              <a href="#"
                  data-setting-id="{{ globalNotif.id }}"
                  data-target="#admin-delete-global-notification"
                  data-toggle="modal">
                <i class="icon-fw icon-fire text-danger"></i> {{ t('Delete') }}
              </a>
            </li>

          </ul>
        </div>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<div class="modal fade" id="admin-delete-global-notification">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header bg-danger">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <div class="modal-title">
            <i class="icon icon-fire"></i> Delete Global Notification Setting
          </div>
        </div>

        <div class="modal-body">
          <span class="text-danger">
            削除すると元に戻すことはできませんのでご注意ください。
          </span>
        </div>
        <div class="modal-footer">
          <form action="#" method="post" id="admin-global-notification-setting-delete" class="text-right">
            <input type="hidden" name="setting-id" value="">
            <input type="hidden" name="_csrf" value="{{ csrf() }}">
            <button type="submit" value="" class="btn btn-sm btn-danger">
              <i class="icon icon-fire"></i> 削除
            </button>
          </form>
        </div>

      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>

<script>
  $(".btn-delete").on("click", function(event) {
    var id = $(event.currentTarget).find("a").data("setting-id");
    $("#admin-global-notification-setting-delete").attr("action", "/admin/global-notification/" + id + "/remove");
  });

  $(".js-switch").on("change", function(event) {
    var id = event.currentTarget.dataset.id;
    var isEnabled = event.currentTarget.checked;
    $.post('/_api/admin/global-notification/toggleIsEnabled?id=' + id + '&isEnabled=' + isEnabled, function(res) {
      if (res.ok) {
        // do nothing
      }
      else {
        $('.admin-notification > .row > .col-md-9').prepend(
          '<div class=\"alert alert-danger\">Error occurred in deleting global notifcation setting.</div>'
        );
        location.reload();
      }
    });
  });
</script>
