{namespace neos=Neos\Neos\ViewHelpers}
{namespace sync=Newland\Toubiz\Sync\Neos\ViewHelpers}

<style>
    .log-nav {
        margin-bottom: 20px !important;
    }

    .log-nav > * {
        padding: 10px !important;
    }

    .log-item {
        border-left: 15px solid grey;
    }

    .log-item:not(:last-child) {
        border-bottom: 15px solid #222;
    }

    .log-item--info {
        border-left-color: cornflowerblue;
    }

    .log-item--warning {
        border-left-color: orange;
    }

    .log-item--error {
        border-left-color: orangered;
    }

    .log-item--emergency {
        border-left-color: red;
    }

    .log-item pre {
        line-height: 1.5em;
    }

    .log-item time {
        color: #555;
    }

    .log-item summary {
        cursor: pointer;
    }

    .item-list li {
        display: flex;
    }

    .item-list li:not(:last-child) {
        border-bottom: 1px solid rgba(255, 255, 255, .125);
    }

    .item-list li strong {
        display: inline-block;
        width: 150px;
    }

</style>

<div class="log-nav">
    <f:for each="{files}" as="path" key="date">
        <f:link.action
            action="index"
            arguments="{activeDate: date}"
            class="neos-badge {f:if(condition: '{date} == {activeDate}', then: 'neos-badge-info')}"
        >
            {date}
        </f:link.action>
    </f:for>
</div>


<table class="neos-table">
    <f:for each="{currentLogItems}" as="logItem">
        <tr class="log-item log-item--{f:format.case(value: logItem.level_name, mode: 'lower')}">
            <td>
                <details>
                    <summary>
                        <time>[{logItem.datetime -> f:format.date(format: 'Y-m-d H:i:s')}]</time>
                        {logItem.message}
                    </summary>
                    <ul class="item-list">
                        <f:for each="{logItem.forUser}" as="value" key="key">
                            <li>
                                <strong>{key}: </strong>
                                <f:if condition="{value -> neos:getType()} == 'string'">
                                    <f:then>{value}</f:then>
                                    <f:else>
                                        <pre>{value -> sync:prettyJson()}</pre>
                                    </f:else>
                                </f:if>
                            </li>
                        </f:for>
                    </ul>
                </details>
            </td>
        </tr>
    </f:for>
</table>