{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<div class="eventwidget">
    <h1>
        Status CRM / Typo3 API
    </h1>

    <table style="width: 100%;">
        <tr>
            <th style="width: 100px;">Type</th>
            <th style="width: 100px;">Status</th>
            <th style="width: 100px;">Synced</th>
            <th>Message</th>
        </tr>
        <f:for each="{items}" as="item">
            <v:condition.string.contains haystack="{item.status}" needle="error">
                <f:then>
                    <!-- 'error' found in the string, do something -->
                    <f:variable name="color" value="color:red;"/>
                </f:then>
                <f:else>
                    <v:condition.string.contains haystack="{item.status}" needle="warning">
                        <f:then>
                            <!-- 'warning' found in the string, do something -->
                            <f:variable name="color" value="color:darkorange;"/>
                        </f:then>
                        <f:else>
                            <v:condition.string.contains haystack="{item.status}" needle="done">
                                <f:then>
                                    <f:variable name="color" value="color:green;"/>
                                </f:then>
                            </v:condition.string.contains>
                        </f:else>
                    </v:condition.string.contains>
                </f:else>
            </v:condition.string.contains>

            <tr style="{color}">
                <td>{item.type}</td>
                <td>{item.status}</td>
                <td>{item.create_date}</td>
                <td>
                    <f:if condition="{item.msg} != {item.msg -> f:format.crop(maxCharacters: 300, append: '')}">
                        <f:then>
                            <p>Message Too long</p>
                            <button type="button" class="btn btn-primary open-modal-btn" data-msg="{item.msg}">
                                More Info
                            </button>
                        </f:then>
                        <f:else>
                            <f:format.nl2br>
                                <f:format.html>{item.msg}</f:format.html>
                            </f:format.nl2br>
                        </f:else>
                    </f:if>
                </td>
            </tr>
        </f:for>
    </table>
    <!--
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#eventwidget-modal">
        Open Modal Test
    </button>
    -->
    <div class="modal fade" id="eventwidget-modal" tabindex="-1" aria-labelledby="eventwidget-modal-title"
         aria-hidden="true" data-bs-backdrop="false">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="eventwidget-modal-title">Message</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- This is the modal content -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>