<ContentPanel
    @prefixTitle={{t "developers.component.api-request-log.details.prefixTitle"}}
    @title={{@apiRequest.description}}
    @titleStatus={{@apiRequest.status_code}}
    @prefixTitleRight={{@apiRequest.public_id}}
    @titleContainerClass="flex-col"
    @panelTitleClass="ml-4 flex flex-row items-center text-sm"
    @prefixTitleClass="text-sm"
    @prefixTitleRightClass="font-mono"
    @panelHeaderClass="items-stretch-i"
    @panelHeaderRightClass="items-start-i"
    @prefixTitleRightContainerClass="py-2"
    @open={{true}}
    @pad={{true}}
    @panelBodyClass="bg-white dark:bg-gray-800 text-sm"
>
    <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.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>
</ContentPanel>