{{define "dashboard/notification"}}
{{template "common/header" .}}
{{template "common/menu" .}}
<div class="nb-container">
    <div class="ui container">
        <div class="ui grid">
            <div class="right floated right aligned twelve wide column">
                <button class="ui right labeled nezha-primary-btn icon button" onclick="addOrEditNotification()"><i
                        class="add icon"></i> {{tr "AddNotificationMethod"}}
                </button>
            </div>
        </div>
        <table class="ui very basic table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>{{tr "Name"}}</th>
                    <th>{{tr "Tag"}}</th>
                    <th>URL</th>
                    <th>{{tr "VerifySSL"}}</th>
                    <th>{{tr "Administration"}}</th>
                </tr>
            </thead>
            <tbody>
                {{range $notification := .Notifications}}
                <tr>
                    <td>{{$notification.ID}}</td>
                    <td>{{$notification.Name}}</td>
                    <td>{{$notification.Tag}}</td>
                    <td>{{$notification.URL}}</td>
                    <td>{{$notification.VerifySSL}}</td>
                    <td>
                        <div class="ui mini icon buttons">
                            <button class="ui button" onclick="addOrEditNotification({{$notification}})">
                                <i class="edit icon"></i>
                            </button>
                            <button class="ui button"
                                onclick="showConfirm('{{tr "DeleteNotificationMethod"}}','{{tr "ConfirmToDeleteThisNotificationMethod"}}',deleteRequest,'/api/notification/'+{{$notification.ID}})">
                                <i class="trash alternate outline icon"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                {{end}}
            </tbody>
        </table>
        <div class="ui grid">
            <div class="right floated right aligned twelve wide column">
                <button class="ui right labeled nezha-primary-btn icon button" onclick="addOrEditAlertRule()"><i
                        class="add icon"></i>
                    {{tr "AddNotificationRule"}}
                </button>
            </div>
        </div>
        <table class="ui very basic table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>{{tr "Name"}}</th>
                    <th>{{tr "NotificationMethod"}}</th>
                    <th>{{tr "Rules"}}</th>
                    <th>{{tr "Enable"}}</th>
                    <th>{{tr "Administration"}}</th>
                </tr>
            </thead>
            <tbody>
                {{range $rule := .AlertRules}}
                <tr>
                    <td>{{$rule.ID}}</td>
                    <td>{{$rule.Name}}</td>
                    <td>{{$rule.NotificationTag}}</td>
                    <td>{{$rule.RulesRaw}}</td>
                    <td>{{$rule.Enable}}</td>
                    <td>
                        <div class="ui mini icon buttons">
                            <button class="ui button" onclick="addOrEditAlertRule({{$rule}})">
                                <i class="edit icon"></i>
                            </button>
                            <button class="ui button"
                                onclick="showConfirm('{{tr "DeleteNotificationMethod"}}','{{tr "ConfirmToDeleteThisNotificationMethod"}}',deleteRequest,'/api/alert-rule/'+{{$rule.ID}})">
                                <i class="trash alternate outline icon"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                {{end}}
            </tbody>
        </table>
    </div>
</div>
{{template "component/notification"}}
{{template "component/rule"}}
{{template "common/footer" .}}
<script>
    $('.checkbox').checkbox()
</script>
{{end}}