<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:be.pageRenderer
        includeJavaScriptModules="{
            0: '@typo3/extensionmanager/main.js'
        }"
    />

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

    <h1><f:translate key="extensionComposerStatus" /></h1>

    <f:if condition="{extensions}">
        <f:then>
            <f:be.infobox title="Invalid composer.json files in extensions" state="-1">
                <p><f:translate key="extensionList.composerStatus.information" /></p>
                <p><f:translate key="extensionList.composerStatus.thirdParty" /></p>
                <h4 class="mt-3"><f:translate key="extensionList.composerStatus.missingManifest" /></h4>
                <p><f:translate key="extensionList.composerStatus.terRequest" /></p>
                <p><f:translate key="extensionList.composerStatus.additionalInformation" />: <f:link.typolink parameter="https://extensions.typo3.org/help/composer-support" />.</p>
            </f:be.infobox>
            <div class="table-fit">
                <table id="typo3-extension-list" class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th data-filterable><f:translate key="extensionList.header.extensionName" /></th>
                            <th data-filterable data-sort-default><f:translate key="extensionList.header.extensionKey" /></th>
                            <th data-filterable><f:translate key="extensionList.header.extensionDeficit" /></th>
                            <th data-sort-method="none"><f:translate key="extensionList.header.extensionActions" /></th>
                        </tr>
                    </thead>
                    <tbody>
                        <f:for each="{extensions}" as="extension" key="extensionKey">
                            <tr role="row" id="{extensionKey}">
                                <td>
                                    <f:render section="Icon" arguments="{extension: extension}" />
                                    <a href="{extension.detailLink}" title="{f:translate(key:'extensionList.showComposerProposal')}" class="btn btn-link p-0">
                                        <f:format.crop maxCharacters="50">{extension.title}</f:format.crop>
                                    </a>
                                </td>
                                <td>
                                    {extensionKey}
                                </td>
                                <td>
                                    <span class="badge {f:if(condition: '{extension.deficit} == 2', then: 'badge-warning', else: 'badge-danger')}">{f:translate(key: 'extensionComposerStatus.deficit.{extension.deficit}.short')}</span>
                                </td>
                                <td>
                                    <f:if condition="{extension.deficit} == 2">
                                        <f:then>
                                            <a href="{extension.detailLink}" title="{f:translate(key:'extensionList.showComposerProposal')}" class="btn btn-default">
                                                <core:icon identifier="actions-document-synchronize" />
                                                {f:translate(key:'extensionList.showComposerProposal')}
                                            </a>
                                        </f:then>
                                        <f:else>
                                            <a href="{extension.detailLink}" title="{f:translate(key:'extensionList.fetchComposerProposal.details')}" class="btn btn-warning">
                                                <core:icon identifier="actions-document-synchronize" />
                                                {f:translate(key:'extensionList.fetchComposerProposal')}
                                            </a>
                                        </f:else>
                                    </f:if>
                                </td>
                            </tr>
                        </f:for>
                    </tbody>
                </table>
            </div>
        </f:then>
        <f:else>
            <f:be.infobox title="{f:translate(key: 'extensionComposerStatus.nothingToUpdate.title')}"
                message="{f:translate(key: 'extensionComposerStatus.nothingToUpdate.message.multiple')}"
                state="-1" />
        </f:else>
    </f:if>
</f:section>

<f:section name="Icon">
    <f:if condition="{extension.icon}">
        <f:then>
            <img class="extension-icon" src="{extension.icon}" alt="{extension.title}" />
        </f:then>
        <f:else>
            <core:icon identifier="empty-empty" />
        </f:else>
    </f:if>
</f:section>

</html>
