{namespace n=GeorgRinger\News\ViewHelpers}

<f:layout name="Detail.html" />

<!--
  =====================
    News/Detail.html
-->

<f:section name="content">
  <f:if condition="{newsItem}">
    <f:then>
      <n:format.nothing>
        <f:if condition="{newsItem.alternativeTitle}">
          <f:then>
            <n:titleTag>
              <n:format.htmlentitiesDecode>{newsItem.alternativeTitle}</n:format.htmlentitiesDecode>
            </n:titleTag>
          </f:then>
          <f:else>
            <n:titleTag>
              <n:format.htmlentitiesDecode>{newsItem.title}</n:format.htmlentitiesDecode>
            </n:titleTag>
          </f:else>
        </f:if>
        <f:render partial="Detail/Opengraph" arguments="{newsItem: newsItem, settings:settings}" />
      </n:format.nothing>
      <div class="header">
        <h3 itemprop="headline">{newsItem.title}</h3>
      </div>
      <div class="footer">
        <p>
          <!-- date -->
          <span class="news-list-date">
            <time datetime="{f:format.date(date:newsItem.datetime, format:'Y-m-d')}">
              <f:format.date format="{f:translate(key:'LLL:fileadmin/templates/ext/news/Language/locallang.xlf:dateFormat')}">{newsItem.datetime}</f:format.date>
              <meta itemprop="datePublished" content="{f:format.date(date:newsItem.datetime, format:'Y-m-d')}" />
            </time>
          </span>

          <f:if condition="{newsItem.tags}">
            <!-- Tags -->
            <span class="news-list-tags" itemprop="keywords">
            <f:for each="{newsItem.tags}" as="tag">
              {tag.title}
            </f:for>
            </span>
          </f:if>

          <f:if condition="{newsItem.author}">
            <!-- author -->
            <span class="news-list-author" itemprop="author" itemscope="itemscope" itemtype="http://schema.org/Person">
              Oprettet af: <span itemprop="name">{newsItem.author}</span>
            </span>
          </f:if>
        </p>
      </div>

      <f:if condition="{newsItem.teaser}">
        <!-- teaser -->
        <div class="teaser-text" itemprop="description">
          <f:format.html>{newsItem.teaser}</f:format.html>
        </div>
      </f:if>

      <f:if condition="{newsItem.contentElements}">
        <!-- content elements -->
        <f:cObject typoscriptObjectPath="lib.tx_news.contentElementRendering">{newsItem.contentElementIdList}</f:cObject>
      </f:if>
      <div id="news-slider">
        <f:render partial="Detail/FalMediaContainer" arguments="{media: newsItem.falMedia, settings:settings}" />
        <f:render partial="Detail/MediaContainer" arguments="{media: newsItem.media, settings:settings}" />
      </div>
      <script type="text/javascript">
        $(document).ready(function() {
          $('#news-slider').coinslider({ width: 565, height: 376, links: true});
        });
      </script>
      <!-- main text -->
      <div class="news-text-wrap" itemprop="articleBody">
        <f:format.html>{newsItem.bodytext}</f:format.html>
      </div>

      <f:if condition="{settings.backPid}">
        <!-- Link Back -->
        <div class="news-backlink-wrap"><p>
          <f:link.page pageUid="{settings.backPid}">
            Tilbage
          </f:link.page>
          </p></div>
      </f:if>

      <f:if condition="{settings.detail.showSocialShareButtons}">
        <div class="facebook">
          <div class="like">
            <n:social.facebook.like />
          </div>
          <div class="share">
            <n:social.facebook.share />
          </div>
          <div class="twitter">
            <n:social.twitter>Twitter</n:social.twitter>
          </div>
        </div>
      </f:if>

      <f:if condition="{settings.detail.disqusShortname}">
        <n:social.disqus newsItem="{newsItem}"
                 shortName="{settings.detail.disqusShortname}"
                 link="{n:link(newsItem:newsItem, settings:settings, uriOnly:1, configuration:'{forceAbsoluteUrl:1}')}" />
      </f:if>

      <!-- related things -->
      <div class="news-related-wrap">

        <f:if condition="{newsItem.allRelatedSorted}">
          <!-- Related news records -->
          <div class="news-related news-related-news">
            <h4>
              <f:translate key="related-news" />
            </h4>
            <ul>
              <f:for each="{newsItem.allRelatedSorted}" as="related">
                <li>
                  <span class="news-related-news-date"><f:format.date format="{f:translate(key:'dateFormat')}">{related.datetime}</f:format.date></span>
                  <n:link newsItem="{related}" settings="{settings}" title="{related.title}">
                    {related.title}
                  </n:link>
                </li>

              </f:for>
            </ul>
          </div>
        </f:if>

        <f:if condition="{newsItem.relatedFiles}">
          <!-- Related files -->
          <div class="news-related news-related-files">
            <h4>
              <f:translate key="related-files" />
            </h4>
            <ul>
              <f:for each="{newsItem.relatedFiles}" as="relatedFile">
                <li>
                  <span class="news-related-files-link">
                    <n:format.fileDownload file="uploads/tx_news/{relatedFile.file}" configuration="{settings.relatedFiles.download}">
                      <f:if condition="{relatedFile.title}">
                        <f:then>
                          {relatedFile.title}
                        </f:then>
                        <f:else>
                          {relatedFile.file}
                        </f:else>
                      </f:if>
                    </n:format.fileDownload>
                  </span>
                  <span class="news-related-files-size">
                    <n:format.fileSize file="uploads/tx_news/{relatedFile.file}" format="{settings.relatedFiles.fileSizeLabels}" />
                  </span>
                </li>
              </f:for>
            </ul>
          </div>
        </f:if>

        <f:if condition="{newsItem.falRelatedFiles}">
          <!-- FAL related files -->
          <div class="news-related news-related-files">
            <h4>
              <f:translate key="related-files" />
            </h4>
            <ul>
              <f:for each="{newsItem.falRelatedFiles}" as="relatedFile">
                <li>
                  <span class="news-related-files-link">
                    <n:format.fileDownload file="{relatedFile.originalResource.publicUrl}" configuration="{settings.relatedFiles.download}">
                      <f:if condition="{relatedFile.originalResource.title}">
                        <f:comment><!-- Todo: Remove format.raw() if using title/name outside cObject context--></f:comment>
                        <f:then>
                          {relatedFile.originalResource.title -> f:format.raw()}
                        </f:then>
                        <f:else>
                          {relatedFile.originalResource.name -> f:format.raw()}
                        </f:else>
                      </f:if>
                    </n:format.fileDownload>
                  </span>
                  <span class="news-related-files-size">
                    {relatedFile.originalResource.size -> f:format.bytes()}
                  </span>
                </li>
              </f:for>
            </ul>
          </div>
        </f:if>

        <f:if condition="{newsItem.relatedLinks}">
          <!-- Related links -->
          <div class="news-related news-related-links">
            <h4>
              <f:translate key="related-links" />
            </h4>
            <ul>
              <f:for each="{newsItem.relatedLinks}" as="relatedLink">
                <li>
                  <f:link.page pageUid="{relatedLink.uri}" title="{relatedLink.title}" target="{n:targetLink(link:relatedLink.uri)}">{f:if(condition: relatedLink.title, then: relatedLink.title, else: relatedLink.uri)}</f:link.page>
                  <f:if condition="{relatedLink.description}"><span>{relatedLink.description}</span></f:if>
                </li>
              </f:for>
            </ul>
          </div>
        </f:if>
      </div>
    </f:then>
    <f:else>

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