<div class="repository-events-table-element">
  <div class="co-panel">
    <div class="co-panel-heading">
      <i class="fa fa-bell"></i> Events and Notifications

      <div class="heading-controls hidden-sm hidden-xs">
        <button class="btn btn-primary" ng-click="askCreateNotification()">
          <i class="fa fa-plus"></i> Create Notification
        </button>
      </div>
    </div>
    <div class="panel-body">
      <div class="resource-view" resource="notificationsResource"
           error-message="'Could not load repository events'">

          <div class="empty" ng-if="!notifications.length">
            <div class="empty-primary-msg">No notifications have been setup for this repository.</div>
            <div class="empty-secondary-msg hidden-xs" ng-if="repository.can_write">
              Click the "Create Notification" button above to add a new notification for a repository event.
            </div>
            <div class="empty-secondary-msg visible-xs" ng-if="repository.can_write">
              <a href="javascript:void(0)" ng-click="askCreateNotification()">Click here</a> to add a new notification for a repository event.
            </div>
          </div>

          <table class="co-table permissions" ng-if="notifications.length">
            <thead>
              <tr>
                <td>Event</td>
                <td>Notification</td>
                <td class="options-col"></td>
              </tr>
            </thead>

            <tbody>
              <tr class="notification-row" ng-repeat="notification in notifications">
                <td>
                  <span class="notification-event">
                    <i class="fa fa-lg" ng-class="getEventInfo(notification).icon"></i>
                    {{ getEventInfo(notification).title }}
                  </span>
                </td>

                <td>
                  <span class="notification-method">
                    <i class="fa fa-lg" ng-class="getMethodInfo(notification).icon"></i>
                    {{ getMethodInfo(notification).title }}
                  </span>
                </td>

                <td>
                  <span class="cor-options-menu">
                    <span class="cor-option" option-click="testNotification(notification)">
                      <i class="fa fa-send"></i> Test Notification
                    </span>
                    <span class="cor-option" option-click="showWebhookInfo(notification)"
                          ng-if="getMethodInfo(notification).id == 'webhook'">
                        <i class="fa fa-book"></i>
                        Webhook Documentation
                    </span>
                    <span class="cor-option" option-click="deleteNotification(notification)">
                      <i class="fa fa-times"></i> Delete Notification
                    </span>
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
      </div>
    </div>
  </div>

  <!--  New notification dialog-->
  <div class="create-external-notification-dialog"
       repository="repository"
       counter="showNewNotificationCounter"
       notification-created="handleNotificationCreated(notification)"></div>
</div>