{{#include_outer_wrapper}}
<div id="ld-course-list-content-{{filter_md5}}" class="ld-course-list-content" data-shortcode-atts="{{{filter_json}}}">
{{/include_outer_wrapper}}
    <div class="ld-course-list-items row">
        {{#grid_item}}
        <div class="el-cls ld_course_grid col-sm-{{smcol}} col-md-{{col}} {{grid_class}}">
            <article id="post-{{id}}" {{{post_class}}}>
                <div class="el-cls-image-wrap">
                    {{#is_post_type_course}}
                        <div class="{{ribbon_class}} secondary-background">
                            {{ribbon_text}}
                        </div>
                    {{/is_post_type_course}}

                    {{#show_video}}
                        <div class="ld_course_grid_video_embed">
                        {{{embed_code}}}
                        </div>
                    {{/show_video}}
                    {{^show_video}}
                        {{#has_thumbnail}}
                            <a href="{{permalink}}" rel="bookmark">
                                {{{thumbnail_link}}}
                            </a>
                        {{/has_thumbnail}}
                    {{/show_video}}
                    {{^show_video}}
                        {{^has_thumbnail}}
                            <a href="{{button_url}}" rel="bookmark">
                                <img alt="" src="{{no_image_url}}"/>
                            </a>
                        {{/has_thumbnail}}
                    {{/show_video}}
                </div>
                <div class="caption">
                    <div class="el-cls-top">
                        {{#ratingDetails}}
                            <div class="el-cls-ratings d-inline-flex align-items-center">
                                <div class='el-cls-ratings-inner d-inline-flex align-items-center'>
                                    <i class="icon-Star-1"></i>
                                    <span>{{average_rating}}</span>
                                </div>
                                <span class="ml-2 el-cls-tr">({{total_rating}})</span>
                            </div>
                        {{/ratingDetails}}

                        <a href="{{permalink}}" rel="bookmark">
                            <h3 class="entry-title el-cls-title">{{title}}</h3>
                        </a>
                        <div class="el-cls-instructor d-inline-flex align-items-center">
                            <a href="{{author_link}}">
                                {{{author_avatar}}}
                                <span class="el-cls-author-name">{{author_name}}</span>
                            </a>
                        </div>
                    </div>
                    {{#has_short_description}}
                        <p class="entry-content el-cls-desc">{{{short_description}}}</p>
                    {{/has_short_description}}
                    {{#show_progress_bar}}
                        {{#progress_found}}
                            <div class="el-cls-progress">
                                <div class="el-archive-pg-bar">
                                    <div class="el-archive-percentage" style="width:{{progress_percentage}}%">
                                    </div>
                                </div>
                                <span class="el-archive-percentage-text" data-complete="{{progress_percentage}}" style="left: calc( {{progress_percentage}}% - 15px );">{{progress_percentage}}% 
                                </span>
                            </div>
                        {{/progress_found}}                        
                    {{/show_progress_bar}}
                    <div class="el-cls-bottom d-flex">
                        {{#has_course_duration}}
                            <div class="el-cls-course-duration d-inline-flex align-items-center">
                                <i class="icon-Duration mr-2"></i>
                                <span>{{course_duration}}</span>
                            </div>
                        {{/has_course_duration}}
                        <span class="el-cls-status">
                            {{price_text}}
                        </span>
                        <p class="ld_course_grid_button"><a class="btn btn-primary" role="button" href="{{button_url}}" rel="bookmark">{{button_text}}</a></p>
                    </div>
                </div><!-- .entry-header -->
            </article><!-- #post-## -->
        </div>
        {{/grid_item}}
    </div>
    {{#posts_per_page}}
        {{#is_pager_results}}
            {{#is_pagination_needed}}
                <div class="learndash-pager learndash-pager-{{pager_context}}">
                    <span class="pager-left">
                        <a {{#is_href_query_arg}}
                         href="{{href_query_link_first}}"
                         {{/is_href_query_arg}} data-paged="{{href_val_prefix}}1" class="{{pager_left_class}}" {{{pager_left_disabled}}} title="{{first_page_text}}">&laquo;</a>
                        <a {{#is_href_query_arg}}
                            href="{{href_query_link_previous}}" 
                        {{/is_href_query_arg}} data-paged="{{href_val_prefix}}{{prev_page_number}}" class="{{pager_left_class}}" {{{pager_left_disabled}}} title="{{previous_page_text}}">&lsaquo;</a>
                    </span>
                    <span class="pager-right">
                        <a {{#is_href_query_arg}}
                            href="{{href_query_link_next}}" 
                        {{/is_href_query_arg}}  data-paged="{{href_val_prefix}}{{next_page_number}}" class="{{pager_right_class}}" {{{pager_right_disabled}}} title="{{next_page_text}}">&rsaquo;</a>
                        
                        <a {{#is_href_query_arg}}
                            href="{{href_query_link_last}}" 
                        {{/is_href_query_arg}} data-paged="{{href_val_prefix}}{{total_pages}}" class="{{pager_right_class}}" {{{pager_right_disabled}}} title="{{last_page_text}}">&raquo;</a>
                    </span>
                    <span class="pager-legend">
                        <span class="pagedisplay">{{page_text}} <span class="current_page">{{page_number}}</span> / <span class="total_pages">{{total_pages}}</span></span>
                    </span>
                </div>
            {{/is_pagination_needed}}
        {{/is_pager_results}}
    {{/posts_per_page}}
{{#include_outer_wrapper}}
</div>
{{/include_outer_wrapper}}