<html
    xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/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}" />

    <div class="distribution-detail">
        <div class="distribution-detail-previewpane">
            <typo3-extensionmanager-distribution-image
                welcomeImage="{extension.distributionWelcomeImage}"
                image="{extension.distributionImage}"
                fallback="{f:uri.image(src: 'EXT:extensionmanager/Resources/Public/Images/Distribution.svg')}"
                alt="{extension.title}"
                title="{extension.title}"/>
        </div>
        <div class="distribution-detail-body">
            <div class="distribution-detail-header">
                <h1>{extension.title}</h1>
                <p>{extension.description}</p>
            </div>

            <f:form id="installDistributionForm" action="installDistribution" controller="Download"></f:form>

            <ul class="distribution-detail-actions">
                <f:if condition="{distributionActive}">
                    <f:else>
                        <li>
                            <f:form.button form="installDistributionForm" type="submit" name="extension" value="{extension}" class="btn btn-default t3-button-action-installdistribution">
                                <core:icon identifier="actions-system-extension-import" /> <f:translate key="extensionList.installDistribution">Install</f:translate>
                            </f:form.button>
                        </li>
                    </f:else>
                    <f:then>
                        <li>
                            <button class="btn btn-default distribution-openViewModule"
                                    data-dispatch-action="TYPO3.ModuleMenu.showModule"
                                    data-dispatch-args-list="page_preview">
                                <core:icon identifier="actions-document-view" /> <f:translate key="distribution.welcome.openViewModule" />
                            </button>
                        </li>
                        <li>
                            <button class="btn btn-default distribution-openPageModule"
                                    data-dispatch-action="TYPO3.ModuleMenu.showModule"
                                    data-dispatch-args-list="web_layout">
                                <core:icon identifier="actions-open" /> <f:translate key="distribution.welcome.openPageModule" />
                            </button>
                        </li>
                    </f:then>
                </f:if>
            </ul>

            <dl class="row mt-4 mb-4">
                <dt class="col-sm-2"><f:translate key="extensionList.distribution.title" /></dt>
                <dd class="col-sm-10">{extension.title}</dd>
                <dt class="col-sm-2"><f:translate key="extensionList.distribution.key" /></dt>
                <dd class="col-sm-10">{extension.extensionKey}</dd>
                <dt class="col-sm-2"><f:translate key="extensionList.distribution.version" /></dt>
                <dd class="col-sm-10">{extension.version} (<f:format.date format="d.m.Y">{extension.lastUpdated}</f:format.date>)<br><span class="{extension.stateString}">{extension.stateString}</span></dd>
                <dt class="col-sm-2"><f:translate key="extensionList.distribution.author" /></dt>
                <dd class="col-sm-10">{extension.authorName}</dd>
                <dt class="col-sm-2"><f:translate key="extensionList.distribution.downloads" /></dt>
                <dd class="col-sm-10">{extension.alldownloadcounter}</dd>
            </dl>

            <f:if condition="{extension.dependencies}">
                <h2><f:translate key="distribution.dependency.headline" /></h2>
                <div class="table-fit">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <td><f:translate key="distribution.dependency.identifier" /></td>
                                <td><f:translate key="distribution.dependency.type" /></td>
                                <td><f:translate key="distribution.dependency.version" /></td>
                            </tr>
                        </thead>
                        <tbody>
                            <f:for each="{extension.dependencies}" as="dependency">
                                <tr>
                                    <td>{dependency.identifier}</td>
                                    <td>{dependency.type}</td>
                                    <td>
                                        {dependency.lowestVersion}<f:if condition="{dependency.highestVersion}">-{dependency.highestVersion}</f:if>
                                    </td>
                                </tr>
                            </f:for>
                        </tbody>
                    </table>
                </div>
            </f:if>

        </div>
    </div>

</f:section>

</html>
