{namespace neos=Neos\Neos\ViewHelpers}
{namespace fusion=Neos\Fusion\ViewHelpers}
{namespace media=Neos\Media\ViewHelpers}
{namespace blog=NeosRulez\Blog\ViewHelpers}
<div class="container py-5">
    <div class="row">
        <div class="col-12">
            {neos:contentElement.editable(property: 'title', tag: 'h1', node: node)}
            <h3 class="blog-teaser">{neos:contentElement.editable(property: 'blogsubtitle', node: node)}</h3>
            <div class="row align-items-end">
                <div class="{f:if(condition: '{showSocialShare}', then: 'col-md-6', else: 'col-12')}">
                    <f:if condition="{showDate}">
                        <span class="d-block blog-post-date">
                            <f:format.date format="d.m.Y" forceLocale="1">{blogdate}</f:format.date>
                        </span>
                    </f:if>
                    <f:if condition="{showAuthor}">
                        <span class="d-inline blog-author">{f:translate(id: 'from', package: 'NeosRulez.Blog', source: 'NodeTypes/BlogPost')} {blogauthor}</span>
                    </f:if>
                    <f:if condition="{showCategory}">
                        <span class="d-inline blog-categories ml-3">
                            <f:if condition="{blogcategories}">
                                <f:for each="{blogcategories}" as="blogcategory" iteration="iterator">
                                    <f:if condition="!{iterator.isFirst}">
                                        <f:then>
                                            <i class="fas fa-tags ml-2"></i>
                                        </f:then>
                                        <f:else>
                                            <i class="fas fa-tags"></i>
                                        </f:else>
                                    </f:if>{blogcategory.properties.title}
                                </f:for>
                            </f:if>
                        </span>
                    </f:if>
                </div>
                <f:if condition="{showSocialShare}">
                    <div class="col-md-6 blog-social-share">
                        <span class="d-inline mr-3">{f:translate(id: 'share', package: 'NeosRulez.Blog', source: 'NodeTypes/BlogPost')}:</span>
                        <a href="https://twitter.com/intent/tweet?source={neos:uri.node(absolute: '{true}')}&text={title}&via={twitterAccountName}" target="_blank" title="Twitter"><i class="fab fa-twitter"></i></a>
                        <a href="https://www.linkedin.com/shareArticle?mini=true&url={neos:uri.node(absolute: '{true}')}&title={title}" target="_blank" onclick="return !window.open(this.href, 'LinkedIn', 'width=500,height=500')" title="Share on LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                        <a href="https://www.facebook.com/sharer/sharer.php?u={neos:uri.node(absolute: '{true}')}&quote={title}" target="_blank" onclick="return !window.open(this.href, 'Facebook', 'width=500,height=500')" title="Share on Facebook"><i class="fab fa-facebook-f"></i></a>
                    </div>
                </f:if>
            </div>
            <f:if condition="{blogimages}"><media:image class="d-block my-4 img-fluid blog-image" image="{blogimages.0}" width="1110c" height="545c" allowCropping="TRUE" alt="{blogtitle}" /></f:if>
            {neos:contentElement.editable(property: 'blogcontent', node: node)}
            <f:if condition="{assets}">
                <div class="neosrulez-bootstrap-gallery">
                    {assets -> f:format.raw()}
                </div>
            </f:if>
        </div>
    </div>
</div>
{pageContent -> f:format.raw()}
<f:if condition="{enablecomments}">
    <f:if condition="!{node.context.inBackend}">
        <f:then>
            <div class="container mt-5">
                <f:render section="Comment" arguments="{_all}" />
            </div>
        </f:then>
        <f:else>
            <div class="container">
                <code>{f:translate(id: 'notInBackend', package: 'NeosRulez.Blog', source: 'NodeTypes/BlogPostComment')}</code>
            </div>
        </f:else>
    </f:if>
    <f:if condition="{comments}">
        <div id="comments" class="container mt-5">
            <f:for each="{comments}" as="comment">
                <div class="row mt-4">
                    <div class="col-md-1 col-2">
                        <img class="img-fluid" src="http://gravatar.com/avatar/{blog:gravatar(authorMail:'{comment.properties.blogPostCommentAuthorEmail}')}?s=250" alt="{comment.properties.blogPostCommentAuthorName}">
                    </div>
                    <div class="col-md-11 col-10">
                        <strong class="d-block">{comment.properties.blogPostCommentAuthorName}</strong>
                        <span class="d-block text-muted"><f:format.date format="d.m.Y, H:i">{comment.properties.blogPostCommentdate}</f:format.date></span>
                        <span class="d-block mt-2"><f:format.stripTags>{comment.properties.blogPostCommentMessage}</f:format.stripTags></span>
                    </div>
                </div>
            </f:for>
        </div>
    </f:if>
</f:if>
<f:section name="Comment">
    <f:if condition="{comments}">
        <f:then>
            <h5>{f:translate(id: 'header', package: 'NeosRulez.Blog', source: 'NodeTypes/BlogPostComment')}</h5>
        </f:then>
        <f:else>
            <h5>{f:translate(id: 'header0', package: 'NeosRulez.Blog', source: 'NodeTypes/BlogPostComment')}</h5>
        </f:else>
    </f:if>
    <p class="mb-4">{f:translate(id: 'headertext', package: 'NeosRulez.Blog', source: 'NodeTypes/BlogPostComment')}</p>
    <f:form action="create" arguments="{parentnode: node.identifier}" controller="Comment" package="NeosRulez.Blog">
        <div class="d-block comment-form">
            <div class="form-group">
                <label for="name">{f:translate(id: 'name', package: 'NeosRulez.Blog', source: 'NodeTypes/BlogPostComment')}</label>
                <f:form.textfield class="form-control" id="name" name="name" placeholder="{f:translate(id: 'name', package: 'NeosRulez.Blog', source: 'NodeTypes/BlogPostComment')}" required="required" />
            </div>
            <div class="form-group">
                <label for="email">{f:translate(id: 'email', package: 'NeosRulez.Blog', source: 'NodeTypes/BlogPostComment')}</label>
                <f:form.textfield class="form-control" id="email" name="email" placeholder="{f:translate(id: 'email', package: 'NeosRulez.Blog', source: 'NodeTypes/BlogPostComment')}" required="required" />
            </div>
            <div class="form-group">
                <label for="message">{f:translate(id: 'message', package: 'NeosRulez.Blog', source: 'NodeTypes/BlogPostComment')}</label>
                <f:form.textarea class="form-control" id="message" name="message" placeholder="{f:translate(id: 'message', package: 'NeosRulez.Blog', source: 'NodeTypes/BlogPostComment')}" required="required" />
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary">{f:translate(id: 'submit', package: 'NeosRulez.Blog', source: 'NodeTypes/BlogPostComment')}</button>
            </div>
        </div>
    </f:form>
</f:section>