title = "Article"
url = "/article_new/:slug"
layout = "default"
is_hidden = 0
lazy_load = 1
robot_index = "index"
robot_follow = "follow"
enabled_in_sitemap = 0
model_all_posts = 0
model_include_default = 0
use_updated_at = 1
changefreq = "always"
priority = 0.1

[blogPost]
slug = "{{ :slug }}"
categoryPage = "news"

[blogPosts]
pageNumber = "{{ :page }}"
postsPerPage = 10
noPostsMessage = "No posts found"
sortOrder = "published_at desc"
categoryPage = "news"
postPage = "article"
==
<?php
use Rainlab\Blog\Models\Post;

function onStart() 
{
    //$allPosts = Post::all();
    //$this["allPosts"] = $allPosts;
}
?>
==
{% set post = blogPost.post %}
{% set posts = blogPosts.posts %}
<div class="main overflow-hidden">
    {% put styles %}
    <style>
    .slider__main__content {
        display: flex;
        height: 100%;
        flex-direction: column;
        justify-content: end;
        padding-left: 25px;
        padding-right: 100px;
        /*padding-top: 110px;*/
    }
    .back__btn__blk {
        padding-top: 0px;
        margin-bottom: 10px;
        margin-right: 20px;
    }
    .tab__area {
        padding-top: 20px;
        padding-bottom: 0px;
    }
    .tab__topbar {
        text-align: center;
        padding-bottom: 10px;
    }
    </style>
    {% endput %}
    {% set numoffeaturedimages = post.featured_images|length %}
    <!-- =================== Slider AREA START ===================== -->
    <div class="slider__area">
        <div class="slider__left__blk" style="background-image: url({{ numoffeaturedimages>0?post.featured_images.0.path:'' }});">
            <div class="slider__main__content">
                <div class="slider__pages">
                    <div class="back__btn__blk">
                        <a href="#" onclick="history.back()"><i class="fal fa-long-arrow-left"></i>Go Back</a>
                    </div>
                    <a href="/">Home</a>
                    <span>{{ post.title }}</span>
                </div>
            </div>
        </div>
    </div>
    <!-- =================== Slider AREA START ===================== -->


    <!-- =================== SERVICE AREA START ===================== -->
    <div class="row">
        <div class="col-lg-8">
        <section class="tab__area">
            {% if backendLoggedIn and editMode %}
                <a style="position:relative;top:0;left:0;border-radius:0;z-index:10000000;width:150px;" class="btn btn-success btn-sm" href="{{ url('/') }}{{ backendUri }}/rainlab/blog/posts/update/{{ post.id }}" role="button" target="_blank">Edit Post</a>
            {% endif %}
            <div class="container">
            <h1>{{ post.title }}</h1>
            {% if numoffeaturedimages > 1 %}
            <div class="float-start w-100 p-4">
                <div id="carousel">
                {% set midimage = ((post.featured_images|length)/2)|number_format %}
                    {% for currentImage in post.featured_images|slice(1,post.featured_images|length) %}
                    {% set currentClass = "hideLeft" %}
                    {% if loop.index == midimage %}
                        {% set currentClass = "selected" %}
                    {% elseif loop.index == midimage-1 %}
                        {% set currentClass = "prev" %}
                    {% elseif loop.index == midimage-2 %}
                        {% set currentClass = "prevLeftSecond" %}
                    {% elseif loop.index < midimage-2 %}
                        {% set currentClass = "hideLeft" %}
                    {% elseif loop.index == midimage+1 %}
                        {% set currentClass = "next" %}
                    {% elseif loop.index == midimage+2 %}
                        {% set currentClass = "nextRightSecond" %}
                    {% elseif loop.index > midimage+2 %}
                        {% set currentClass = "hideRight" %}
                    {% endif %}
                        <div class="{{ midimage }} {{ loop.index }} {{ currentClass }}">
                            <img src="{{ currentImage.path }}">
                        </div>
                    {% endfor %}        
                </div>
                <div class="buttonscarousel">
                    <button class="carousel-control-prev" id="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true" style="background-color: black;border-radius: 5px;padding: 25px;margin-right: 70px; min-width: 32px; width: auto;"></span>
                    <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" id="next">
                    <span class="carousel-control-next-icon" aria-hidden="true" style="background-color: black;border-radius: 5px;padding: 25px;margin-left: 70px;min-width: 32px; width: auto;"></span>
                    <span class="visually-hidden">Next</span>
                    </button>
                </div>
            </div>
            {% put scripts %}
            <script>
            function moveToSelected(element) {
                  if (element == "next") {
                    var selected = $(".selected").next();
                  } else if (element == "prev") {
                    var selected = $(".selected").prev();
                  } else {
                    var selected = element;
                  }
                
                  var next = $(selected).next();
                  var prev = $(selected).prev();
                  var prevSecond = $(prev).prev();
                  var nextSecond = $(next).next();
                
                  $(selected).removeClass().addClass("selected");
                
                  $(prev).removeClass().addClass("prev");
                  $(next).removeClass().addClass("next");
                
                  $(nextSecond).removeClass().addClass("nextRightSecond");
                  $(prevSecond).removeClass().addClass("prevLeftSecond");
                
                  $(nextSecond).nextAll().removeClass().addClass('hideRight');
                  $(prevSecond).prevAll().removeClass().addClass('hideLeft');
                
                }
                
                // Eventos teclado
                $(document).keydown(function(e) {
                    switch(e.which) {
                        case 37: // left
                        moveToSelected('prev');
                        break;
                
                        case 39: // right
                        moveToSelected('next');
                        break;
                
                        default: return;
                    }
                    e.preventDefault();
                });
                
                $('#carousel div').click(function() {
                  moveToSelected($(this));
                });
                
                $('#prev').click(function() {
                  moveToSelected('prev');
                });
                
                $('#next').click(function() {
                  moveToSelected('next');
                });
                </script>
            {% endput %}
            {% endif %}
            {{ post.content_html|raw }}
            {% if post.categories|length > 0 and post.categories[0].slug == "news" %}
            Back to:         
            {% for category in post.categories %}
                <a href="{{ category.url }}">{{ category.name }}</a>{% if not loop.last %}, {% endif %}
            {% endfor %}
            {% endif %}
            </div>
        </section>
        </div>
        <div class="col-lg-4" style="border-left: solid 0px">
        {% for post in posts|shuffle|slice(0,5) %}
            <div class="row">
            <div class="col" style="margin: 5px 0px;">
                <div style="box-shadow: -3px -3px #8080804a;text-align: center; border: solid 0px; padding: 5px; margin: 0px 0px; height: 100%;">
                {% if backendLoggedIn and editMode %}
                    <a style="display: flex;position:relative;top:0;left:0;border-radius:0;z-index:10000000;width:150px;" class="btn btn-success btn-sm" href="{{ url('/') }}{{ backendUri }}/rainlab/blog/posts/update/{{ post.id }}" role="button" target="_blank">Edit post</a>
                {% endif %}
                    <div style="height: 200px; display: flex; justify-content: center; align-items: center; overflow: hidden">
                    <a href="{{ post.url }}"><img src="{% if post.featured_images is not empty %}{{ post.featured_images.0.path }}{% endif %}" style="min-height:200px; min-width:100%; object-fit: cover;" noresize></a>
                    </div>
                        <span class="button" style="position: relative;top: -25px;background: #d9d9d9;border-radius: 1px;padding: 4px;">{{ post.categories.0.name }}</span>
                        <br>
                        <h2 style="font-size: 20px"><a href="{{ post.url }}">{{ post.title }}</a></h2>
                        {#
                        {{ post.summary|striptags|slice(0,200)|raw }}
                        #}
                </div>
            </div>
            </div>
        {% endfor %}
        </div>
    </div>
</div>