<f:if condition="{mainMenu}">
    <f:then>
        <f:be.pageRenderer includeRequireJsModules="{0:'TYPO3/CMS/Taskcenter/Taskcenter'}" />
        <ul id="task-list" class="list-unstyled">
    </f:then>
    <f:else>
        <ul class="list-unstyled">
    </f:else>
</f:if>
<f:for each="{items}" as="item" key="itemKey">
    <f:render section="Item" arguments="{item: item, itemKey: itemKey}" />
</f:for>

</ul>

<f:section name="Item">
    <li id="el_{item.uniqueKey}">
        <div id="{item.contentId}" data-taskcenter-id="{item.uniqueKey}" class="panel {item.panelState}">
            <div class="panel-heading">
                <div class="panel-heading-right">
                    <a href="#task_content_{item.contentId}" class="panel-header-collapse t3js-taskcenter-header-collapse" role="button" data-toggle="collapse" data-uid="{item.contentId}" aria-expanded="{item.ariaExpanded}">
                        <core:icon identifier="{item.collapseIcon}" />
                    </a>
                </div>
                <div class="panel-heading-left">
                    <a href="{item.link}" class="panel-title">
                        <f:if condition="{item.icon}">
                            <span class="panel-title-icon">
                                <f:if condition="{item.iconFile}">
                                    <f:then>
                                        <img src="{item.iconFile}" width="16" height="16" title="{item.title}" alt="{item.title}" />
                                    </f:then>
                                    <f:else>
                                        {item.icon -> f:format.raw()}
                                    </f:else>
                                </f:if>
                            </span>
                        </f:if>
                        <span class="panel-title-name">
                            {item.title}
                            <core:icon identifier="actions-view-table-expand" />
                        </span>
                    </a>
                </div>
            </div>
            <div id="task_content_{item.contentId}" class="panel-collapse collapse t3js-taskcenter-collapse {item.collapsed}" aria-expanded="true">
                <div class="panel-body">
                    <f:if condition="{item.descriptionHtml}">
                        <f:then>
                            {item.descriptionHtml -> f:format.raw()}
                        </f:then>
                        <f:else>
                            <p>
                                {item.description -> f:format.nl2br()}
                            </p>
                        </f:else>
                    </f:if>
                </div>
            </div>
        </div>
    </li>
</f:section>