<div class="content-panel" ...attributes>
    <div class="content-panel-header">
        <div class="flex-1">
            <div class="flex items-center mb-4">
                <div>
                    <h3 class="mb-1 mr-4 text-xl font-bold dark:text-gray-100">
                        {{t "developers.component.webhook.attempts.webhook-header"}}
                    </h3>
                    <p class="dark:text-gray-100 text-sm">
                        {{t "developers.component.webhook.attempts.webhook-message"}}
                    </p>
                </div>
            </div>
            <div class="flex items-center section-header-actions space-x-2">
                <div class="rounded-lg border borer-gray-300 dark:border-gray-700 shadow-sm">
                    <div class="rounded-lg flex items-center justify-between px-2 py-1 text-sm bg-white dark:bg-gray-900">
                        <a href="javascript:;" class="mx-4 no-underline {{unless this.attemptStatus 'font-semibold text-blue-400' 'text-gray-400'}}" {{on "click" this.changeAttemptStatus}}>
                            {{t "developers.common.all"}}
                        </a>
                        <a
                            href="javascript:;"
                            class="mx-4 no-underline {{if (eq this.attemptStatus 'successful') 'font-semibold text-blue-400' 'text-gray-400'}}"
                            {{on "click" (fn this.changeAttemptStatus "successful")}}
                        >
                            {{t "developers.common.succeeded"}}
                        </a>
                        <a
                            href="javascript:;"
                            class="mx-4 no-underline {{if (eq this.attemptStatus 'failed') 'font-semibold text-blue-400' 'text-gray-400'}}"
                            {{on "click" (fn this.changeAttemptStatus "failed")}}
                        >
                            {{t "developers.common.failed"}}
                        </a>
                    </div>
                </div>
                <div class="rounded-lg border borer-gray-300 dark:border-gray-700 shadow-sm">
                    <div class="webhook-attempts-date-filter-container">
                        <div class="date-filter-label">Filter by date:</div>
                        <DatePicker @value={{this.date}} @onSelect={{this.filterByDate}} placeholder="Filter by date" class="form-input-sm" />
                        {{#if this.date}}
                            <Button @type="link" @icon="times" @helpText="Clear date" @onClick={{this.clearDate}} />
                        {{/if}}
                    </div>
                </div>
            </div>
        </div>
        <div>
            {{#if this.webhookRequestLogs.meta}}
                <Pagination
                    @meta={{this.webhookRequestLogs.meta}}
                    @currentPage={{this.page}}
                    @onPageChange={{this.changePage}}
                    @isLoading={{this.getWebhookRequestLogs.isRunning}}
                    @metaInfoClass="hidden"
                    class="webhook-attempts-pagination"
                />
            {{/if}}
        </div>
    </div>
    <div class="content-panel-body table-wrapper table-fluid">
        <Table @rows={{this.webhookRequestLogs}} @columns={{this.columns}} @canExpand={{true}} as |Table|>
            <Table.head />
            <Table.body as |body|>
                <body.expanded-row as |row|>
                    <table class="border-none table-fixed sub-table dark:text-gray-100 table-spaced-y-2 table-cells-valign-top">
                        <tbody>
                            <tr>
                                <td class="w-64">
                                    {{t "developers.component.webhook.attempts.http-code"}}
                                </td>
                                <td>
                                    {{row.status_code}}
                                    ({{row.reason_phrase}})
                                </td>
                            </tr>
                            <tr>
                                <td class="w-64">
                                    {{t "developers.component.webhook.attempts.response-time"}}
                                </td>
                                <td>
                                    {{format-milliseconds row.duration}}
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    {{t "developers.component.webhook.attempts.request-endpoint"}}
                                </td>
                                <td>
                                    {{#if row.api_event.data}}
                                        <CodeBlock @code={{or (json-stringify row.api_event.data) ""}} @language="json" class="line-numbers" />
                                    {{else}}
                                        <div class="flex items-center justify-center h-24">
                                            <span class="text-sm text-gray-600">
                                                {{t "developers.component.webhook.attempts.no-request-body"}}
                                            </span>
                                        </div>
                                    {{/if}}
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    {{t "developers.component.webhook.attempts.response"}}
                                </td>
                                <td>
                                    {{#if row.response}}
                                        <CodeBlock @code={{or (json-stringify row.response) ""}} @language="json" class="line-numbers" />
                                    {{else}}
                                        <div class="flex items-center justify-center h-24">
                                            <span class="text-sm text-gray-600">
                                                {{t "developers.component.webhook.attempts.no-response-body"}}
                                            </span>
                                        </div>
                                    {{/if}}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </body.expanded-row>
            </Table.body>
        </Table>
    </div>
</div>