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

<f:layout name="Module" />

<f:section name="Before">
    <f:asset.module identifier="@typo3/backend/utility/collapse-state-persister.js"/>
</f:section>

<f:section name="Content">
    <f:if condition="{accessAllowed}">
        <f:then>
            <f:if condition="{hookContent}">
                <f:then>
                    <f:format.raw>{hookContent}</f:format.raw>
                </f:then>
                <f:else>
                    <f:render section="nativeContent" arguments="{_all}" />
                </f:else>
            </f:if>
        </f:then>
        <f:else>
            <f:be.infobox state="{f:constant(name: 'TYPO3\CMS\Core\Type\ContextualFeedbackSeverity::ERROR')}">{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.noEditPermission')}</f:be.infobox>
        </f:else>
    </f:if>
</f:section>

<f:section name="nativeContent">
    <div class="card-container">
        <div class="card card-size-medium">
            <div class="card-header">
                <div class="card-icon">
                    {icon -> f:format.raw()}
                </div>
                <div class="card-header-body">
                    <h2 class="card-title">{title -> f:format.crop(maxCharacters: maxTitleLength)}<f:if condition="{extraFields.uid.value}"><code>[{extraFields.uid.value}]</code></f:if></h2>
                    <f:if condition="{table}">
                        <span class="card-subtitle">{table}</span>
                    </f:if>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <f:for each="{extraFields}" as="extraField">
                        <f:if condition="{extraField.isDatetime}">
                            <div class="col-md-6">
                                <strong>{extraField.fieldLabel}</strong><br>
                                {extraField.value}
                            </div>
                        </f:if>
                    </f:for>
                </div>
                <f:if condition="{extraFields.creatorRecord}">
                    <div class="row mt-3">
                        <div class="col-md-12">
                            <strong>{extraFields.creatorRecord.fieldLabel}</strong>
                        </div>
                        <div class="col-md-12">
                            <div class="media">
                                <div class="media-left">
                                    <be:avatar backendUser="{extraFields.creatorRecord.value.uid}" showIcon="true" />
                                </div>
                                <div class="media-body">
                                    <f:if condition="{extraFields.creatorRecord.value.realName}">
                                        <f:then>{extraFields.creatorRecord.value.realName}<br>({extraFields.creatorRecord.value.username})</f:then>
                                        <f:else>{extraFields.creatorRecord.value.username}</f:else>
                                    </f:if>
                                </div>
                            </div>
                        </div>
                    </div>
                </f:if>
            </div>
        </div>
    </div>

    <f:if condition="{missingFile}">
        <f:be.infobox title="{f:translate(key:'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:warning.file_missing')}" state="{f:constant(name: 'TYPO3\CMS\Core\Type\ContextualFeedbackSeverity::WARNING')}">{missingFile}</f:be.infobox>
    </f:if>
    <f:if condition="{fileRenderer}">
        <p>
            {fileRenderer -> f:format.raw()}
        </p>
    </f:if>
    <f:if condition="{fileObject}">
        <p>
            <f:media file="{fileObject}" width="{width}" height="{height}" />
        </p>
    </f:if>
    <f:if condition="{url}">
        <p>
            <a class="btn btn-default" href="{url}" target="_blank" title="{f:translate(key:'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.show')}">
                <core:icon identifier="actions-document-view" size="small" alternativeMarkupIdentifier="inline" />
                <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.show" />
            </a>
            <f:if condition="{editMetadataUrl}">
                <a class="btn btn-default" href="{editMetadataUrl}" title="{f:translate(key:'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:cm.editMetadata')}">
                    <core:icon identifier="actions-file-edit" size="small" alternativeMarkupIdentifier="inline" />
                    <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:cm.editMetadata" />
                </a>
            </f:if>
        </p>
    </f:if>

    <h2><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.general" /></h2>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab">
            <div class="panel-heading-row">
                <button
                    class="panel-button collapsed"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#fieldValues-panel"
                    aria-controls="fieldValues-panel"
                    aria-expanded="false"
                >
                    <div class="panel-title">
                        <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.fieldValues" />
                    </div>
                    <span class="caret"></span>
                </button>
            </div>
        </div>
        <div id="fieldValues-panel" class="panel-collapse collapse" data-persist-collapse-state="true" role="tabpanel">
            <div class="table-fit table-fit-wrap">
                <table class="table table-striped table-hover">
                    <tbody>
                        <f:for each="{fields}" as="field">
                            <tr>
                                <th class="col-fieldname">{field.fieldLabel}</th>
                                <td class="col-word-break">{field.fieldValue}</td>
                            </tr>
                        </f:for>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <f:if condition="{returnUrl}">
        <a class="btn btn-primary" href="{returnUrl}" title="{f:translate(key:'LLL:EXT:core/Resources/Private/Language/locallang_common.xlf:back')}">
            <core:icon identifier="actions-view-go-back" size="small" />
            <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_common.xlf:back" />
        </a>
    </f:if>

    <f:if condition="{refLines} || {refFromLines}">
        <h2><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.references" /></h2>
    </f:if>

    <f:if condition="{refLines}">
        <div class="panel panel-default">
            <div class="panel-heading" role="tab">
                <div class="panel-heading-row">
                    <button
                        class="panel-button collapsed"
                        type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#referencesToThisItem-panel"
                        aria-controls="referencesToThisItem-panel"
                        aria-expanded="false"
                    >
                        <div class="panel-title">
                            <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.referencesToThisItem" />
                        </div>
                        <span class="caret"></span>
                    </button>
                </div>
            </div>
            <div id="referencesToThisItem-panel" class="panel-collapse collapse" data-persist-collapse-state="true" role="tabpanel">
                <div class="table-fit">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th class="col-icon"></th>
                                <th class="col-recordtitle"><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.title" /></th>
                                <th><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.table" /></th>
                                <th><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.uid" /></th>
                                <th><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.field" /></th>
                                <th><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.flexpointer" /></th>
                                <th><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.softrefKey" /></th>
                                <th><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.sorting" /></th>
                                <th class="col-control"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <f:for each="{refLines}" as="refLine">
                                <f:render section="refLineRow" arguments="{line: refLine, maxTitleLength: maxTitleLength}" />
                            </f:for>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </f:if>

    <f:if condition="{refFromLines}">
        <div class="panel panel-default">
            <div class="panel-heading" role="tab">
                <div class="panel-heading-row">
                    <button
                        class="panel-button collapsed"
                        type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#referencesFromThisItem-panel"
                        aria-controls="referencesFromThisItem-panel"
                        aria-expanded="false"
                    >
                        <div class="panel-title">
                            <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.referencesFromThisItem" />
                        </div>
                        <span class="caret"></span>
                    </button>
                </div>
            </div>
            <div id="referencesFromThisItem-panel" class="panel-collapse collapse" data-persist-collapse-state="true" role="tabpanel">
                <div class="table-fit">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th class="col-icon"></th>
                                <th class="col-recordtitle"><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.title" /></th>
                                <th><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.table" /></th>
                                <th><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.uid" /></th>
                                <th><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.field" /></th>
                                <th><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.flexpointer" /></th>
                                <th><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.softrefKey" /></th>
                                <th><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.sorting" /></th>
                                <th><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.refString" /></th>
                                <th class="col-control"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <f:for each="{refFromLines}" as="refFromLine">
                                <f:render section="refFromLineRow" arguments="{line: refFromLine, maxTitleLength: maxTitleLength}" />
                            </f:for>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </f:if>
</f:section>

<f:section name="refLineRow">
    <tr>
        <f:if condition="{line.record}">
            <f:then>
                <td class="col-icon"><a href="{line.url}" title="id={line.record.uid}">{line.icon -> f:format.raw()}</a></td>
                <td class="col-recordtitle"><a href="{line.url}" title="{line.recordTitle}">{line.recordTitle -> f:format.crop(maxCharacters: maxTitleLength)}</a></td>
                <td>{line.title}</td>
                <td>{line.record.uid}</td>
            </f:then>
            <f:else>
                <td class="col-icon"><core:icon identifier="default-not-found" size="small" /></td>
                <td class="col-recordtitle"><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.missing_record" /></td>
                <td>{line.row.title}</td>
                <td>{line.row.recuid}</td>
            </f:else>
        </f:if>
        <td>{line.labelForTableColumn}</td>
        <td>{line.row.flexpointer}</td>
        <td>{line.row.softref_key}</td>
        <td>{line.row.sorting}</td>
        <td class="col-control">
            <f:render section="action" arguments="{line: line.actions}" />
        </td>
    </tr>
</f:section>

<f:section name="refFromLineRow">
    <tr>
        <f:if condition="{line.record}">
            <f:then>
                <td class="col-icon"><a href="{line.url}" title="id={line.record.uid}">{line.icon -> f:format.raw()}</a></td>
                <td class="col-recordtitle"><a href="{line.url}" title="{line.recordTitle}">{line.recordTitle -> f:format.crop(maxCharacters: maxTitleLength)}</a></td>
                <td>{line.title}</td>
                <td>{line.row.ref_uid}</td>
            </f:then>
            <f:else>
                <td class="col-icon"><core:icon identifier="default-not-found" size="small" /></td>
                <td class="col-recordtitle"><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:show_item.php.missing_record" /></td>
                <td>{line.row.title}</td>
                <td>{line.row.recuid}</td>
            </f:else>
        </f:if>
        <td>{line.labelForTableColumn}</td>
        <td>{line.row.flexpointer}</td>
        <td>{line.row.softref_key}</td>
        <td>{line.row.sorting}</td>
        <td>{line.row.ref_string}</td>
        <td class="col-control">
            <f:render section="action" arguments="{line: line.actions}" />
        </td>
    </tr>
</f:section>

<f:section name="action">
    <div class="btn-group" role="group">
        <f:if condition="{line.recordsModuleUrl}">
            <button class="btn btn-default" {f:if(condition: line.previewUrlAttributes, then: '{line.previewUrlAttributes -> f:format.raw()}', else: 'disabled="true"')} title="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.showPage')}">
                <core:icon identifier="actions-view-page" size="small" />
            </button>
        </f:if>
        <a class="btn btn-default{f:if(condition: '!{line}', then: ' disabled')}" href="{line.recordEditUrl}" title="{f:translate(key:'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:cm.edit')}">
            <core:icon identifier="actions-open" size="small" />
        </a>
    </div>
    <div class="btn-group" role="group">
        <a class="btn btn-default{f:if(condition: '!{line}', then: ' disabled')}" href="{line.recordHistoryUrl}" title="{f:translate(key:'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:cm.history')}">
            <core:icon identifier="actions-document-history-open" size="small" />
        </a>
    </div>
</f:section>

</html>
