{% macro component(config, localized) %}
    <div class="bc-w-2/3">
        {% embed "system/embed/card/card-with-title.html.twig" with {contentSpacing: false} %}
            {% import "log/macro/log-level.html.twig" as log_level %}
            {% import "system/macro/card/card-heading.html.twig" as card_heading %}
            {% import "system/macro/row/codearea.html.twig" as row_codearea %}

            {% block header %}
                <div class="bc-flex bc-justify-between bc-items-center">
                    <h3 class="bc-text-lg bc-font-medium bc-leading-6 bc-mb-0">{{ adjustTimezone(config.log.createdAt).format('Y-m-d H:i:s') }}</h3>
                    <div class="bc-flex">
                        {{ log_level.component({
                            level: config.log.level,
                        }, localized) }}
                    </div>
                </div>
            {% endblock %}

            {% block content %}
                {% import "system/macro/row/text.html.twig" as row_text %}

                {{ row_text.component({
                    label: localized.field.processId,
                    value: config.log.processId,
                }) }}

                {% embed "system/embed/form-row.html.twig" %}
                    {% block label %}
                        <div class="bc-flex bc-items-center">
                            <span>{{ localized.field.message | raw }}</span>
                        </div>
                    {% endblock %}

                    {% block input %}
                        {{ config.log.message }}
                    {% endblock %}
                {% endembed %}

                {% if config.log.context is not empty %}
                    {{ row_codearea.component({
                        clipboard: true,
                        editorLanguage: 'javascript',
                        id: 'context-' ~ config.log.id ~ (config.originalLog.id ? '-' ~ config.originalLog.id : ''),
                        label: localized.field.context,
                        value: config.log.context | json_encode(constant('JSON_PRETTY_PRINT')),
                    }) }}
                {% endif %}

                {% if config.log.backtrace is not empty %}
                    {{ row_codearea.component({
                        clipboard: true,
                        editorLanguage: 'javascript',
                        id: 'backtrace-' ~ config.log.id ~ (config.originalLog.id ? '-' ~ config.originalLog.id : ''),
                        label: localized.field.backtrace,
                        value: config.log.backtrace | json_encode(constant('JSON_PRETTY_PRINT')),
                    }) }}
                {% endif %}
            {% endblock %}
        {% endembed %}
    </div>
{% endmacro %}
