<div class="content-panel" ...attributes>
    <div class="content-panel-header">
        <div class="flex items-center">
            <h3 class="mr-4 text-xl font-bold dark:text-gray-100">
                {{t "developers.component.webhook.details.webhook-details"}}
            </h3>
        </div>

        <div class="flex items-center section-header-actions">
            <Button @icon="pencil" @text={{t "developers.component.webhook.details.update-details"}} @onClick={{this.onClickUpdateWebhook}} />
        </div>
    </div>
    <div class="text-sm content-panel-body">
        <table class="border-none table-fixed dark:text-gray-100 table-spaced-y-2 table-cells-valign-top">
            <tbody>
                <tr>
                    <td class="w-40">
                        {{t "developers.common.url"}}
                    </td>
                    <td>
                        {{n-a @webhook.url}}
                    </td>
                </tr>
                <tr>
                    <td>
                        {{t "developers.common.description"}}
                    </td>
                    <td>
                        {{n-a @webhook.description}}
                    </td>
                </tr>
                <tr>
                    <td>
                        {{t "developers.component.webhook.details.event-types"}}
                    </td>
                    <td>
                        {{#if @webhook.is_listening_on_all_events}}
                            <Badge @status="warning" @hideStatusDot={{true}} @helpText={{t "developers.component.webhook.details.help-text"}}>
                                <FaIcon @icon="exclamation-triangle" />
                                <span class="ml-2">
                                    {{t "developers.component.webhook.details.all-events"}}
                                </span>
                            </Badge>
                        {{else}}
                            {{@webhook.eventTypes}}
                        {{/if}}
                    </td>
                </tr>
                <tr>
                    <td>
                        {{t "developers.component.webhook.details.api-credential"}}
                    </td>
                    <td>
                        {{#if @webhook.receivingFromAllApiCredentials}}
                            <Badge @status="warning" @hideStatusDot={{true}} @helpText={{t "developers.component.webhook.details.help-text-event"}}>
                                <FaIcon @icon="exclamation-triangle" />
                                <span class="ml-2">
                                    {{t "developers.component.webhook.details.api-credentials"}}
                                </span>
                            </Badge>
                        {{else}}
                            {{@webhook.api_credential_name}}
                        {{/if}}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>