<Layout::Section::Header @title={{@model.name}}>
    <Button @icon="long-arrow-left" @iconPrefix="fas" @text={{t "developers.common.back"}} @onClick={{this.goBack}} />
</Layout::Section::Header>

<Layout::Section::Body>
    <div class="h-screen overflow-y-scroll pb-40">
        <div class="space-y-6 py-6 max-w-6xl mx-auto">
            <ContentPanel @titleStatusRight="Channel" @titleStatusRightClass="info-status-badge" @hideStatusDot={{true}} @title={{@model.name}} @open={{true}} @pad={{false}} @panelBodyClass="bg-black">
                <div id="output" class="font-mono rounded-b-md max-h-full p-6 overflow-y-scroll bg-black shadow-inner dark:shadow-none">
                    <div class="flex items-center justify-between mb-4">
                        <div class="block w-1/2 font-mono font-semibold text-green-300">
                            {{t "developers.sockets.view.output"}}
                        </div>
                        {{#if this.events.length}}
                            <div class="flex items-center justify-end w-1/2 text-sm text-green-300">
                                <Spinner @iconClass="green-loader" />

                                <span class="ml-2 font-mono">
                                    {{t "developers.sockets.view.awaiting-events"}}
                                </span>
                            </div>
                        {{/if}}
                    </div>

                    <div>
                        {{#each this.events as |event|}}
                            <div class="mb-3 text-sm font-mono rounded-lg shadow-sm flex flex-row">
                                <div class="text-{{event.color}}-300 uppercase text-sm font-mono pr-2 flex-shrink-0">
                                    [{{event.time}}]:
                                </div>
                                <div class="text-{{event.color}}-300 text-sm font-mono">
                                    {{html-safe event.content}}
                                </div>
                            </div>
                        {{else}}
                            <div class="flex items-center mt-6 text-green-300">
                                <Spinner @iconClass="green-loader" />
                                <span class="ml-2 font-mono">
                                    {{t "developers.sockets.view.awaiting-events"}}
                                </span>
                            </div>
                        {{/each}}
                    </div>
                </div>
            </ContentPanel>
        </div>
    </div>
</Layout::Section::Body>