{namespace fr=FR\FrResources\ViewHelpers}

<div class="image-box style-3-b">
    <div class="row">
        <div class="col-sm-6 col-md-5 col-lg-4">
            <div class="overlay-container">
                <img src="" alt="Image of Audio Sound"/>
                <f:if condition="{resource.falImage.originalResource.description}">
                    <div class="overlay-to-top">
                        <p class="small margin-clear">{resource.falImage.originalResource.description}</p>
                    </div>
                </f:if>
            </div>
        </div>

        <div class="col-sm-6 col-md-7 col-lg-8">
            <div class="body">
                    <h3 class="title">
                        <f:link.action action="show" arguments="{resource : resource}" pageUid="{settings.singlePid}"> 
                            {resource.title}  
                        </f:link.action>
                    </h3>
                    <p class="small mb-10">
                        <f:if condition="{resource.datetime}">
                            <i class="icon-calendar"></i> <f:format.date format="d F Y">{resource.datetime}</f:format.date>
                        </f:if>
                        <f:if condition="{resource.categories}">
                            <i class="pl-10 icon-tag-1"></i> 
                            <f:for each="{resource.categories}" as="category" iteration="catIterator">
                                    <f:link.page title="{category.title}" class="active" pageUid="{settings.listPid}" additionalParams="{tx_frresources_resourcelist:{categories: category.uid}}">
                                         {category.title}{f:if(condition:catIterator.isLast, then: '', else: ', ')}
                                    </f:link.page>
                            </f:for>
                        </f:if>
                    </p>
                    <div class="separator-2"></div>
                    <p class="mb-10">
                        {resource.description}
                    </p>
                    <div class="audio-player">
                        <fr:media file="{resource.falAudio}" additionalConfig="{showinfo:1}" width="200" height="150"/>
                    </div>
                    <f:link.action action="show" arguments="{resource : resource}" pageUid="{settings.singlePid}" class="btn btn-default btn-sm btn-hvr hvr-shutter-out-horizontal margin-clear">
                        Read More<i class="fa fa-arrow-right pl-10"></i>
                    </f:link.action>
            </div>
    </div>
    </div>
</div>