<ContentPanel @title={{@apiRequest.description}} @titleStatus={{@apiRequest.status_code}} @open={{true}} @wrapperClass="bordered-top" @panelTitleClass="flex flex-row items-center normal-case">
    <:title>
        <div class="ml-2 flex flex-row space-x-1 leading-5">
            <Badge @hideStatusDot={{true}} @status={{@apiRequest.public_id}} @disableHumanize={{true}} />
        </div>
    </:title>
    <:default>
        <table class="border-none text-sm table-fixed dark:text-gray-100 table-spaced-y-2 table-cells-valign-top">
            <tbody>
                <tr>
                    <td class="w-40">
                        {{t "developers.common.time"}}
                    </td>
                    <td>
                        {{@apiRequest.createdAt}}
                    </td>
                </tr>
                <tr>
                    <td class="w-40">
                        {{t "developers.component.api-request-log.details.duration"}}
                    </td>
                    <td>
                        {{format-milliseconds @apiRequest.duration}}
                    </td>
                </tr>
                <tr>
                    <td>
                        {{t "developers.component.api-request-log.details.ip-address"}}
                    </td>
                    <td>
                        {{@apiRequest.ip_address}}
                    </td>
                </tr>
                <tr>
                    <td>
                        {{t "developers.common.version"}}
                    </td>
                    <td>
                        {{@apiRequest.version}}
                    </td>
                </tr>
                <tr>
                    <td>
                        {{t "developers.common.source"}}
                    </td>
                    <td>
                        {{@apiRequest.source}}
                    </td>
                </tr>
            </tbody>
        </table>
    </:default>
</ContentPanel>