{namespace m=Neos\Media\ViewHelpers}
{namespace neos=Neos\Neos\ViewHelpers}
{namespace assetAttributes=DigiComp\AssetAttributes\ViewHelpers}
<f:layout name="EditImage"/>

<f:section name="Title">Edit view</f:section>

<f:section name="Content">
    <f:if condition="{connectionError}">
        <f:then>
            <h2>{neos:backend.translate(id: 'connectionError', package: 'Neos.Media.Browser')}</h2>
            <p>{connectionError.message} ({connectionError.code})</p>
        </f:then>
        <f:else>

            <f:if condition="{variantsTabFeatureEnabled} && {canShowVariants} && {assetProxy.localAssetIdentifier}">
                <ul class="neos-nav neos-nav-tabs" role="tablist">
                    <li role="presentation" class="neos-active">
                        <a href="#" role="tab">Overview</a>
                    </li>
                    <li role="presentation">
                        <f:link.action action="variants" arguments="{assetSourceIdentifier: assetProxy.assetSource.identifier, assetProxyIdentifier: assetProxy.identifier, overviewAction: 'edit'}" addQueryString="true">Variants</f:link.action>
                    </li>
                </ul>
            </f:if>

            <div class="neos-tab-content">
                <div role="tabpanel" class="neos-tab-pane neos-active">
                    <f:form method="post" action="update" object="{assetProxy.asset}" objectName="asset">
                        <div class="neos-row-fluid">
                            <div class="neos-span6 neos-image-inputs">
                                <fieldset>
                                    <f:if condition="{assetProxy.imported}">
                                        <f:then>
                                            <legend>{neos:backend.translate(id: 'basics', package: 'Neos.Media.Browser')}</legend>
                                            <label for="title">{neos:backend.translate(id: 'field.title', package: 'Neos.Media.Browser')}</label>
                                            <input id="title" readonly="readonly" value="{assetProxy.iptcProperties.Title}"/>
                                            <label for="caption">{neos:backend.translate(id: 'field.caption', package: 'Neos.Media.Browser')}</label>
                                            <textarea id="caption" rows="3" readonly="readonly">{assetProxy.iptcProperties.CaptionAbstract}</textarea>
                                            <label for="copyrightnotice">{neos:backend.translate(id: 'field.copyrightnotice', package: 'Neos.Media.Browser')}</label>
                                            <textarea id="copyrightnotice" rows="2" readonly="readonly">{assetProxy.iptcProperties.CopyrightNotice}</textarea>
                                        </f:then>
                                        <f:else>
                                            <legend>{neos:backend.translate(id: 'basics', package: 'Neos.Media.Browser')}</legend>
                                            <label for="title">{neos:backend.translate(id: 'field.title', package: 'Neos.Media.Browser')}</label>
                                            <f:form.textfield property="title" id="title" placeholder="{neos:backend.translate(id: 'field.title', package: 'Neos.Media.Browser')}"/>
                                            <label for="caption">{neos:backend.translate(id: 'field.caption', package: 'Neos.Media.Browser')}</label>
                                            <f:form.textarea property="caption" id="caption" rows="3" placeholder="{neos:backend.translate(id: 'field.caption', package: 'Neos.Media.Browser')}"/>
                                            <f:for each="{assetAttributes:customAttributes()}" key="attribute" as="attributeOptions">
                                                <label for="attributes.{attribute}.value">{neos:backend.translate(id: '{attribute}.caption', package: 'DigiComp.AssetAttributes')}</label>
                                                <f:switch expression="{attributeOptions.type}">
                                                    <f:case value="textarea">
                                                        <f:form.textarea property="attributes.{attribute}.value" id="attributes.{attribute}.value" rows="3" placeholder="{neos:backend.translate(id: '{attribute}.placeholder', package: 'DigiComp.AssetAttributes')}"/>
                                                    </f:case>
                                                    <f:defaultCase>
                                                        <f:form.textfield property="attributes.{attribute}.value" id="attributes.{attribute}.value"  placeholder="{neos:backend.translate(id: '{attribute}.placeholder', package: 'DigiComp.AssetAttributes')}"/>
                                                    </f:defaultCase>
                                                </f:switch>
                                                <f:form.hidden property="attributes.{attribute}.name" value="{attribute}" />
                                            </f:for>
                                            <label for="copyrightnotice">{neos:backend.translate(id: 'field.copyrightnotice', package: 'Neos.Media.Browser')}</label>
                                            <f:form.textarea property="copyrightNotice" id="copyrightnotice" rows="2" placeholder="{neos:backend.translate(id: 'field.copyrightnotice', package: 'Neos.Media.Browser')}"/>
                                        </f:else>
                                    </f:if>
                                    <f:if condition="{tags}">
                                        <label>{neos:backend.translate(id: 'tags', package: 'Neos.Media.Browser')}</label>
                                        <f:for each="{tags}" as="tag">
                                            <label class="neos-checkbox neos-inline">
                                                <m:form.checkbox property="tags" multiple="TRUE" value="{tag}" /><span></span> {tag.label}
                                            </label>
                                        </f:for>
                                    </f:if>
                                    <f:if condition="{assetCollections}">
                                        <label>{neos:backend.translate(id: 'collections', package: 'Neos.Media.Browser')}</label>
                                        <f:for each="{assetCollections}" as="assetCollection">
                                            <label class="neos-checkbox neos-inline">
                                                <m:form.checkbox property="assetCollections" multiple="TRUE" value="{assetCollection}" /><span></span> {assetCollection.title}
                                            </label>
                                        </f:for>
                                    </f:if>
                                </fieldset>
                                <fieldset>
                                    <legend>{neos:backend.translate(id: 'metadata', package: 'Neos.Media.Browser')}</legend>
                                    <table class="neos-info-table">
                                        <tbody>
                                        <f:if condition="{assetProxy.assetSource}">
                                            <tr>
                                                <th>{neos:backend.translate(id: 'mediaSource', package: 'Neos.Media.Browser')}</th>
                                                <td>{assetProxy.assetSource.label}</td>
                                            </tr>
                                        </f:if>
                                        <tr>
                                            <th>{neos:backend.translate(id: 'metadata.filename', package: 'Neos.Media.Browser')}</th>
                                            <td><a href="#" target="_blank">{assetProxy.filename}</a></td>
                                        </tr>
                                        <tr>
                                            <th>{neos:backend.translate(id: 'metadata.lastModified', package: 'Neos.Media.Browser')}</th>
                                            <td><span title="{assetProxy.lastModified -> f:format.date(format: 'd-m-Y H:i')}" data-neos-toggle="tooltip">{assetProxy.lastModified -> m:format.relativeDate()}</span></td>
                                        </tr>
                                        <tr>
                                            <th>{neos:backend.translate(id: 'metadata.fileSize', package: 'Neos.Media.Browser')}</th>
                                            <td>{assetProxy.fileSize -> f:format.bytes()}</td>
                                        </tr>
                                        <f:if condition="{assetProxy.iptcProperties.CopyrightNotice}">
                                            <tr>
                                                <th>{neos:backend.translate(id: 'metadata.iptcProperties.CopyrightNotice', package: 'Neos.Media.Browser')}</th>
                                                <td>{assetProxy.iptcProperties.CopyrightNotice}</td>
                                            </tr>
                                        </f:if>
                                        <f:if condition="{assetProxy.widthInPixels}">
                                            <tr>
                                                <th>{neos:backend.translate(id: 'metadata.dimensions', package: 'Neos.Media.Browser')}</th>
                                                <td>{assetProxy.widthInPixels} x {assetProxy.heightInPixels}</td>
                                            </tr>
                                        </f:if>
                                        <tr>
                                            <th>{neos:backend.translate(id: 'metadata.type', package: 'Neos.Media.Browser')}</th>
                                            <td><span class="neos-label">{assetProxy.mediaType}</span></td>
                                        </tr>
                                        <tr>
                                            <th>{neos:backend.translate(id: 'metadata.identifier', package: 'Neos.Media.Browser')}</th>
                                            <td><span class="neos-label">{assetProxy.localAssetIdentifier}</span></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <f:if condition="{assetProxy.asset.inUse}">
                                        <f:link.action action="relatedNodes" arguments="{asset:assetProxy.asset}" addQueryString="true" class="neos-button">
                                            {neos:backend.translate(id: 'relatedNodes', quantity: '{assetProxy.asset.usageCount}', arguments: {0: assetProxy.asset.usageCount}, package: 'Neos.Media.Browser')}
                                        </f:link.action>
                                    </f:if>
                                </fieldset>
                            </div>
                            <div class="neos-span6 neos-image-example">
                                <f:render partial="{contentPreview}Preview" arguments="{_all}" />
                            </div>
                        </div>
                        <div class="neos-footer">
                            <f:link.action action="index" addQueryString="true" class="neos-button neos-action-cancel">{neos:backend.translate(id: 'cancel', package: 'Neos.Neos')}</f:link.action>
                            <f:if condition="!{assetSource.readOnly}">
                                <f:security.ifAccess privilegeTarget="Neos.Media.Browser:ReplaceAssetResource">
                                    <f:link.action action="replaceAssetResource" arguments="{asset: assetProxy.asset}" addQueryString="true" class="neos-button" title="{neos:backend.translate(id: 'replaceAssetResource', package: 'Neos.Media.Browser')}" data="{neos-toggle: 'tooltip', container: 'body'}">
                                        {neos:backend.translate(id: 'replaceAssetResource', package: 'Neos.Media.Browser')}
                                    </f:link.action>
                                </f:security.ifAccess>
                                <f:if condition="{assetProxy.asset.inUse}">
                                    <f:then>
                                        <a title="{neos:backend.translate(id: 'deleteRelatedNodes', package: 'Neos.Media.Browser')}" data-neos-toggle="tooltip" data-container="body" class="neos-button neos-button-danger neos-disabled">{neos:backend.translate(id: 'delete', package: 'Neos.Neos')}</a>
                                    </f:then>
                                    <f:else>
                                        <a data-toggle="modal" href="#asset-{assetProxy.asset -> f:format.identifier()}" class="neos-button neos-button-danger">{neos:backend.translate(id: 'delete', package: 'Neos.Neos')}</a>
                                    </f:else>
                                </f:if>
                                <f:form.submit id="save" class="neos-button neos-button-primary" value="{neos:backend.translate(id: 'saveEditing', package: 'Neos.Media.Browser')}" />
                            </f:if>
                        </div>
                        <div class="neos-hide" id="asset-{assetProxy.localAssetIdentifier}">
                            <div class="neos-modal-centered">
                                <div class="neos-modal-content">
                                    <div class="neos-modal-header">
                                        <button type="button" class="neos-close neos-button" data-dismiss="modal"></button>
                                        <div class="neos-header">
                                            {neos:backend.translate(id: 'message.reallyDeleteAsset', arguments: {0: assetProxy.label}, package: 'Neos.Media.Browser')}
                                        </div>
                                        <div>
                                            <div class="neos-subheader">
                                                <p>
                                                    {neos:backend.translate(id: 'message.willBeDeleted', package: 'Neos.Media.Browser')}<br />
                                                    {neos:backend.translate(id: 'message.operationCannotBeUndone', package: 'Neos.Media.Browser')}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="neos-modal-footer">
                                        <a href="#" class="neos-button" data-dismiss="modal">{neos:backend.translate(id: 'cancel', package: 'Neos.Neos')}</a>
                                        <button type="submit" form="postHelper" formaction="{f:uri.action(action: 'delete', arguments: {asset: assetProxy.asset}, addQueryString: true)}" class="neos-button neos-button-mini neos-button-danger">
                                            {neos:backend.translate(id: 'message.confirmDelete', package: 'Neos.Media.Browser')}
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="neos-modal-backdrop neos-in"></div>
                        </div>
                        <f:render partial="ConstraintsHiddenFields" arguments="{constraints: constraints}" />
                    </f:form>
                    <f:form action="index" id="postHelper" method="post">
                        <f:render partial="ConstraintsHiddenFields" arguments="{constraints: constraints}" />
                    </f:form>
                </div>
            </div>

        </f:else>
    </f:if>
</f:section>

<f:section name="ContentImage">
    <label>{neos:backend.translate(id: 'preview', package: 'Neos.Media.Browser')}</label>
    <div class="neos-preview-image">
        <a href="{assetProxy.originalUri}" target="_blank">
            <img src="{assetProxy.previewUri}" class="img-polaroid" alt="{assetProxy.label}"/>
        </a>
    </div>
</f:section>

<f:section name="Scripts">
    <script type="text/javascript" src="{f:uri.resource(package: 'Neos.Media.Browser', path: 'JavaScript/edit.js')}"></script>
</f:section>