<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers" xmlns:nahrstedt="http://typo3.org/ns/AmadeusAgentur/Nahrstedt/Sitepackage/ViewHelpers" data-namespace-typo3-fluid="true">

<div class="section section-address-single bg-light transition-after transition-type-1">
    <div class="container">
        <div class="address_single" itemtype="http://schema.org/Bakery" itemid="uid{address.uid}" itemscope>

            <div class="address-interactions">
                <p>
                    <f:cache.disable>
                        <nahrstedt:Cookie>
                            <f:then>
                                <span class="btn btn-primary btn-favorite" data-favorite="{address.uid}">Das ist meine Lieblingsort!</span>
                            </f:then>
                            <f:else>
                                <a href="#" class="btn btn-primary btn-favorite" data-favorite="{address.uid}">Als Lieblingsort markieren</a>
                            </f:else>
                        </nahrstedt:Cookie>
                    </f:cache.disable>

                </p>
            </div>
            <f:if condition="{address.address}">
                <div class="address-address">
                    <h2>Adresse</h2>
                    <p itemprop="address" itemtype="http://schema.org/PostalAddress" itemscope>
                        <span itemprop="addressLocality">{address.address}</span><br>
                        <span itemprop="postalCode">{address.zip}</span>&nbsp;<span itemprop="streetAddress">{address.city}</span><br>
                        <meta itemprop="addressCountry" content="DE"/>
                    </p>
                    <div itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">
                        <meta itemprop="latitude" content="{address.latitude}"/>
                        <meta itemprop="longitude" content="{address.longitude}"/>
                    </div>
                    <p>
                        <f:if condition="{address.phone}">
                            Telefon: <a href="tel:{address.phone}"><span itemprop="telephone" content="{address.phone}">{address.phone}</span></a><br>
                        </f:if>

                        <f:if condition="{address.email}">
                            <f:then>
                                E-Mail:
                                <f:link.email email="{address.email}">><span itemprop="email">{address.email}</span></f:link.email>
                            </f:then>
                            <f:else>
                                E-Mail:
                                <f:link.email email="info@nahrstedt.de"><span itemprop="email">info@nahrstedt.de</span></f:link.email>
                            </f:else>
                        </f:if>
                    </p>
                    <p>
                        <f:link.external uri="https://www.google.com/maps/search/?api=1&query={address.name -> f:format.urlencode()}%2C{address.address -> f:format.urlencode()}%2C{address.city -> f:format.urlencode()}" class="btn btn-outline-secondary link-external" target="_blank" rel="noopener noreferrer">In Google Maps anzeigen</f:link.external>
                    </p>
                </div>
            </f:if>

            <f:if condition="{address.openingHours }">
                <div class="address-openinghours">
                    <h2>Öffnungszeiten</h2>
                    <div class="description">
                        {address.openingHours -> f:format.raw()}
                    </div>
                </div>
            </f:if>

            <f:if condition="{address.description}">
                <div class="address-description">
                    <h2>Information</h2>
                    <div class="description">
                        {address.description -> f:format.html()}
                    </div>
                </div>
            </f:if>


            <f:if condition="{address.image -> f:count()} > 1">
                <div class="address-image">
                    <h2>Impressionen</h2>
                    <div class="row">
                        <f:for each="{address.image}" as="img" iteration="iterator">
                            <div class="col-md-4">
                                <figure class="figure">

                                    <a href="{f:uri.image(src:img.originalResource.publicUrl, maxWidth:1000)}"
                                       class="media-object {settings.detail.imageClass}"
                                       data-fancybox="images_tt_address_{address.uid}"
                                       title="{img.originalResource.title}"
                                       target="_blank">
                                        <f:image image="{img}" width="400"
                                                 alt="{img.originalResource.alt}"
                                                 title="{img.originalResource.title}"
                                                 class="figure-img img-fluid img-thumbnail rounded"
                                                 additionalAttributes="{itemprop:'image'}"/>
                                    </a>
                                    <f:if condition="{img.originalResource.description}">
                                        <figcaption class="figure-caption">
                                            {img.originalResource.description -> f:format.nl2br()}
                                        </figcaption>
                                    </f:if>
                                </figure>
                            </div>
                        </f:for>
                    </div>


                </div>

            </f:if>


        </div>

    </div>
</div>


<v:asset.script movable="true" standalone="true" path="EXT:bn_sitepackage/Resources/Public/JavaScript/Dist/jquery.fancybox.min.js" name="fancyboxjs" dependencies="jquery"/>

<v:asset.script movable="true" standalone="true">
    $('[data-fancybox]').fancybox({ smallBtn: true, });

    $('.btn-favorite').on('click',(evt) => {
    evt.preventDefault();
    var d = new Date();
    d.setTime(d.getTime() + (3655 * 86400000));
    document.cookie = "favorite="+$(evt.currentTarget).data('favorite')+";path=/; expires="+d.toUTCString()
    console.log(document.cookie);
    })
    console.log(document.cookie);

</v:asset.script>
<v:asset.style path="EXT:bn_sitepackage/Resources/Public/Css/jquery.fancybox.min.css" name="fancyboxcss"/>
