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

<f:if condition="{menu}">
  <f:switch expression="{layout}">
    <f:case value="1">
      <f:render section="MenuCategories"
                arguments="{menu: menu, files: files, data: data}"/>
    </f:case>
    <f:defaultCase>
      <f:render section="MenuDefault"
                arguments="{menu: menu, files: files, data: data}"/>
    </f:defaultCase>
  </f:switch>
</f:if>

<f:section name="MenuDefault">
  <div class="row">
    <f:for each="{menu}" as="page">

      <a href="{page.link}"
         class="col"
         title="{page.title}"
         {f:if(condition: page.target, then: ' target="{page.target}"')}
      >
      <div class="col-wrapper">
        <div class="contentwrapper">
          <div class="row">
            <div class="col teasertext">
              <p class="text">{page.title}</p>
              <p class="category big">{page.data.subtitle}</p>
            </div>
          </div>
        </div>

        <f:if condition="{page.files -> f:count()}">
          <f:then>
            <picture>
              <source media="(min-width: 1200px)"
                      srcset="{f:uri.image(image: page.files.0, maxWidth: 800, cropVariant: 'desktop')}"/>
              <source media="(max-width: 1200px)"
                      srcset="{f:uri.image(image: page.files.0, maxWidth: 370, cropVariant: 'tablet')}"/>
              <source media="(max-width: 750px)"
                      srcset="{f:uri.image(image: page.files.0, maxWidth: 720, cropVariant: 'mobile')}"/>

              <f:image image="{page.files.0}" maxWidth="800" cropVariant="desktop" class="img-responsive hero"/>
            </picture>
          </f:then>
          <f:else>
            <f:comment><!-- @TODO: default image --></f:comment>
          </f:else>
        </f:if>
      </div>
      </a>

    </f:for>
  </div>
</f:section>

<f:section name="MenuCategories">
  <section class="bluredtitle bluebg contact">
    <div class="blurtitle-inner">
      <div class="blur"></div>

      <f:if condition="{files -> f:count()}">
        <picture>
          <source srcset="{f:uri.image(image: files.0, width: 992, cropVariant: 'mobile')}"
                  media="(max-width: 992px)">
          <source srcset="{f:uri.image(image: files.0, width: 1200, cropVariant: 'tablet')}"
                  media="(max-width: 1200px)">
          <source srcset="{f:uri.image(image: files.0, width: 1800, cropVariant: 'desktop')}"
                  media="(min-width: 1200px)">

          <f:image image="{files.0}" width="1800" cropVariant="desktop"/>
        </picture>
      </f:if>
    </div>
    <div class="container intro">
      <div class="row">
        <div class="col-md-12 col-12">
          <f:cObject typoscriptObjectPath="lib.breadcrumb"/>
        </div>
      </div>

      <div class="highlightbox contactfilter national">
        <div class="container contactfiltercontent">
          <div class="row">
            <div class="col-md-8 col-12">
              <f:if condition="{data.header}">
                <p class="h2">
                  {data.header}
                </p>
              </f:if>

              <f:if condition="{data.subheader}">
                <p>{data.subheader}</p>
              </f:if>

              <ul class="nav nav-tabs nav-tabs-accordion" role="tablist">
                <f:for each="{menu}" as="page">
                  <li class="nav-item" role="presentation">
                    <a href="{page.link}"
                       class="nav-link{f:if(condition: '{page.active} || {page.current}', then: ' active')}"
                       title="{page.title}"
                       {f:if(condition: page.target, then: ' target="{page.target}"')}
                    >
                      <span>{page.title}</span>
                    </a>
                  </li>
                </f:for>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</f:section>

</html>
