<html
    xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
    xmlns:core="http://typo3.org/ns/TYPO3/CMS/Core/ViewHelpers"
    xmlns:em="http://typo3.org/ns/TYPO3/CMS/Extensionmanager/ViewHelpers"
    data-namespace-typo3-fluid="true"
>

<f:layout name="Module" />

<f:section name="Content">

    <f:asset.module identifier="@typo3/extensionmanager/main.js"/>

    <em:be.trigger triggers="{triggers}" />

    <h1><f:translate key="installedExtensions" /></h1>
    <f:render partial="List/UploadForm" />
    <form>
        <div class="form-row justify-content-between">
            <div class="form-group">
                <label for="Tx_Extensionmanager_extensionkey" class="form-label"><f:translate key="extensionList.search"/></label>
                <div class="input-group">
                    <f:form.textfield name="Tx_Extensionmanager_extensionkey" id="Tx_Extensionmanager_extensionkey" value="{search}" class="form-control extension-list-search" />
                    <button type="submit" class="btn btn-default">
                        <span class="visually-hidden"><f:translate id="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.title.search"/></span>
                        <core:icon identifier="actions-search" />
                    </button>
                </div>
            </div>
            <div class="form-group">
                <div class="btn-group">
                    <f:link.action
                        action="index"
                        controller="List"
                        title="{f:translate(key:'extensionList.filter.showAll')}"
                        arguments="{filter:''}"
                        class="btn btn-default {f:if(condition: '{typeFilter} == All', then: 'active')}"
                        style="width: 80px;">
                        <f:translate key="extensionList.filter.showAll" />
                    </f:link.action>
                    <f:link.action
                        action="index"
                        controller="List"
                        arguments="{filter:'System'}"
                        title="{f:translate(key:'extensionList.filter.showSystemExtensions')}"
                        class="btn btn-default {f:if(condition: '{typeFilter} == System', then: 'active')}"
                        style="width: 80px;">
                        <f:translate key="extensionList.filter.showSystemExtensions" />
                    </f:link.action>
                    <f:link.action
                        action="index"
                        controller="List"
                        arguments="{filter:'Local'}"
                        title="{f:translate(key:'extensionList.filter.showLocalExtensions')}"
                        class="btn btn-default {f:if(condition: '{typeFilter} == Local', then: 'active')}"
                        style="width: 80px;">
                        <f:translate key="extensionList.filter.showLocalExtensions" />
                    </f:link.action>
                </div>
            </div>
        </div>
    </form>
    <div class="table-fit">
        <table id="typo3-extension-list" class="table table-striped table-hover extension-list">
            <thead>
                <tr>
                    <th {f:if(condition: sortByUpdate, then: 'data-sort-default')} title="{f:translate(key:'extensionList.header.title.update')}"><f:translate key="extensionList.header.update"/></th>
                    <th title="{f:translate(key:'extensionList.header.title.activate')}"><f:translate key="extensionList.header.activate"/></th>
                    <th data-filterable><f:translate key="extensionList.header.extensionName"/></th>
                    <th {f:if(condition: '!{sortByUpdate}', then: 'data-sort-default')} data-filterable><f:translate key="extensionList.header.extensionKey"/></th>
                    <th data-sort-method="dotsep"><f:translate key="extensionList.header.extensionVersion"/></th>
                    <th data-sort-method="none"><f:translate key="extensionList.header.extensionState"/></th>
                    <th><f:translate key="extensionList.header.extensionType"/></th>
                    <th data-sort-method="none"><f:translate key="extensionList.header.extensionActions"/></th>
                </tr>
            </thead>
            <tbody>
                <f:for each="{extensions}" as="extension" key="extensionKey">
                    <f:if condition="{extension.terObject}">
                        <f:then>
                            <tr role="row" id="{extensionKey}" class="{f:if(condition:'{extension.terObject.reviewState} == -1', then:'insecure')}{f:if(condition:'{extension.terObject.reviewState} == -2', then:'outdated')} {f:if(condition:'{extension.installed}', then: '', else: 'inactive')}">
                        </f:then>
                        <f:else>
                            <tr role="row" id="{extensionKey}" class="{f:if(condition:'{extension.installed}', then: '', else: 'inactive')}">
                        </f:else>
                    </f:if>
                    <td data-sort="{extension.sortUpdate}">
                        <f:if condition="{extension.updateAvailable}">
                            <f:if condition="{extension.updateIsBlocked}">
                                <f:then>
                                    <span class="btn btn-default disabled" title="{f:translate(key:'extensionList.updateDisabled')}">
                                        <core:icon identifier="actions-system-extension-update" />
                                    </span>
                                </f:then>
                                <f:else>
                                    <f:link.action action="updateCommentForUpdatableVersions"
                                        class="btn btn-default"
                                        additionalAttributes="{data-action:'update-extension'}"
                                        format="json" controller="Download"
                                        arguments="{extension:extension.key, integerVersionStart: extension.terObject.integerVersion, integerVersionStop: extension.updateToVersion.integerVersion}"
                                        title="{f:translate(key:'extensionList.updateToVersion', arguments:'{0:extension.updateToVersion.version}')}"
                                    >
                                        <core:icon identifier="actions-system-extension-update" />
                                    </f:link.action>
                                </f:else>
                            </f:if>
                        </f:if>
                    </td>
                    <td data-sort="{f:if(condition: extension.installed, then: 'active', else: 'inactive')}">
                        <em:toggleExtensionInstallationState extension="{extension}" />
                    </td>
                    <td>
                        <div class="d-flex align-items-center">
                            <f:if condition="{extension.icon}">
                                <img class="extension-icon" src="{extension.icon}" alt="{extension.title}" />
                            </f:if>
                            <span title="{extension.description}">{extension.title}</span>
                        </div>
                    </td>
                    <td>{extensionKey}</td>
                    <td>
                        <f:if condition="{extension.terObject}">
                            <f:then>
                                <f:link.action action="showAllVersions" arguments="{extensionKey: extensionKey, returnTo: 'index'}" title="{f:translate(key:'showAllVersions')}">
                                    {extension.version}
                                </f:link.action>
                            </f:then>
                            <f:else>
                                {extension.version}
                            </f:else>
                        </f:if>
                    </td>
                    <td><span class="badge badge-{extension.state}">{extension.state}</span></td>
                    <td>{extension.type}</td>
                    <td>
                        <div class="btn-group">
                            <em:processAvailableActions extension="{extension}">
                                <f:if condition="!{isComposerMode}">
                                    <em:removeExtension class="removeExtension btn btn-default" extension="{extension}" />
                                    <f:link.action action="downloadExtensionZip" controller="Action" arguments="{extension:extension.key}" title="{f:translate(key:'extensionList.downloadzip')}" class="btn btn-default">
                                        <core:icon identifier="actions-system-extension-download" />
                                    </f:link.action>
                                </f:if>
                                <em:reloadSqlData class="reloadSqlData btn btn-default" extension="{extension}" />
                                <f:if condition="{extension.terObject.documentationLink}">
                                    <f:then>
                                        <a href="{extension.terObject.documentationLink}" target="_blank" rel="noopener noreferrer" class="btn btn-default">
                                            <core:icon identifier="actions-system-extension-documentation" size="small" />
                                        </a>
                                    </f:then>
                                    <f:else>
                                        <span class="btn btn-default disabled"><core:icon identifier="empty-empty" size="small" /></span>
                                    </f:else>
                                </f:if>
                            </em:processAvailableActions>
                        </div>
                    </td>
                    </tr>
                </f:for>
            </tbody>
        </table>
    </div>

</f:section>

</html>
