{namespace n=GeorgRinger\News\ViewHelpers}

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

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

<f:section name="content">
    <f:if condition="{newsItem}">
        <f:then>

            <!-- start: News Detail Top -->
            <section id="news_detail_top" class="top_section">
                <div class="container-fluid">
                    <div class="row">
                        <div class="hidden-xs hidden-sm col-md-12">
                            <f:render partial="Detail/FalMediaContainer" arguments="{media: newsItem.falMedia, settings:settings}" />
                        </div>
                        <div class="col-xs-12 col-sm-12 hidden-md hidden-lg">
                            <f:render partial="Detail/FalMediaContainerMobile" arguments="{media: newsItem.falMedia, settings:settings}" />
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="hidden-xs hidden-sm col-md-12">
                        <h1>{newsItem.title}</h1>
                        <div class="padded-multiline">
                            <p>
                                <span>
                                <f:if condition="{newsItem.teaser}">
                                    <f:format.raw>{newsItem.teaser}</f:format.raw>
                                </f:if>
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
            </section>
            <!-- end: News Detail Top -->

            <!-- start: News Detail Content -->
            <section id="news_detail_content">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <p>
                                <time datetime="{f:format.date(date:newsItem.datetime, format:'Y-m-d')}">
                                    <f:format.date format="{f:translate(key:'dateFormat')}">{newsItem.datetime}</f:format.date>
                                    <meta itemprop="datePublished" content="{f:format.date(date:newsItem.datetime, format:'Y-m-d')}" />
                                </time>
                            </p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 hidden-md hidden-lg mobile">
                            <h1>{newsItem.title}</h1>
                            <f:if condition="{newsItem.teaser}">
                                <f:format.html>{newsItem.teaser}</f:format.html>
                            </f:if>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 all_devices">
                            <f:format.html>{newsItem.bodytext}</f:format.html>
                        </div>
                    </div>
                    <div class="row bottom">
                        <div class="col-xs-6 col-xs-push-6 col-sm-6 col-sm-push-6 col-md-push-6 col-md-6 social">
                            <!-- Go to www.addthis.com/dashboard to customize your tools -->
                            <div class="addthis_inline_share_toolbox"></div>
                        </div>
                        <div class="col-xs-6 col-xs-pull-6 col-sm-6 col-sm-pull-6 col-md-pull-6 col-md-6 back">
                            <f:link.page pageUid="{settings.backPid}" class="arrow">
                                <f:translate key="back-link" />
                            </f:link.page>
                        </div>
                    </div>
                </div>
            </section>
            <!-- end: News Detail Content -->

        </f:then>
        <f:else>

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