{namespace em=TYPO3\CMS\Extensionmanager\ViewHelpers}
<div class="table-fit">
    <table id="{tableId}" class="table table-striped table-hover extension-list">
        <thead>
            <tr>
                <th><f:translate key="extensionList.header.extensionActions"/></th>
                <th><f:translate key="extensionList.header.extensionName"/></th>
                <th><f:translate key="extensionList.header.extensionKey"/></th>
                <th><f:translate key="extensionList.header.version"/></th>
                <th><f:translate key="extensionList.header.lastUpdate"/></th>
                <th><f:translate key="extensionList.header.description"/></th>
                <th><f:translate key="extensionList.header.manual"/></th>
                <th><f:translate key="extensionList.header.extensionState"/></th>
            </tr>
        </thead>
        <tbody>
            <f:for each="{extensions}" as="extension">
                <tr class="{em:installationStateCssClass(needle:extension.extensionKey, haystack:availableAndInstalled)}">
                    <td><em:downloadExtension class="download" extension="{extension}" /></td>
                    <td>
                        <f:link.action action="showAllVersions" arguments="{extensionKey: extension.extensionKey}" title="{f:translate(key:'extensionList.showAllVersions.label')}">
                            {extension.title}
                        </f:link.action>
                    </td>
                    <td>
                        <f:link.action action="showAllVersions" arguments="{extensionKey: extension.extensionKey}" title="{f:translate(key:'extensionList.showAllVersions.label')}">
                            {extension.extensionKey}
                        </f:link.action>
                    </td>
                    <td>
                        <f:link.action action="showAllVersions" arguments="{extensionKey: extension.extensionKey}" title="{f:translate(key:'extensionList.showAllVersions.label')}">
                            {extension.version}
                        </f:link.action>
                    </td>
                    <td><f:format.date>{extension.lastUpdated}</f:format.date></td>
                    <td title="{extension.description}">
                        <f:format.crop maxCharacters="50" respectWordBoundaries="true" respectHtml="false">{extension.description}</f:format.crop>
                    </td>
                    <td>
                        <f:if condition="{extension.documentationLink}">
                            <a href="{extension.documentationLink}" class="btn btn-default" target="_blank" rel="noreferrer" title="{f:translate(key: 'extensionList.showAllVersions.readOnline')}">
                                <core:icon identifier="actions-system-extension-documentation" size="small" />
                            </a>
                        </f:if>
                    </td>
                    <td><span class="badge badge-{extension.stateString}">{extension.stateString}</span></td>
                </tr>
            </f:for>
        </tbody>
    </table>
</div>
