{% extends '../layout/admin.html' %}

{% block html_title %}{{ customizeService.generateCustomTitle(t('Notification settings')) }}{% endblock %}

{% block content_header %}
<div class="header-wrap">
  <header id="page-header">
    <h1 id="admin-title" class="title">{{ t('Notification settings') }}</h1>
  </header>
</div>
{% endblock %}

{% block content_main %}
<div class="content-main admin-notification">
  <div class="row">
    <div class="col-md-3">
      {% include './widget/menu.html' with {current: 'notification'} %}
    </div>
    <div class="col-md-9" id="admin-notification-setting">

      <ul class="nav nav-tabs" role="tablist">
        <li role="tab">
          <a href="#user-trigger-notification" data-toggle="tab" role="tab"><i class="icon-settings"></i> User Trigger Notification</a>
        </li>
        <li role="tab">
          <a href="#global-notification" data-toggle="tab" role="tab"><i class="icon-settings"></i> Global Notification</a>
        </li>
      </ul>

        <div id="user-trigger-notification" class="tab-pane" role="tabpanel">
          <h4>Default Notification Settings for Patterns</h4>

          <table class="table table-bordered">
            <thead>
              <th>Pattern</th>
              <th>Channel</th>
              <th>Operation</th>
            </thead>
            <tbody class="admin-notif-list">
              <form id="slackNotificationForm">
              <tr>
                <td>
                  <input class="form-control" type="text" name="pathPattern" value="" placeholder="e.g. /projects/xxx/MTG/*">
                  <p class="help-block">
                    Path name of wiki. Pattern expression with <code>*</code> can be used.
                  </p>
                </td>
                <td>
                  <input class="form-control form-inline" type="text" name="channel" value="" placeholder="e.g. project-xxx">
                  <p class="help-block">
                    Slack channel name. Without <code>#</code>.
                  </p>
                </td>
                <td>
                  <input type="hidden" name="_csrf" value="{{ csrf() }}">
                  <input type="submit" value="Add" class="btn btn-primary">
                </td>
              </tr>
              </form>

              {% for userNotif in userNotifications %}
              <tr class="admin-notif-row" data-updatepost-id="{{ userNotif._id.toString() }}">
                <td>
                  {{ userNotif.pathPattern }}
                </td>
                <td>
                  {{ userNotif.channel }}
                </td>
                <td>
                  <form class="admin-remove-updatepost">
                    <input type="hidden" name="id" value="{{ userNotif._id.toString() }}">
                    <input type="hidden" name="_csrf" value="{{ csrf() }}">
                    <input type="submit" value="Delete" class="btn btn-default">
                  </form>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div><!-- /#user-trigger-notification -->

        <div id="global-notification" class="tab-pane" role="tabpanel" >
          {% include './global-notification.html' %}
        </div><!-- /#global-notification -->

      </div><!-- /.tab-content -->

    </div>
  </div>

  <script>
    function activateTab(tab){
      $('.nav-tabs a[href="#' + tab + '"]').tab('show');
    };

    function activateSlackIwh() {
      $("#selectSlackOption").selectpicker('val', '1');
      $("#slack-app").removeClass('active');
      $("#slack-incoming-webhooks").addClass('active');
    }

    function activateSlackApp() {
      $("#selectSlackOption").selectpicker('val', '2');
      $("#slack-incoming-webhooks").removeClass('active');
      $("#slack-app").addClass('active');
    }

    window.addEventListener('load', function(e) {
      // hash on page
      if (location.hash) {
        if (location.hash == '#global-notification') {
          activateTab('global-notification');
        }
      }
    });

    $("#selectSlackOption").on('change', function() {
      if (this.value === "1") {
        activateSlackIwh();
      }
      else if (this.value === "2") {
        activateSlackApp();
      }
    });
  </script>
</div>
{% endblock content_main %}

{% block content_footer %}
{% endblock content_footer %}