<div class="container ">

    <ul class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
            <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
    </ul>
    
    <div class="row">
    
    {% if column_left and column_right %}
        {% set class = 'col-sm-6 fluid-allsidebar' %}
    {% elseif column_left or column_right %}
        {% set class = 'col-md-9 col-sm-12 fluid-sidebar' %}
    {% else %}
        {% set class = 'col-sm-12' %}
    {% endif %}
    
    <div id="content" class="{{ class }}">
        {{ content_top }}
        
        <div class="rows form-group">
            {% if article_info_found is defined %}
                <div class="article-info">
                    <div class="article-title">
                        <h3>{{ article_info.article_title }}</h3>
                    </div>
                    <div class="article-sub-title">
                        <span class="article-author"><a href="{{ author_url }}">{{ text_posted_by }}: {{ article_info.author_name }}</a></span>
                        <span class="article-date">{{ text_created }}: {{ article_date_modified }}</span>
                        {% if article_info.allow_comment %}
                            <span class="article-comment">{{ total_comment }}</span>
                        {% endif %}
                    </div>

                    

                    {% if image %}
                        {% if featured_found is defined %}
                            <div class="article-image">
                                <img src="{{ image }}" alt="{{ article_info.article_title }}"  />
                            </div>
                        {% else %}
                            <div class="article-image">
                                <img src="{{ image }}" alt="{{ article_info.article_title }}"/>
                               
                            </div>
                        {% endif %}
                    {% endif %}
                    
                    <div class="article-description" style="clear: both;">
                            {{ article_info.description }}
                    </div>
                    
                    {% if article_additional_description %}
                        <div class="article-description">
                             {{ article_additional_description }}
                        </div>
                    {% endif %}
                    
                    {% if products %}
                        <div class="panel panel-default panel--related">
                            <div class="panel-heading">
                                <h3 class="panel-title">{{ text_related_product }}</h3>
                            </div>
                            <div class="panel-body">
                                <div class="row product-layout">
                                    {% for product in products %}
                                        <div class="col-md-3 col-sm-6 col-xs-12">
                                            <div class="product-thumb transition simple-blog-product">
                                                {% if product.thumb %}
                                                    <div class="image"><a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" /></a></div>
                                                {% endif %}
                                                
                                                <div class="caption text-center">
                                                    <h4><a href="{{ product.href }}">{{ product.name }}</a></h4>  
                                                </div>
                                            </div>    
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    {% endif %}
                   
                    {% if simple_blog_related_articles is defined and related_articles %}
                        <div class="panel panel-default panel--related">
                            <div class="panel-heading">
                                <h3 class="panel-title">{{ text_related_article }}</h3>
                            </div>
                            
                            <div class="panel-body">
                                <div class="related-article">
                                    <div class="row ">
                                        {% for related_article in related_articles %}
                                            <div class=" col-sm-3 col-xs-12">
                                                <div class="product-thumb">
                                                    <div class="image">
                                                        <a href="{{ related_article.article_href }}">
                                                            <img src="{{ related_article.image }}" alt="{{ related_article.article_title }}" title="{{ related_article.article_title }}" class="img-responsive" />
                                                        </a>
                                                    </div>
                                                    <div class="name ">
                                                        <a href="{{ related_article.article_href }}">{{ related_article.article_title }}</a>
                                                    </div>
                                                    
                                                   
                                                </div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endif %}

                    {% if simple_blog_author_information == '1' %}
                        <div class="panel panel-default panel--author">
                            <div class="panel-heading">
                                <h3 class="panel-title">{{ author_name ~ " " ~ text_author_information }}</h3>
                            </div>
                            
                            <div class="panel-body">
                                <div class="author-info">
                                    {% if author_image  %}
                                    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-12">
                                        <img src="{{ author_image }}" alt="{{ article_info.article_title }}" style="border: 1px solid #cccccc; padding: 5px; border-radius: 5px;" />
                                    </div>
                                    {% endif %}

                                    <div class="col-lg-10 col-md-10 col-sm-9 col-xs-12">
                                        {{ author_description }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endif %}

                    {% if article_info.allow_comment %}                                
                        <div class="panel panel-default related-comment">
                            <div class="panel-body">
                                <div class="form-group">
                                    <div id="comments" class="blog-comment-info">
                                        <div id="comment-list"></div>
                                        <div id="comment-section"></div>
                                        <h2 id="review-title">
                                            {{ text_write_comment }}
                                            <i class="fa fa-times-circle fa-lg" id="reply-remove" style="display:none; cursor: pointer;" onclick="removeCommentId();"></i>
                                        </h2>                           
                                        <input type="hidden" name="blog_article_reply_id" value="0" id="blog-reply-id"/>
                                        
                                        <div class="form-group contacts-form row">
                                            <div class="col-md-6">
                                               <b>{{ entry_name }}</b><br />
                                               <input type="text" name="name" value="" class="form-control" /><br />
                                            </div>
                                            <div class="col-md-12">
                                               <b>{{ entry_review }}</b><br />
                                                <textarea name="text" class="form-control"></textarea>
                                                <span style="font-size: 11px;">{{ text_note }}</span>
                                                <br /><br />
                                            </div>
                                            <div class="col-md-12">
                                                {{ captcha }}
                                            </div>
                                          
                                        </div>
                                        
                                        <div class="text-left"><a id="button-comment" class="btn btn-info"><span>{{ button_submit }}</span></a></div>           
                                    </div>                                          
                                </div>
                            </div>                                    
                        </div>                                    
                    {% endif %}
                    
                </div>
            {% else %}
                <h3 class="text-center">{{ text_no_found }}</h3>
            {% endif %}
        </div>
        
        {{ content_bottom }}
    </div>
    {{ column_left }}
    {{ column_right }}
    </div>  
</div>