doctype html

div.wrapper.roles(
    ng-controller="WebhooksController as ctrl",
    ng-init="section='admin'"
)
    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)
        header.header-with-actions
            include ../includes/components/mainTitle
            .action-buttons
                a.button-green.hidden.add-webhook(
                    href=""
                    title="{{'ADMIN.WEBHOOKS.ADD_NEW' | translate}}"
                    translate="ADMIN.WEBHOOKS.ADD_NEW"
                )

        section.webhooks-table.basic-table
            .table-header
                .row
                    .webhook-service(translate="COMMON.FIELDS.NAME")
                    .webhook-url(translate="COMMON.FIELDS.URL")
                    .webhook-options
            .table-body
                .single-webhook-wrapper(
                    tg-webhook="webhook"
                    ng-repeat="webhook in webhooks"
                )
                    .edition-mode.hidden
                        form.row
                            fieldset.webhook-service
                                input(
                                    type="text"
                                    name="name"
                                    data-required="true"
                                    ng-model="webhook.name"
                                    placeholder="{{'ADMIN.WEBHOOKS.TYPE_NAME' | translate}}"
                                )    
                            .webhook-url
                                .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"
                                        )
                            .webhook-options
                                a.edit-existing(
                                    href=""
                                    title="{{'ADMIN.WEBHOOKS.SAVE' | translate}}"
                                )
                                    tg-svg(svg-icon="icon-save")
                                a.cancel-existing(
                                    href=""
                                    title="{{'ADMIN.WEBHOOKS.CANCEL' | translate}}"
                                )
                                    tg-svg(svg-icon="icon-close")

                    .visualization-mode
                        .row
                            .webhook-service(ng-bind="webhook.name")
                            .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"
                                )

                            .webhook-options
                                .webhook-options-wrapper
                                    a.test-webhook(
                                        href=""
                                        title="{{'ADMIN.WEBHOOKS.TEST' | translate}}"
                                    )
                                        tg-svg(svg-icon="icon-check-empty")
                                    a.edit-webhook(
                                        href=""
                                        title="{{'ADMIN.WEBHOOKS.EDIT' | translate}}"
                                    )
                                        tg-svg(svg-icon="icon-edit")
                                    a.delete-webhook(
                                        href=""
                                        title="{{'ADMIN.WEBHOOKS.DELETE' | translate}}"
                                    )
                                        tg-svg(svg-icon="icon-trash")

                        .webhooks-history
                            .history-single-wrapper(ng-repeat="log in webhook.logs")
                                .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")
                                    a.toggle-log(href="")
                                        tg-svg(svg-icon="icon-arrow-down")

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

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

                                    .history-single-response-header
                                        span(translate="ADMIN.WEBHOOKS.RESPONSE")
                                    .history-single-response-body
                                        .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"
                            data-required="true"
                            ng-model="newValue.name"
                            placeholder="{{'ADMIN.WEBHOOKS.TYPE_NAME' | translate}}"
                        )
                    .webhook-url
                        .webhook-url-inputs
                            fieldset
                                input(
                                    type="text"
                                    name="url"
                                    data-type="url"
                                    data-required="true"
                                    ng-model="newValue.url"
                                    placeholder="{{'ADMIN.WEBHOOKS.TYPE_PAYLOAD_URL' | translate}}"
                                )
                            fieldset
                                input(
                                    type="text"
                                    name="key"
                                    placeholder="{{'ADMIN.WEBHOOKS.TYPE_SERVICE_SECRET' | translate}}"
                                    data-required="true"
                                    ng-model="newValue.key"
                                )
                    .webhook-options
                        a.add-new(
                            href=""
                            title="{{'ADMIN.WEBHOOKS.SAVE' | translate}}"
                        )
                            tg-svg(svg-icon="icon-save")
                        a.cancel-new(
                            href=""
                            title="{{'ADMIN.WEBHOOKS.CANCEL' | translate}}"
                        )
                            tg-svg(svg-icon="icon-close")

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