title = "Пост"
url = "/post/:id/:slug"
layout = "cms"
is_hidden = 0
robot_index = "index"
robot_follow = "follow"

[viewBag]
localeTitle[en] = "Post"

[blogPost]
slug = "{{ :slug }}"
id = "{{ :id }}"
categoryPage = "blog/category"

[views]
slug = "{{ :slug }}"

[SeoBlogPost]
post = "post"
==
{% component 'SeoBlogPost' %}
<article class="news__content">
    <header>
        <div class="news__content-header">
            <time class="news__date">
                <span>{{post.published_at|date('d.m.Y')}}</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4">
                    <path id="Polygon_1" data-name="Polygon 1" d="M2,0,4,2,2,4,0,2Z" fill="#a2a2a2" />
                </svg>
                <span>{{post.published_at|date('H:i')}}</span>
            </time>
            <div class="card__header-view" id="view">
                <svg xmlns="http://www.w3.org/2000/svg">
                    <g id="eye" transform="translate(-0.5 -3.5)">
                        <path id="Path_6489" data-name="Path 6489"
                            d="M1,11S4.636,4,11,4s10,7,10,7-3.636,7-10,7S1,11,1,11Z" fill="none" stroke=""
                            stroke-linecap="round" stroke-linejoin="round" stroke-width="1"></path>
                        <ellipse id="Ellipse_12" data-name="Ellipse 12" cx="4.859" cy="4.791" rx="4.859" ry="4.791"
                            transform="translate(6.141 6.209)" fill="none" stroke="" stroke-linecap="round"
                            stroke-linejoin="round" stroke-width="1"></ellipse>
                    </g>
                </svg>
                {% partial 'view' %}
            </div>
        </div>
        <h1 class="news__title">
            {{post.title}}
        </h1>
        {% if post.featured_image %}
        <picture class="news__image">
            <soruce media="(min-width: 1024px)" srcset="{{post.featured_image|media_cdn}}" >
            <soruce media="(min-width: 768px)" srcset="{{post.featured_image|media_cdn|resize(720)}}" >
            <soruce srcset="{{post.featured_image|media_cdn|resize(400)}}">
            <img src="{{post.featured_image|media_cdn}}" alt="{{post.title}}">
        </picture>
        {% endif %}
    </header>
    <div class="news__body">
        {{post.content|md}}

    </div>
    <div class="news__footer">
        <div class="news__footer-social">
            {% partial 'social' %}
        </div>
        <div class="news__footer-name">
            {% if post.author %}
            <p><em><strong>{{post.author}}</strong></em></p>
            {% endif %}
        </div>
    </div>
</article>
<div class="news__sidebar">
    {% partial 'latest_news'%}
</div>

{% put scripts %}
<script>
    $.request('views::onIncrement', {
        update: { view: '@#view' },

    })
    var re = /\[video poster=\"(.+?)\".+?mp4=\"(.+?)\"/g;
    //  re = /(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/g
    var ptags = document.querySelectorAll('p');

    ptags.forEach(s => {

        var m;
        m = re.exec(s.innerText);
        if (m) {
            var video = document.createElement('video');
            video.setAttribute('src', m[2]);
            video.setAttribute('controls', "")
            video.setAttribute('width', "100%")
            video.setAttribute('type', "video/mp4")
            video.setAttribute('poster', m[1])
            s.parentNode.replaceChild(video, s);

        }
    });
</script>
{% endput %}