doctype html

div.wrapper.roles(ng-controller="WebhooksController as ctrl",
                        ng-init="section='admin'")
    nav.menu.hidden(tg-project-menu)
    sidebar.menu-secondary.sidebar.settings-nav(tg-admin-navigation="third-parties")
        include ../includes/modules/admin-menu
    sidebar.menu-tertiary.sidebar(tg-admin-navigation="third-parties-webhooks")
        include ../includes/modules/admin-submenu-third-parties

    section.main.admin-common.admin-webhooks(tg-new-webhook)
        include ../includes/components/mainTitle

        p.admin-subtitle(translate="ADMIN.WEBHOOKS.SUBTITLE")
        div.webhooks-options
            a.button-green.hidden.add-webhook(href="", title="{{'ADMIN.WEBHOOKS.ADD_NEW' | translate}}", translate="ADMIN.WEBHOOKS.ADD_NEW")

        section.webhooks-table.basic-table
            div.table-header
                div.row
                    div.webhook-service(translate="COMMON.FIELDS.NAME")
                    div.webhook-url(translate="COMMON.FIELDS.URL")
                    div.webhook-options
            div.table-body
                div.single-webhook-wrapper(tg-webhook="webhook", ng-repeat="webhook in webhooks")
                    div.edition-mode.hidden
                        form.row
                            fieldset.webhook-service
                                input(type="text", name="name", placeholder="{{'ADMIN.WEBHOOKS.TYPE_NAME' | translate}}", data-required="true", ng-model="webhook.name")
                            div.webhook-url
                                div.webhook-url-inputs
                                    fieldset
                                        input(type="text", name="url", data-type="url", placeholder="{{'ADMIN.WEBHOOKS.TYPE_PAYLOAD_URL' | translate}}", data-required="true", ng-model="webhook.url")
                                    fieldset
                                        input(type="text", name="key", placeholder="{{'ADMIN.WEBHOOKS.TYPE_SERVICE_SECRET' | translate}}", data-required="true", ng-model="webhook.key")
                            div.webhook-options
                                a.edit-existing.icon.icon-floppy(href="", title="{{'ADMIN.WEBHOOKS.SAVE' | translate}}")
                                a.cancel-existing.icon.icon-delete(href="", title="{{'ADMIN.WEBHOOKS.CANCEL' | translate}}")

                    div.visualization-mode
                        div.row
                            div.webhook-service
                                span(ng-bind="webhook.name")
                            div.webhook-url
                                span(ng-bind="webhook.url")
                                a.show-history.toggle-history(href="", title="{{'ADMIN.WEBHOOKS.SHOW_HISTORY_TITLE' | translate}}", ng-show="webhook.logs_counter", translate="ADMIN.WEBHOOKS.SHOW_HISTORY")

                            div.webhook-options
                                div.webhook-options-wrapper
                                    a.test-webhook.icon.icon-check-square(href="", title="{{'ADMIN.WEBHOOKS.TEST' | translate}}")
                                    a.edit-webhook.icon.icon-edit(href="", title="{{'ADMIN.WEBHOOKS.EDIT' | translate}}")
                                    a.delete-webhook.icon.icon-delete(href="", title="{{'ADMIN.WEBHOOKS.DELETE' | translate}}")

                        div.webhooks-history(ng-show="webhook.logs")
                            div.history-single-wrapper(ng-repeat="log in webhook.logs")
                                div.history-single
                                    div
                                        span.history-response-icon(ng-class="log.validStatus ? 'history-success' : 'history-error'", title="{{log.status}}")
                                        span.history-date(ng-bind="log.prettyDate")
                                    span.toggle-log.icon.icon-arrow-bottom

                                div.history-single-response
                                    div.history-single-request-header
                                        span(translate="ADMIN.WEBHOOKS.REQUEST")
                                        a.resend-request(href="", title="{{'ADMIN.WEBHOOKS.RESEND_REQUEST' | translate}}", data-log="{{log.id}}")
                                            span.icon.icon-reload
                                            span(translate="ADMIN.WEBHOOKS.RESEND_REQUEST")
                                    div.history-single-request-body
                                        div.response-container
                                            span.response-title(translate="ADMIN.WEBHOOKS.HEADERS")
                                            textarea(name="headers", ng-bind="log.prettySentHeaders")

                                        div.response-container
                                            span.response-title(translate="ADMIN.WEBHOOKS.PAYLOAD")
                                            textarea(name="payload", ng-bind="log.prettySentData")

                                    div.history-single-response-header
                                        span(translate="ADMIN.WEBHOOKS.RESPONSE")
                                    div.history-single-response-body
                                        div.response-container
                                            textarea(name="response-data", ng-bind="log.response_data")

                form.new-webhook-form.row.hidden
                    fieldset.webhook-service
                        input(type="text", name="name", placeholder="{{'ADMIN.WEBHOOKS.TYPE_NAME' | translate}}", data-required="true", ng-model="newValue.name")
                    div.webhook-url
                        div.webhook-url-inputs
                            fieldset
                                input(type="text", name="url", data-type="url", placeholder="{{'ADMIN.WEBHOOKS.TYPE_PAYLOAD_URL' | translate}}", data-required="true", ng-model="newValue.url")
                            fieldset
                                input(type="text", name="key", placeholder="{{'ADMIN.WEBHOOKS.TYPE_SERVICE_SECRET' | translate}}", data-required="true", ng-model="newValue.key")
                    div.webhook-options
                        a.add-new.icon.icon-floppy(href="", title="{{'ADMIN.WEBHOOKS.SAVE' | translate}}")
                        a.cancel-new.icon.icon-delete(href="", title="{{'ADMIN.WEBHOOKS.CANCEL' | translate}}")

        a.help-button(href="https://taiga.io/support/webhooks/", target="_blank")
            span.icon.icon-help
            span(translate="ADMIN.HELP")