{{!
    This file is part of Moodle - http://moodle.org/

    Moodle is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Moodle is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
}}
{{!
    @template theme_almondb/frontpage/block11_2

    Moodle template for the frontpage block11 design 2.
}}
<div class="block11design2 hy-mt-50">
    <div class="container">
        <div class="section-title-fp hytext text-center">
            <h4>{{block11header}}</h4>
            <div class="pt-5 pb-5">    
                {{{block11caption}}}
            </div>
        </div>
        <div class=" mb-2" >
            <div class="slider_arrow_left float-start">
                <a class="btn btn-sm rounded-circle" href="#carouselBlogpost1" role="button" data-bs-slide="prev"> 
                    <i class="fa fa-chevron-left"></i> 
                </a>
            </div>
            <div class="slider_arrow_right float-end">
                <a class="btn btn-sm rounded-circle" href="#carouselBlogpost1" role="button" data-bs-slide="next"> 
                    <i class="fa fa-chevron-right" ></i> 
                </a>
            </div>
            <div class="p-1 border-bottom">
            </div>
        </div>
    </div>    
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="carouselBlogpost1" class="carousel slide" data-ride="carousel">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="carousel-inner">
                            {{#block11}}
                                <div class="carousel-item {{#active}}active{{/active}} pt-3">
                                    <div class="row">
                                        <div class="col-lg-5 col-md-6">
                                            <div class="p-2" style="position:absolute; top:1px; width:95%; font-size:13px; font-weight: 500;">
                                                {{{tag}}}
                                            </div>
                                            <img class="d-block h-100" src="{{{imgurl}}}" alt="blog">
                                        </div>
                                        <!-- End of Col-md-4 -->
                                        <div class="col-lg-7 col-md-6">
                                            <div class="d-none d-md-block d-lg-block d-xl-block">
                                                <h5 class="post-heading">
                                                    <a href="{{postURL}}" class="text-decoration-none">
                                                        {{subject}}
                                                    </a>
                                                </h5>
                                            </div>
                                            <div class="d-block d-md-none pt-2">
                                                <h5 class="post-heading">
                                                    <a href="{{postURL}}" class="text-decoration-none">
                                                        {{subject}}
                                                    </a>
                                                </h5>
                                            </div>
                                            <div class="p-2">
                                                {{{userpicture}}} <strong>{{{username}}}</strong>
                                            </div>      
                                            <div class="d-none d-xl-block pb-2">
                                                <div class="card-text">{{#shortentext}} 500, {{{summary}}} {{/shortentext}}</div>
                                            </div>
                                            <div class="d-none d-lg-block d-xl-none pb-2">
                                                <div class="card-text">{{#shortentext}} 450, {{{summary}}} {{/shortentext}}</div>
                                            </div>
                                            <div class="d-none d-md-block d-lg-none pb-2">
                                                <div class="card-text">{{#shortentext}} 200, {{{summary}}} {{/shortentext}}</div>
                                            </div>
                                            <div class="d-block d-md-none pb-2">
                                                <div class="card-text">{{#shortentext}} 400, {{{summary}}} {{/shortentext}}</div>
                                            </div>
                                            <div class="pt-1">
                                                {{{userdate}}}
                                            </div>
                                        </div>
                                        <!-- End of Col-md-8 -->
                                    </div>
                                    <!-- End of Row -->
                                </div>
                            {{/block11}}     
                            </div>
                            
                            <!-- End of Carousel Inner -->
                        </div>
                        <!-- End of Col-md-12 -->
                        <div class="col-md-12 d-none">
                            <ol class="carousel-indicators">
                                <li data-target="#carouselBlogpost1" data-bs-slide-to="0" class="active"></li>
                                <li data-target="#carouselBlogpost1" data-bs-slide-to="1"></li>
                                <li data-target="#carouselBlogpost1" data-bs-slide-to="2"></li>
                            </ol>
                            <!-- End of Carousel Indicators -->
                        </div>
                        <!-- End of Col-md-12 -->
                    </div>
                    <!-- End of Row -->
                </div>
                <!-- End of carouselExample-->
            </div>
            <!-- End of Col-md-12 -->
        </div>
        <!-- End of Row -->
    </div>
</div>
