From 2b78aa7d6430f9befd2e12681c363ccb5ede6a38 Mon Sep 17 00:00:00 2001
From: Beatrycze Volk <beatrycze.volk@slub-dresden.de>
Date: Fri, 22 Apr 2022 13:17:04 +0200
Subject: [PATCH] Add fluid templates for ToC plugin

---
 Resources/Private/Partials/ControlBar.html    |  36 +-
 Resources/Private/Partials/PageView.html      | 528 ++++++++++--------
 .../Partials/TableOfContents/Children.html    |  73 +++
 .../Partials/TableOfContents/Filter.html      |  17 +
 .../Partials/TableOfContents/Model.html       |  25 +
 .../Partials/TableOfContents/Models.html      |  31 +
 .../Partials/TableOfContents/Title.html       |  26 +
 .../Templates/TableOfContents/Main.html       |  28 +
 8 files changed, 505 insertions(+), 259 deletions(-)
 create mode 100644 Resources/Private/Plugins/Kitodo/Partials/TableOfContents/Children.html
 create mode 100644 Resources/Private/Plugins/Kitodo/Partials/TableOfContents/Filter.html
 create mode 100644 Resources/Private/Plugins/Kitodo/Partials/TableOfContents/Model.html
 create mode 100644 Resources/Private/Plugins/Kitodo/Partials/TableOfContents/Models.html
 create mode 100644 Resources/Private/Plugins/Kitodo/Partials/TableOfContents/Title.html
 create mode 100644 Resources/Private/Plugins/Kitodo/Templates/TableOfContents/Main.html
diff --git a/Resources/Private/Partials/ControlBar.html b/Resources/Private/Partials/ControlBar.html
index ac5eb9789..7432b3d38 100644
--- a/Resources/Private/Partials/ControlBar.html
+++ b/Resources/Private/Partials/ControlBar.html
@@ -19,18 +19,32 @@ <h1><f:link.page pageUid="{rootPageId}" title="DFG-Viewer" class="dfgviewer-logo
         </nav>
       </div>
 
-      <div class="metadata-wrapper">
-        <div class="tx-dlf-metadata">
-            <f:cObject typoscriptObjectPath="plugin.tx_dlf_metadata" />
-        </div>
-        <div class="offcanvas-toggle" title="<f:translate key='metadata' extensionName='dfgviewer' />"></div>
-      </div>
+      <f:if condition="{isObject3D} == 'collection'">
+        <f:then>
+          <!-- it's a collection - no need for Metadata here! -->
+        </f:then>
+        <f:else>
+          <div class="metadata-wrapper">
+            <div class="tx-dlf-metadata">
+                <f:cObject typoscriptObjectPath="plugin.tx_dlf_metadata" />
+            </div>
+            <div class="offcanvas-toggle" title="<f:translate key='metadata' extensionName='dfgviewer' />"></div>
+          </div>
+        </f:else>
+      </f:if>
 
-      <div class="toc-wrapper">
-          <f:cObject typoscriptObjectPath="plugin.tx_dlf_tableofcontents" />
-          <div class="offcanvas-toggle" title="<f:translate key='toc' extensionName='dfgviewer' />"></div>
-      </div>
+      <f:if condition="{isObject3D} == 'collection' or {isObject3D} == 'object'">
+        <f:then>
+          <!-- it's a collection or 3D object - no need for ToC here! -->
+        </f:then>
+        <f:else>
+          <div class="toc-wrapper">
+              <f:cObject typoscriptObjectPath="plugin.tx_dlf_tableofcontents" />
+              <div class="offcanvas-toggle" title="<f:translate key='toc' extensionName='dfgviewer' />"></div>
+          </div>
+        </f:else>
+      </f:if>
   </div>
 </f:section>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/Resources/Private/Partials/PageView.html b/Resources/Private/Partials/PageView.html
index bf501d208..17a2b3ff2 100644
--- a/Resources/Private/Partials/PageView.html
+++ b/Resources/Private/Partials/PageView.html
@@ -1,17 +1,26 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
-      xmlns:dv="http://typo3.org/ns/Slub/Dfgviewer/ViewHelpers"
-      xmlns:dc="http://typo3.org/ns/Slub/SlubDigitalcollections/ViewHelpers"
-      data-namespace-typo3-fluid="true"
-      lang="en">
+  xmlns:dv="http://typo3.org/ns/Slub/Dfgviewer/ViewHelpers"
+  xmlns:dc="http://typo3.org/ns/Slub/SlubDigitalcollections/ViewHelpers" data-namespace-typo3-fluid="true" lang="en">
 
 <f:section name="PageView">
-  <div class="document-view">
+  <f:if condition="{isObject3D} == 'collection'">
+    <f:then>
+      <div class="document-view" style="overflow-y: auto;">
+    </f:then>
+    <f:else>
+      <div class="document-view" >
+    </f:else>
+  </f:if>
     <div id="browser-hint" class="hidden">
-        <div class="alert">
-            <span class="closebtn" onclick="hideBrowserAlert()">&times;</span>
-            <h2><f:translate key='browser-hint.outdated_browser' extensionName='dfgviewer' /></h2>
-            <p><f:translate key='browser-hint.outdated_browser.description' extensionName='dfgviewer' /></p>
-        </div>
+      <div class="alert">
+        <span class="closebtn" onclick="hideBrowserAlert()">&times;</span>
+        <h2>
+          <f:translate key='browser-hint.outdated_browser' extensionName='dfgviewer' />
+        </h2>
+        <p>
+          <f:translate key='browser-hint.outdated_browser.description' extensionName='dfgviewer' />
+        </p>
+      </div>
     </div>
 
     <f:if condition="{gp-pagegrid} == 1">
@@ -24,285 +33,308 @@ <h2><f:translate key='browser-hint.outdated_browser' extensionName='dfgviewer' /
             <f:cObject typoscriptObjectPath="plugin.tx_dfgviewer_newspaperyears" />
           </f:then>
           <f:else>
-          <f:if condition="{isNewspaper} == 'newspaper_year'">
-            <f:then>
-              <f:cObject typoscriptObjectPath="plugin.tx_dfgviewer_newspapercalendar" />
-            </f:then>
-            <f:else>
-              <f:if condition="{isNewspaper} == 'newspaper_issue'">
-                <!-- it's an newspaper! -->
-              </f:if>
-                <f:cObject typoscriptObjectPath="plugin.tx_dlf_pageview" />
-                <f:cObject typoscriptObjectPath="plugin.tx_dlf_audioplayer" />
-                <div class="fulltext-container"><div id="tx-dlf-fulltextselection"></div></div>
-            </f:else>
-          </f:if>
-        </f:else>
-      </f:if>
-      </f:else>
-    </f:if>
-    <div class="document-functions">
-        <div class="provider">
-            <f:if condition="{settings.showProviderLogo}">
-                <ul>
-                    <f:alias map="{logoUrl: '{dc:xpath(xpath:\'(//mets:amdSec/mets:rightsMD/mets:mdWrap[@OTHERMDTYPE=\"DVRIGHTS\"]/mets:xmlData/dv:rights/dv:ownerLogo)[1]\')}',
-                        logoTitle: '{dc:xpath(xpath:\'(//mets:amdSec/mets:rightsMD/mets:mdWrap[@OTHERMDTYPE=\"DVRIGHTS\"]/mets:xmlData/dv:rights/dv:owner)[1]\')}',
-                        logoUri: '{dc:xpath(xpath:\'(//mets:amdSec/mets:rightsMD/mets:mdWrap[@OTHERMDTYPE=\"DVRIGHTS\"]/mets:xmlData/dv:rights/dv:ownerSiteURL)[1]\', htmlspecialchars:\'FALSE\')}'}">
-                        <f:if condition="{dc:providerLogoCached(logo:'{logoUrl}')}">
-                            <li>
-                                <f:link.external
-                                    uri="{logoUri}"
-                                    title="{logoTitle}">
-                                    <img src="/typo3temp/assets/images/{dc:providerLogoCached(logo:'{logoUrl}')}"
-                                        title="{logoTitle}"
-                                        alt="Logo von {logoTitle}"
-                                    />
-                                </f:link.external>
-                            </li>
-                        </f:if>
-                    </f:alias>
-                    <f:alias map="{logoUrl: '{dc:xpath(xpath:\'(//mets:amdSec/mets:rightsMD/mets:mdWrap[@OTHERMDTYPE=\"DVRIGHTS\"]/mets:xmlData/dv:rights/dv:aggregatorLogo)[1]\')}',
-                        logoTitle: '{dc:xpath(xpath:\'(//mets:amdSec/mets:rightsMD/mets:mdWrap[@OTHERMDTYPE=\"DVRIGHTS\"]/mets:xmlData/dv:rights/dv:aggregator)[1]\')}',
-                        logoUri: '{dc:xpath(xpath:\'(//mets:amdSec/mets:rightsMD/mets:mdWrap[@OTHERMDTYPE=\"DVRIGHTS\"]/mets:xmlData/dv:rights/dv:aggregatorSiteURL)[1]\', htmlspecialchars:\'FALSE\')}'}">
-                        <f:if condition="{dc:providerLogoCached(logo:'{logoUrl}')}">
-                            <li>
-                                <f:link.external
-                                    uri="{logoUri}"
-                                    title="{logoTitle}">
-                                    <img src="/typo3temp/assets/images/{dc:providerLogoCached(logo:'{logoUrl}')}"
-                                        title="{logoTitle}"
-                                        alt="Logo von {logoTitle}"
-                                    />
-                                </f:link.external>
-                            </li>
-                        </f:if>
-                    </f:alias>
-                    <f:alias map="{logoUrl: '{dc:xpath(xpath:\'(//mets:amdSec/mets:rightsMD/mets:mdWrap[@OTHERMDTYPE=\"DVRIGHTS\"]/mets:xmlData/dv:rights/dv:sponsorLogo)[1]\')}',
-                        logoTitle: '{dc:xpath(xpath:\'(//mets:amdSec/mets:rightsMD/mets:mdWrap[@OTHERMDTYPE=\"DVRIGHTS\"]/mets:xmlData/dv:rights/dv:sponsor)[1]\')}',
-                        logoUri: '{dc:xpath(xpath:\'(//mets:amdSec/mets:rightsMD/mets:mdWrap[@OTHERMDTYPE=\"DVRIGHTS\"]/mets:xmlData/dv:rights/dv:sponsorSiteURL)[1]\', htmlspecialchars:\'FALSE\')}'}">
-                        <f:if condition="{dc:providerLogoCached(logo:'{logoUrl}')}">
-                            <li>
-                                <f:link.external
-                                    uri="{logoUri}"
-                                    title="{logoTitle}">
-                                    <img src="/typo3temp/assets/images/{dc:providerLogoCached(logo:'{logoUrl}')}"
-                                        title="{logoTitle}"
-                                        alt="Logo von {logoTitle}"
-                                    />
-                                </f:link.external>
-                            </li>
-                        </f:if>
-                    </f:alias>
-                </ul>
-            </f:if>
-
-            <dl class="mobile-meta">
-                <dt class="tx-dlf-title">Titel</dt>
-                <dd class="tx-dlf-title">
-                    <a href="#">
-                        <dc:xpath xpath='(//mets:dmdSec/mets:mdWrap/mets:xmlData/mods:mods/mods:titleInfo[not(@type="alternative")]/mods:nonSort | //mets:dmdSec/mets:mdWrap/mets:xmlData/mods:mods/mods:titleInfo[not(@type="alternative")]/mods:title | //mets:dmdSec/mets:mdWrap/mets:xmlData/mods:mods/mods:titleInfo[not(@type="alternative")]/mods:partNumber | //mets:dmdSec/mets:mdWrap/mets:xmlData/mods:mods/mods:titleInfo[not(@type="alternative")]/mods:partName)' />
-                    </a>
-                </dd>
-                <dt>Autor</dt>
-                <dd><dc:xpath xpath='(//mets:dmdSec/mets:mdWrap/mets:xmlData/mods:mods/mods:relatedItem[@type="host"]/mods:name[//mets:dmdSec/mets:mdWrap/mets:xmlData/mods:mods/mods:name/mods:role/mods:roleTerm[@authority="marcrelator"][@type="code"]="aut"]/mods:displayForm)[1]' />
-                </dd>
-            </dl>
-            <div class="mobile-controls">
-                <f:cObject typoscriptObjectPath="lib.navigation_viewfunction_mobile" />
-            </div>
-        </div>
-
-      <ul>
-          <li class="submenu links">
-            <a href="#" title="Links">Links</a>
-            <ul>
-              <li>
-                <f:if condition="{dc:xpath(xpath:'(//mets:amdSec/mets:digiprovMD/mets:mdWrap[@OTHERMDTYPE=\'DVLINKS\']/mets:xmlData/dv:links/dv:presentation)[1]')}">
+            <f:if condition="{isNewspaper} == 'newspaper_year'">
+              <f:then>
+                <f:cObject typoscriptObjectPath="plugin.tx_dfgviewer_newspapercalendar" />
+              </f:then>
+              <f:else>
+                <f:if condition="{isObject3D} == 'collection'">
                   <f:then>
-                    <f:link.external uri="{dc:xpath(xpath:'(//mets:amdSec/mets:digiprovMD/mets:mdWrap[@OTHERMDTYPE=\'DVLINKS\']/mets:xmlData/dv:links/dv:presentation)[1]', htmlspecialchars:'FALSE')}" class="local-presentation" title="{f:translate(key:'provider.local_presentation', extensionName:'dfgviewer')}"><f:translate key='provider.local_presentation' extensionName='dfgviewer' /></f:link.external>
+                    <div class="toc-wrapper">
+                      <f:cObject typoscriptObjectPath="plugin.tx_dlf_tableofcontents" />
+                      <div class="offcanvas-toggle" title="<f:translate key='toc' extensionName='dfgviewer' />"></div>
+                    </div>
                   </f:then>
                   <f:else>
-                    <span class="local-presentation" title="{f:translate(key:'provider.no_local_presentation', extensionName:'dfgviewer')}"><f:translate key='provider.no_local_presentation' extensionName='dfgviewer' /></span>
-                  </f:else>
-                </f:if>
-              </li>
-              <f:for each="{0: '1', 1: '2', 2: '3'}" as="index">
-                <f:if condition="{dc:xpath(xpath:'(//mets:amdSec/mets:digiprovMD/mets:mdWrap[@OTHERMDTYPE=\'DVLINKS\']/mets:xmlData/dv:links/dv:reference)[{index}]')}">
-                  <li>
-                    <f:if condition="{dc:xpath(xpath:'(//mets:amdSec/mets:digiprovMD/mets:mdWrap[@OTHERMDTYPE=\'DVLINKS\']/mets:xmlData/dv:links/dv:reference/@linktext)[{index}]')}">
+                    <f:if condition="{isObject3D} == 'object'">
                       <f:then>
-                        <f:link.external uri="{dc:xpath(xpath:'(//mets:amdSec/mets:digiprovMD/mets:mdWrap[@OTHERMDTYPE=\'DVLINKS\']/mets:xmlData/dv:links/dv:reference)[{index}]', htmlspecialchars:'FALSE')}" class="local-catalog" title="{f:translate(key:'provider.local_catalogue', extensionName:'dfgviewer')}"><dc:xpath xpath='(//mets:amdSec/mets:digiprovMD/mets:mdWrap[@OTHERMDTYPE="DVLINKS"]/mets:xmlData/dv:links/dv:reference/@linktext)[{index}]' /></f:link.external>
+                        <f:cObject typoscriptObjectPath="plugin.tx_dlf_view3d" />
                       </f:then>
                       <f:else>
-                        <f:link.external uri="{dc:xpath(xpath:'(//mets:amdSec/mets:digiprovMD/mets:mdWrap[@OTHERMDTYPE=\'DVLINKS\']/mets:xmlData/dv:links/dv:reference)[{index}]', htmlspecialchars:'FALSE')}" class="local-catalog" title="{f:translate(key:'provider.local_catalogue', extensionName:'dfgviewer')}"><f:translate key='provider.local_catalogue' extensionName='dfgviewer' /></f:link.external>
+                        <f:if condition="{isNewspaper} == 'newspaper_issue'">
+                          <!-- it's an newspaper! -->
+                        </f:if>
+                        <f:cObject typoscriptObjectPath="plugin.tx_dlf_pageview" />
+                        <f:cObject typoscriptObjectPath="plugin.tx_dlf_audioplayer" />
+                        <div class="fulltext-container">
+                          <div id="tx-dlf-fulltextselection"></div>
+                        </div>
                       </f:else>
                     </f:if>
-                  </li>
+                  </f:else>
                 </f:if>
-              </f:for>
-              <f:if condition="{dc:xpath(xpath:'(//mets:amdSec/mets:rightsMD/mets:mdWrap[@OTHERMDTYPE=\'DVRIGHTS\']/mets:xmlData/dv:rights/dv:ownerContact)[1]', htmlspecialchars:'FALSE')}">
-                <f:then>
-                  <li>
-                    <f:link.external uri="{dc:xpath(xpath:'(//mets:amdSec/mets:rightsMD/mets:mdWrap[@OTHERMDTYPE=\'DVRIGHTS\']/mets:xmlData/dv:rights/dv:ownerContact)[1]', htmlspecialchars: 'FALSE')}" class="local-contact" title="{f:translate(key:'provider.email_provider', extensionName:'dfgviewer')} ({dc:xpath(xpath:'(//mets:amdSec/mets:rightsMD/mets:mdWrap[@OTHERMDTYPE=\'DVRIGHTS\']/mets:xmlData/dv:rights/dv:owner)[1]')})"><f:translate key='provider.email_provider' extensionName='dfgviewer' /></f:link.external>
-                  </li>
-                </f:then>
-                <f:else>
-                  <li>
-                    <span class="local-contact" title="{f:translate(key:'provider.no_local_presentation', extensionName:'dfgviewer')}"><f:translate key='provider.no_local_presentation' extensionName='dfgviewer' /></span>
-                  </li>
-                </f:else>
-              </f:if>
-                <f:cObject typoscriptObjectPath="plugin.tx_dfgviewer_uri" />
-            </ul>
-          </li>
-          <li class="submenu downloads">
-            <a href="#" id="tab-downloads" title="Downloads">Downloads</a>
-            <ul>
-              <f:if condition="{gp-double} == 1">
-                <f:then>
-                  <f:if condition="{dc:downloadLinks(type:'page-left', pagenumber:gp-page)} !=''">
+              </f:else>
+            </f:if>
+          </f:else>
+        </f:if>
+      </f:else>
+    </f:if>
+    <f:if condition="{isObject3D} == 'collection' or {isObject3D} == 'object'">
+      <f:then>
+        <!-- it's a 3D object view - no need for document, view or page control functions here! -->
+      </f:then>
+      <f:else>
+        <div class="document-functions">
+          <div class="provider">
+            <f:if condition="{settings.showProviderLogo}">
+              <ul>
+                <f:alias map="{logoUrl: '{dc:xpath(xpath:\'(//mets:amdSec/mets:rightsMD/mets:mdWrap[@OTHERMDTYPE=\"
+                  DVRIGHTS\"]/mets:xmlData/dv:rights/dv:ownerLogo)[1]\')}', logoTitle: '{dc:xpath(xpath:\'
+                  (//mets:amdSec/mets:rightsMD/mets:mdWrap[@OTHERMDTYPE=\"DVRIGHTS\"]/mets:xmlData/dv:rights/dv:owner)[1]\')}',
+                  logoUri: '{dc:xpath(xpath:\'
+                  (//mets:amdSec/mets:rightsMD/mets:mdWrap[@OTHERMDTYPE=\"DVRIGHTS\"]/mets:xmlData/dv:rights/dv:ownerSiteURL)[1]\',
+                  htmlspecialchars:\'FALSE\')}'}">
+                  <f:if condition="{dc:providerLogoCached(logo:'{logoUrl}')}">
                     <li>
-                        <f:link.external
-                        uri="{dc:downloadLinks(type:'page-left', pagenumber:gp-page)}"
-                        class="download-page"
-                        title="{f:translate(key:'download.leftPage', extensionName:'dfgviewer')}">
-                          <f:translate key="download.leftPage"  extensionName="dfgviewer" />
+                      <f:link.external uri="{logoUri}" title="{logoTitle}">
+                        <img src="/typo3temp/assets/images/{dc:providerLogoCached(logo:'{logoUrl}')}"
+                          title="{logoTitle}" alt="Logo von {logoTitle}" />
                       </f:link.external>
                     </li>
                   </f:if>
-                  <f:if condition="{dc:downloadLinks(type:'page-right', pagenumber:gp-page)} !=''">
+                </f:alias>
+                <f:alias map="{logoUrl: '{dc:xpath(xpath:\'(//mets:amdSec/mets:rightsMD/mets:mdWrap[@OTHERMDTYPE=\"
+                  DVRIGHTS\"]/mets:xmlData/dv:rights/dv:aggregatorLogo)[1]\')}', logoTitle: '{dc:xpath(xpath:\'
+                  (//mets:amdSec/mets:rightsMD/mets:mdWrap[@OTHERMDTYPE=\"DVRIGHTS\"]/mets:xmlData/dv:rights/dv:aggregator)[1]\')}',
+                  logoUri: '{dc:xpath(xpath:\'
+                  (//mets:amdSec/mets:rightsMD/mets:mdWrap[@OTHERMDTYPE=\"DVRIGHTS\"]/mets:xmlData/dv:rights/dv:aggregatorSiteURL)[1]\',
+                  htmlspecialchars:\'FALSE\')}'}">
+                  <f:if condition="{dc:providerLogoCached(logo:'{logoUrl}')}">
                     <li>
-                      <f:link.external
-                        uri="{dc:downloadLinks(type:'page-right', pagenumber:gp-page)}"
-                        class="download-page"
-                        title="{f:translate(key:'download.rightPage', extensionName:'dfgviewer')}">
-                          <f:translate key="download.rightPage"  extensionName="dfgviewer" />
+                      <f:link.external uri="{logoUri}" title="{logoTitle}">
+                        <img src="/typo3temp/assets/images/{dc:providerLogoCached(logo:'{logoUrl}')}"
+                          title="{logoTitle}" alt="Logo von {logoTitle}" />
                       </f:link.external>
                     </li>
                   </f:if>
-                </f:then>
-                <f:else>
-                  <f:if condition="{dc:downloadLinks(type:'page-left', pagenumber:gp-page)} !=''">
+                </f:alias>
+                <f:alias map="{logoUrl: '{dc:xpath(xpath:\'(//mets:amdSec/mets:rightsMD/mets:mdWrap[@OTHERMDTYPE=\"
+                  DVRIGHTS\"]/mets:xmlData/dv:rights/dv:sponsorLogo)[1]\')}', logoTitle: '{dc:xpath(xpath:\'
+                  (//mets:amdSec/mets:rightsMD/mets:mdWrap[@OTHERMDTYPE=\"DVRIGHTS\"]/mets:xmlData/dv:rights/dv:sponsor)[1]\')}',
+                  logoUri: '{dc:xpath(xpath:\'
+                  (//mets:amdSec/mets:rightsMD/mets:mdWrap[@OTHERMDTYPE=\"DVRIGHTS\"]/mets:xmlData/dv:rights/dv:sponsorSiteURL)[1]\',
+                  htmlspecialchars:\'FALSE\')}'}">
+                  <f:if condition="{dc:providerLogoCached(logo:'{logoUrl}')}">
                     <li>
+                      <f:link.external uri="{logoUri}" title="{logoTitle}">
+                        <img src="/typo3temp/assets/images/{dc:providerLogoCached(logo:'{logoUrl}')}"
+                          title="{logoTitle}" alt="Logo von {logoTitle}" />
+                      </f:link.external>
+                    </li>
+                  </f:if>
+                </f:alias>
+              </ul>
+            </f:if>
+
+            <dl class="mobile-meta">
+              <dt class="tx-dlf-title">Titel</dt>
+              <dd class="tx-dlf-title">
+                <a href="#">
+                  <dc:xpath
+                    xpath='(//mets:dmdSec/mets:mdWrap/mets:xmlData/mods:mods/mods:titleInfo[not(@type="alternative")]/mods:nonSort | //mets:dmdSec/mets:mdWrap/mets:xmlData/mods:mods/mods:titleInfo[not(@type="alternative")]/mods:title | //mets:dmdSec/mets:mdWrap/mets:xmlData/mods:mods/mods:titleInfo[not(@type="alternative")]/mods:partNumber | //mets:dmdSec/mets:mdWrap/mets:xmlData/mods:mods/mods:titleInfo[not(@type="alternative")]/mods:partName)' />
+                </a>
+              </dd>
+              <dt>Autor</dt>
+              <dd>
+                <dc:xpath
+                  xpath='(//mets:dmdSec/mets:mdWrap/mets:xmlData/mods:mods/mods:relatedItem[@type="host"]/mods:name[//mets:dmdSec/mets:mdWrap/mets:xmlData/mods:mods/mods:name/mods:role/mods:roleTerm[@authority="marcrelator"][@type="code"]="aut"]/mods:displayForm)[1]' />
+              </dd>
+            </dl>
+          </div>
+
+          <ul>
+            <li class="submenu links">
+              <a href="#" title="Links">Links</a>
+              <ul>
+                <li>
+                  <f:if
+                    condition="{dc:xpath(xpath:'(//mets:amdSec/mets:digiprovMD/mets:mdWrap[@OTHERMDTYPE=\'DVLINKS\']/mets:xmlData/dv:links/dv:presentation)[1]')}">
+                    <f:then>
                       <f:link.external
-                        uri="{dc:downloadLinks(type:'page-left', pagenumber:gp-page)}"
-                        class="download-page"
-                        title="{f:translate(key:'download.singlePage', extensionName:'dfgviewer')}">
-                          <f:translate key="download.singlePage"  extensionName="dfgviewer" />
+                        uri="{dc:xpath(xpath:'(//mets:amdSec/mets:digiprovMD/mets:mdWrap[@OTHERMDTYPE=\'DVLINKS\']/mets:xmlData/dv:links/dv:presentation)[1]', htmlspecialchars:'FALSE')}"
+                        class="local-presentation"
+                        title="{f:translate(key:'provider.local_presentation', extensionName:'dfgviewer')}">
+                        <f:translate key='provider.local_presentation' extensionName='dfgviewer' />
                       </f:link.external>
+                    </f:then>
+                    <f:else>
+                      <span class="local-presentation"
+                        title="{f:translate(key:'provider.no_local_presentation', extensionName:'dfgviewer')}">
+                        <f:translate key='provider.no_local_presentation' extensionName='dfgviewer' />
+                      </span>
+                    </f:else>
+                  </f:if>
+                </li>
+                <f:for each="{0: '1', 1: '2', 2: '3'}" as="index">
+                  <f:if
+                    condition="{dc:xpath(xpath:'(//mets:amdSec/mets:digiprovMD/mets:mdWrap[@OTHERMDTYPE=\'DVLINKS\']/mets:xmlData/dv:links/dv:reference)[{index}]')}">
+                    <li>
+                      <f:if
+                        condition="{dc:xpath(xpath:'(//mets:amdSec/mets:digiprovMD/mets:mdWrap[@OTHERMDTYPE=\'DVLINKS\']/mets:xmlData/dv:links/dv:reference/@linktext)[{index}]')}">
+                        <f:then>
+                          <f:link.external
+                            uri="{dc:xpath(xpath:'(//mets:amdSec/mets:digiprovMD/mets:mdWrap[@OTHERMDTYPE=\'DVLINKS\']/mets:xmlData/dv:links/dv:reference)[{index}]', htmlspecialchars:'FALSE')}"
+                            class="local-catalog"
+                            title="{f:translate(key:'provider.local_catalogue', extensionName:'dfgviewer')}">
+                            <dc:xpath
+                              xpath='(//mets:amdSec/mets:digiprovMD/mets:mdWrap[@OTHERMDTYPE="DVLINKS"]/mets:xmlData/dv:links/dv:reference/@linktext)[{index}]' />
+                          </f:link.external>
+                        </f:then>
+                        <f:else>
+                          <f:link.external
+                            uri="{dc:xpath(xpath:'(//mets:amdSec/mets:digiprovMD/mets:mdWrap[@OTHERMDTYPE=\'DVLINKS\']/mets:xmlData/dv:links/dv:reference)[{index}]', htmlspecialchars:'FALSE')}"
+                            class="local-catalog"
+                            title="{f:translate(key:'provider.local_catalogue', extensionName:'dfgviewer')}">
+                            <f:translate key='provider.local_catalogue' extensionName='dfgviewer' />
+                          </f:link.external>
+                        </f:else>
+                      </f:if>
                     </li>
                   </f:if>
-                </f:else>
-              </f:if>
-              <f:if condition="{dc:downloadLinks(type:'work')} !=''">
+                </f:for>
+                <f:if
+                  condition="{dc:xpath(xpath:'(//mets:amdSec/mets:rightsMD/mets:mdWrap[@OTHERMDTYPE=\'DVRIGHTS\']/mets:xmlData/dv:rights/dv:ownerContact)[1]', htmlspecialchars:'FALSE')}">
+                  <f:then>
+                    <li>
+                      <f:link.external
+                        uri="{dc:xpath(xpath:'(//mets:amdSec/mets:rightsMD/mets:mdWrap[@OTHERMDTYPE=\'DVRIGHTS\']/mets:xmlData/dv:rights/dv:ownerContact)[1]', htmlspecialchars: 'FALSE')}"
+                        class="local-contact"
+                        title="{f:translate(key:'provider.email_provider', extensionName:'dfgviewer')} ({dc:xpath(xpath:'(//mets:amdSec/mets:rightsMD/mets:mdWrap[@OTHERMDTYPE=\'DVRIGHTS\']/mets:xmlData/dv:rights/dv:owner)[1]')})">
+                        <f:translate key='provider.email_provider' extensionName='dfgviewer' />
+                      </f:link.external>
+                    </li>
+                  </f:then>
+                  <f:else>
+                    <li>
+                      <span class="local-contact"
+                        title="{f:translate(key:'provider.no_local_presentation', extensionName:'dfgviewer')}">
+                        <f:translate key='provider.no_local_presentation' extensionName='dfgviewer' />
+                      </span>
+                    </li>
+                  </f:else>
+                </f:if>
+              <f:cObject typoscriptObjectPath="plugin.tx_dfgviewer_uri" />
+              </ul>
+            </li>
+            <li class="submenu downloads">
+              <a href="#" id="tab-downloads" title="Downloads">Downloads</a>
+              <ul>
+                <f:cObject typoscriptObjectPath="plugin.tx_dlf_pdfdownloadtool" />
+              </ul>
+            </li>
+            <li class="doublepage">
+              <f:if condition="{gp-double} == 1">
                 <f:then>
-                  <li>
-                    <f:link.external
-                      uri="{dc:downloadLinks(type:'work')}"
-                      class="download-document"
-                      target="_blank"
-                      title="{f:translate(key:'download.work', extensionName:'dfgviewer')}"><f:translate key="download.work"  extensionName="dfgviewer" /></f:link.external>
-                  </li>
+                  <f:link.page pageUid="{kitodoPageView}"
+                    additionalParams="{tx_dlf:{page:'{gp-page}', double:'0', id:'{gp-id}', pagegrid:'0'}}"
+                    class="tx-dlf-navigation-doubleOff"
+                    title="{f:translate(key:'double.singlePageView', extensionName:'dfgviewer')}">
+                    <f:translate key="double.singlePageView" extensionName="dfgviewer" />
+                  </f:link.page>
+                  <f:link.page pageUid="{kitodoPageView}"
+                    additionalParams="{tx_dlf:{page:'{dc:calc(val1:\'{gp-page}\', val2:\'1\', operator:\'+\')}', double:'1', id:'{gp-id}', pagegrid:'0'}}"
+                    class="tx-dlf-navigation-doublePlusOne"
+                    title="{f:translate(key:'double.RectoVerso', extensionName:'dfgviewer')}"><span>
+                      <f:translate key="double.RectoVerso" extensionName="dfgviewer" />
+                    </span></f:link.page>
                 </f:then>
                 <f:else>
-                  <f:if condition="{dc:xpath(xpath:'(//mets:mets/mets:dmdSec/mets:mdWrap/mets:xmlData/mods:mods/mods:extension/slub:slub/slub:id[@type=\'digital\'])[1]')}">
-                    <f:alias map="{xpathDownload: '//mets:fileSec/mets:fileGrp[@USE=\'DOWNLOAD\']//mets:file/mets:FLocat/@xlink:href'}">
-                      <li>
-                        <f:link.external
-                          uri="{dv:format.subStringLast(string:'{dc:xpath(xpath:\'(({xpathDownload})[1])\')}', needle:'/')}/{dc:xpath(xpath:'(//mets:mets/mets:dmdSec/mets:mdWrap/mets:xmlData/mods:mods/mods:extension/slub:slub/slub:id[@type=\'digital\'])[1]')}.pdf"
-                          class="download-document"
-                          target="_blank"
-                          title="{f:translate(key:'download.work', extensionName:'dfgviewer')}"><f:translate key="download.work"  extensionName="dfgviewer" />
-                        </f:link.external>
-                      </li>
-                    </f:alias>
-                  </f:if>
+                  <f:link.page pageUid="{kitodoPageView}"
+                    additionalParams="{tx_dlf:{page:'{gp-page}', double:'1', id:'{gp-id}', pagegrid:'0'}}"
+                    class="tx-dlf-navigation-doubleOn"
+                    title="{f:translate(key:'double.doublePageView', extensionName:'dfgviewer')}">
+                    <f:translate key="double.doublePageView" extensionName="dfgviewer" />
+                  </f:link.page>
                 </f:else>
               </f:if>
-            </ul>
-          </li>
-          <li class="doublepage">
-            <f:if condition="{gp-double} == 1">
-              <f:then>
-                <f:link.page pageUid="{kitodoPageView}" additionalParams="{tx_dlf:{page:'{gp-page}', double:'0', id:'{gp-id}', pagegrid:'0'}}" class="tx-dlf-navigation-doubleOff" title="{f:translate(key:'double.singlePageView', extensionName:'dfgviewer')}"><f:translate key="double.singlePageView"  extensionName="dfgviewer" /></f:link.page>
-                <f:link.page pageUid="{kitodoPageView}" additionalParams="{tx_dlf:{page:'{dc:calc(val1:\'{gp-page}\', val2:\'1\', operator:\'+\')}', double:'1', id:'{gp-id}', pagegrid:'0'}}" class="tx-dlf-navigation-doublePlusOne" title="{f:translate(key:'double.RectoVerso', extensionName:'dfgviewer')}"><span><f:translate key="double.RectoVerso"  extensionName="dfgviewer" /></span></f:link.page>
-              </f:then>
-              <f:else>
-                <f:link.page pageUid="{kitodoPageView}" additionalParams="{tx_dlf:{page:'{gp-page}', double:'1', id:'{gp-id}', pagegrid:'0'}}" class="tx-dlf-navigation-doubleOn" title="{f:translate(key:'double.doublePageView', extensionName:'dfgviewer')}"><f:translate key="double.doublePageView"  extensionName="dfgviewer" /></f:link.page>
-              </f:else>
+            </li>
+            <f:if
+              condition="{dc:xpath(xpath:'(//mets:fileSec/mets:fileGrp[@USE=\'FULLTEXT\']/mets:file[1]/mets:FLocat/@xlink:href)[1]')}">
+              <li class="fulltext">
+                <f:if condition="{gp-double} == 1">
+                  <f:then>
+                    <span class="select switchoff" id="tx-dlf-tools-fulltext"
+                      title="{f:translate(key:'fulltext.no_fulltext_double', extensionName:'dfgviewer')}">
+                      <f:translate key='fulltext.no_fulltext_double' extensionName='dfgviewer' />
+                    </span>
+                  </f:then>
+                  <f:else>
+                    <f:if condition="{gp-pagegrid} == 1">
+                      <f:then>
+                        <span class="select switchoff" id="tx-dlf-tools-fulltext"
+                          title="{f:translate(key:'fulltext.no_fulltext_gridpage', extensionName:'dfgviewer')}">
+                          <f:translate key='fulltext.no_fulltext_gridpage' extensionName='dfgviewer' />
+                        </span>
+                      </f:then>
+                      <f:else>
+                        <f:cObject typoscriptObjectPath="plugin.tx_dlf_fulltexttool" />
+                      </f:else>
+                    </f:if>
+                  </f:else>
+                </f:if>
+              </li>
             </f:if>
-          </li>
-          <f:if condition="{dc:xpath(xpath:'(//mets:fileSec/mets:fileGrp[@USE=\'FULLTEXT\']/mets:file[1]/mets:FLocat/@xlink:href)[1]')}">
-            <li class="fulltext">
-              <f:if condition="{gp-double} == 1">
+            <li class="grid">
+              <f:if
+                condition="{dc:xpath(xpath:'(//mets:fileSec/mets:fileGrp[@USE=\'THUMBS\']/mets:file[1]/mets:FLocat/@xlink:href)[1]')}">
                 <f:then>
-                  <span class="select switchoff" id="tx-dlf-tools-fulltext" title="{f:translate(key:'fulltext.no_fulltext_double', extensionName:'dfgviewer')}"><f:translate key='fulltext.no_fulltext_double' extensionName='dfgviewer' /></span>
-                </f:then>
-                <f:else>
                   <f:if condition="{gp-pagegrid} == 1">
                     <f:then>
-                      <span class="select switchoff" id="tx-dlf-tools-fulltext" title="{f:translate(key:'fulltext.no_fulltext_gridpage', extensionName:'dfgviewer')}"><f:translate key='fulltext.no_fulltext_gridpage' extensionName='dfgviewer' /></span>
+                      <f:link.page pageUid="{kitodoPageView}"
+                        additionalParams="{tx_dlf:{page:'{gp-page}', double:'0', id:'{gp-id}', pagegrid:'0'}}"
+                        class="active" title="{f:translate(key:'double.singlePageView', extensionName:'dfgviewer')}">
+                        <f:translate key='double.singlePageView' extensionName='dfgviewer' />
+                      </f:link.page>
                     </f:then>
                     <f:else>
-                      <f:cObject typoscriptObjectPath="plugin.tx_dlf_fulltexttool" />
+                      <f:link.page pageUid="{kitodoPageView}"
+                        additionalParams="{tx_dlf:{page:'{gp-page}', double:'0', id:'{gp-id}', pagegrid:'1'}}"
+                        title="{f:translate(key:'gridpage.preview', extensionName:'dfgviewer')}">
+                        <f:translate key='gridpage.preview' extensionName='dfgviewer' />
+                      </f:link.page>
                     </f:else>
                   </f:if>
+                </f:then>
+                <f:else>
+                  <span title="{f:translate(key:'gridpage.preview', extensionName:'dfgviewer')}">
+                    <f:translate key='gridpage.preview' extensionName='dfgviewer' />
+                  </span>
                 </f:else>
               </f:if>
             </li>
-          </f:if>
-          <li class="grid">
-            <f:if condition="{dc:xpath(xpath:'(//mets:fileSec/mets:fileGrp[@USE=\'THUMBS\']/mets:file[1]/mets:FLocat/@xlink:href)[1]')}">
+            <f:if
+              condition="{dc:xpath(xpath:'//mets:amdSec/mets:digiprovMD/mets:mdWrap[@OTHERMDTYPE=\'DVLINKS\']/mets:xmlData/dv:links/dv:sru')}">
               <f:then>
-                <f:if condition="{gp-pagegrid} == 1">
-                  <f:then>
-                      <f:link.page pageUid="{kitodoPageView}" additionalParams="{tx_dlf:{page:'{gp-page}', double:'0', id:'{gp-id}', pagegrid:'0'}}" class="active" title="{f:translate(key:'double.singlePageView', extensionName:'dfgviewer')}"><f:translate key='double.singlePageView' extensionName='dfgviewer' /></f:link.page>
-                  </f:then>
-                  <f:else>
-                      <f:link.page pageUid="{kitodoPageView}" additionalParams="{tx_dlf:{page:'{gp-page}', double:'0', id:'{gp-id}', pagegrid:'1'}}" title="{f:translate(key:'gridpage.preview', extensionName:'dfgviewer')}"><f:translate key='gridpage.preview' extensionName='dfgviewer' /></f:link.page>
-                  </f:else>
-                </f:if>
-              </f:then>
-              <f:else>
-                 <span title="{f:translate(key:'gridpage.preview', extensionName:'dfgviewer')}"><f:translate key='gridpage.preview' extensionName='dfgviewer' /></span>
-              </f:else>
-            </f:if>
-          </li>
-          <f:if condition="{dc:xpath(xpath:'//mets:amdSec/mets:digiprovMD/mets:mdWrap[@OTHERMDTYPE=\'DVLINKS\']/mets:xmlData/dv:links/dv:sru')}">
-            <f:then>
-              <li class="submenu search">
+                <li class="submenu search">
                   <a href="#" title="Search">Search</a>
                   <f:cObject typoscriptObjectPath="plugin.tx_dfgviewer_sru" />
-              </li>
-            </f:then>
-          </f:if>
-      </ul>
-    </div>
-    <div class="view-functions">
-      <f:if condition="{gp-pagegrid} == 1">
-        <f:then>
-        <ul>
-          <f:cObject typoscriptObjectPath="lib.navigation_viewfunction_deactivated" />
-        </ul>
-        </f:then>
-        <f:else>
-          <ul>
-            <f:cObject typoscriptObjectPath="lib.navigation_viewfunction" />
-            <li class="tx-dlf-imagemanipulationtool"><f:cObject typoscriptObjectPath="plugin.tx_dlf_imagemanipulationtool" /></li>
+                </li>
+              </f:then>
+            </f:if>
           </ul>
-        </f:else>
-      </f:if>
-    </div>
-    <div class="page-control">
-      <f:if condition="{gp-pagegrid} == 1">
-        <f:then>
-          <f:cObject typoscriptObjectPath="plugin.tx_dfgviewer_gridpager" />
-        </f:then>
-        <f:else>
-          <f:cObject typoscriptObjectPath="lib.navigation_pagecontrol" />
-        </f:else>
-      </f:if>
-    </div>
+        </div>
+        <div class="view-functions">
+          <f:if condition="{gp-pagegrid} == 1">
+            <f:else>
+              <ul>
+                <f:cObject typoscriptObjectPath="lib.kitodo.navigation.viewfunction" />
+                <li class="tx-dlf-imagemanipulationtool">
+                  <f:cObject typoscriptObjectPath="plugin.tx_dlf_imagemanipulationtool" />
+                </li>
+              </ul>
+            </f:else>
+          </f:if>
+        </div>
+        <div class="page-control">
+          <f:if condition="{gp-pagegrid} == 1">
+            <f:else>
+              <f:cObject typoscriptObjectPath="lib.kitodo.navigation.pagecontrol" />
+            </f:else>
+          </f:if>
+        </div>
+      </f:else>
+    </f:if>
   </div>
 </f:section>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/Resources/Private/Plugins/Kitodo/Partials/TableOfContents/Children.html b/Resources/Private/Plugins/Kitodo/Partials/TableOfContents/Children.html
new file mode 100644
index 000000000..e563fcea1
--- /dev/null
+++ b/Resources/Private/Plugins/Kitodo/Partials/TableOfContents/Children.html
@@ -0,0 +1,73 @@
+<f:comment>
+<!--
+ * (c) Kitodo. Key to digital objects e.V. <contact@kitodo.org>
+ *
+ * This file is part of the Kitodo and TYPO3 projects.
+ *
+ * @license GNU General Public License version 3 or later.
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+-->
+</f:comment>
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
+      data-namespace-typo3-fluid="true">
+
+<f:for each="{children}" as="child">
+    <f:switch expression="{child.ITEM_STATE}">
+        <f:case value="ACT">
+            <li class="tx-dlf-toc-act">
+        </f:case>
+        <f:case value="CUR">
+            <li class="tx-dlf-toc-cur">
+        </f:case>
+        <f:case value="ACTIFSUB">
+            <li class="tx-dlf-toc-act tx-dlf-toc-ifsub">
+        </f:case>
+        <f:case value="CURIFSUB">
+            <li class="tx-dlf-toc-cur tx-dlf-toc-ifsub">
+        </f:case>
+        <f:case value="IFSUB">
+            <li class="tx-dlf-toc-no tx-dlf-toc-ifsub">
+        </f:case>
+        <f:defaultCase>
+            <li class="tx-dlf-toc-no">
+        </f:defaultCase>
+    </f:switch>
+
+    <f:if condition="{child.doNotLinkIt}">
+        <f:then>
+            <f:render partial="TableOfContents/Title" arguments="{child: child}"/>
+        </f:then>
+        <f:else>
+            <f:link.action
+                action="main"
+                pageUid="{settings.targetPid}"
+                additionalParams="{f:if(condition:'{child.id}', then:'{\'tx_dlf[id]\':child.id, \'tx_dlf[page]\':child.page}', else: '{\'tx_dlf[page]\':child.page}')}"
+                addQueryString="1"
+                title="{f:if(condition:'{child.title}', then: '{child.title}', else: '{child.type}')}">
+                    <f:render partial="TableOfContents/Title" arguments="{child: child}"/>
+            </f:link.action>
+        </f:else>
+    </f:if>
+
+    <f:if condition="{settings.basketButton} && {settings.targetBasket}">
+        <span class="tx-dlf-basket-button">
+                <f:link.action
+                    pageUid="{settings.targetBasket}"
+                    action="main"
+                    controller="Basket"
+                    additionalParams="{'tx_dlf[addToBasket]':'toc', 'tx_dlf[logId]':child.basketButton.logId, 'tx_dlf[startpage]':child.basketButton.startpage, 'tx_dlf_basket[action]':'add', 'tx_dlf_basket[controller]':'Basket'}"
+                    addQueryString="1">
+                        <f:translate key="AddToBasket" />
+                </f:link.action>
+        </span>
+    </f:if>
+
+    <f:if condition="{child._SUB_MENU} && ({child.ITEM_STATE} == 'IFSUB' || {child.ITEM_STATE} == 'ACTIFSUB' || {child.ITEM_STATE} == 'CURIFSUB')">
+        <ul>
+            <f:render partial="TableOfContents/Children" arguments="{children: child._SUB_MENU}"/>
+        </ul>
+    </f:if>
+
+    </li>
+</f:for>
diff --git a/Resources/Private/Plugins/Kitodo/Partials/TableOfContents/Filter.html b/Resources/Private/Plugins/Kitodo/Partials/TableOfContents/Filter.html
new file mode 100644
index 000000000..fbf8a7bd1
--- /dev/null
+++ b/Resources/Private/Plugins/Kitodo/Partials/TableOfContents/Filter.html
@@ -0,0 +1,17 @@
+<f:comment>
+<!--
+ * (c) Kitodo. Key to digital objects e.V. <contact@kitodo.org>
+ *
+ * This file is part of the Kitodo and TYPO3 projects.
+ *
+ * @license GNU General Public License version 3 or later.
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+-->
+</f:comment>
+<f:form action="filter" controller="TableOfContents" name="filterParameter" method="get" class="tx-dlf-filter-form">
+    <label for="tx-dlf-filter-title">
+        Title
+    </label>
+    <f:form.textfield id="tx-dlf-filter-title" name="title" />
+</f:form>
\ No newline at end of file
diff --git a/Resources/Private/Plugins/Kitodo/Partials/TableOfContents/Model.html b/Resources/Private/Plugins/Kitodo/Partials/TableOfContents/Model.html
new file mode 100644
index 000000000..50863ecb7
--- /dev/null
+++ b/Resources/Private/Plugins/Kitodo/Partials/TableOfContents/Model.html
@@ -0,0 +1,25 @@
+<f:comment>
+<!--
+ * (c) Kitodo. Key to digital objects e.V. <contact@kitodo.org>
+ *
+ * This file is part of the Kitodo and TYPO3 projects.
+ *
+ * @license GNU General Public License version 3 or later.
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+-->
+</f:comment>
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
+      data-namespace-typo3-fluid="true">
+
+<div class="tx-dlf-toc-preview-item">
+    <f:link.page
+        pageUid="{settings.targetPid}"
+        additionalParams="{'id': model.urlId, 'tx_dlf[id]': model.urlXml}"
+        title="{f:if(condition:'{model.title}', then: '{model.title}', else: '{model.type}')}">
+        <span class="tx-dlf-toc-title">{model.title}</span>
+        <br>
+        <img class="tx-dlf-toc-preview-image" src="{model.image}" alt="{model.title}">
+        <span class="tx-dlf-toc-description">{model.description}</span>
+    </f:link.page>
+</div>
diff --git a/Resources/Private/Plugins/Kitodo/Partials/TableOfContents/Models.html b/Resources/Private/Plugins/Kitodo/Partials/TableOfContents/Models.html
new file mode 100644
index 000000000..76d991447
--- /dev/null
+++ b/Resources/Private/Plugins/Kitodo/Partials/TableOfContents/Models.html
@@ -0,0 +1,31 @@
+<f:comment>
+<!--
+ * (c) Kitodo. Key to digital objects e.V. <contact@kitodo.org>
+ *
+ * This file is part of the Kitodo and TYPO3 projects.
+ *
+ * @license GNU General Public License version 3 or later.
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+-->
+</f:comment>
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
+      data-namespace-typo3-fluid="true">
+
+<f:for each="{models}" as="model">  
+    <f:if condition="{model._SUB_MENU} && ({model.ITEM_STATE} == 'HEADER')">
+        <f:then>
+            <h2>
+                <f:render partial="TableOfContents/Title" arguments="{child: model}"/>
+            </h2>
+            <f:render partial="TableOfContents/Filter"/>
+            <div class="tx-dlf-toc-preview-items">
+                <f:render partial="TableOfContents/Models" arguments="{models: model._SUB_MENU}"/>
+            </div>
+        </f:then>
+        <f:else>
+            <f:render partial="TableOfContents/Model" arguments="{model: model}"/>
+        </f:else>
+    </f:if>
+
+</f:for>
diff --git a/Resources/Private/Plugins/Kitodo/Partials/TableOfContents/Title.html b/Resources/Private/Plugins/Kitodo/Partials/TableOfContents/Title.html
new file mode 100644
index 000000000..eaf66385f
--- /dev/null
+++ b/Resources/Private/Plugins/Kitodo/Partials/TableOfContents/Title.html
@@ -0,0 +1,26 @@
+<f:comment>
+<!--
+ * (c) Kitodo. Key to digital objects e.V. <contact@kitodo.org>
+ *
+ * This file is part of the Kitodo and TYPO3 projects.
+ *
+ * @license GNU General Public License version 3 or later.
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+-->
+</f:comment>
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
+      data-namespace-typo3-fluid="true">
+
+<span class="tx-dlf-toc-title">
+    <f:if condition="{child.title}">
+        <f:then>
+            <f:format.crop maxCharacters="55" append="&nbsp;..."><f:format.htmlspecialchars doubleEncode="false">{child.title}</f:format.htmlspecialchars></f:format.crop>
+        </f:then>
+        <f:else>
+            <f:format.crop maxCharacters="55" append="&nbsp;..."><f:format.htmlspecialchars doubleEncode="false">{child.type}</f:format.htmlspecialchars><f:if condition="{entry.volume}"> &nbsp;<f:format.htmlspecialchars doubleEncode="false">{child.volume}</f:format.htmlspecialchars></f:if></f:format.crop>
+        </f:else>
+    </f:if>
+</span>
+
+<span class="tx-dlf-toc-pagination"><f:format.htmlspecialchars doubleEncode="false">{child.pagination}</f:format.htmlspecialchars></span>
diff --git a/Resources/Private/Plugins/Kitodo/Templates/TableOfContents/Main.html b/Resources/Private/Plugins/Kitodo/Templates/TableOfContents/Main.html
new file mode 100644
index 000000000..8d53f7eed
--- /dev/null
+++ b/Resources/Private/Plugins/Kitodo/Templates/TableOfContents/Main.html
@@ -0,0 +1,28 @@
+<f:comment>
+<!--
+ * (c) Kitodo. Key to digital objects e.V. <contact@kitodo.org>
+ *
+ * This file is part of the Kitodo and TYPO3 projects.
+ *
+ * @license GNU General Public License version 3 or later.
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+-->
+</f:comment>
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
+      data-namespace-typo3-fluid="true">
+
+<f:if condition="{type} == 'collection'">
+    <f:then>
+        <div class="tx-dlf-toc-preview">
+            <f:render partial="TableOfContents/Models" arguments="{models: toc}"/>
+        </div>
+    </f:then>
+    <f:else>
+        <div class="tx-dlf-tableofcontents">
+            <ul>
+                <f:render partial="TableOfContents/Children" arguments="{children: toc}"/>
+            </ul>
+        </div>
+    </f:else>
+</f:if>
