Sindbad~EG File Manager

{{!
    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/>.
}}
<div class="block04design1 black-bg blockbgcolor">
    <div class="container blockbgcolor-b">
        <div class="row">
            <div class="col-sm-12 hy-pb-20">
                <div class="section-title-fp text-center hytext">
                    <h4>{{block04header}}</h4>
                </div>
            </div>
        </div>
        {{! This Code Block is For PC Edition }}
        <div class="container text-center d-none d-sm-none d-md-block">
            <div class="d-none d-sm-none d-md-block ml-auto pb-3">
                <div>
                    <a class="btn-sm float-sm-left block04design1__arrow text-decoration-none" href="#block04design1Carousel" role="button" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
                    <a class="hire-us-btn hybtn" href="{{block04buttonlink}}">{{block04button}}</a>
                    <a class="btn-sm float-sm-right block04design1__arrow text-decoration-none" href="#block04design1Carousel" role="button" data-slide="next"><i class="fa fa-chevron-right"></i></a>
                </div>
            </div>
            <div id="block04design1Carousel" class="carousel slide w-100" data-ride="carousel">
                <div class="carousel-inner w-100 " role="listbox">
                    <div class="carousel-item row no-gutters active">
                        {{#block04_1}}
                        <div class="col-md-3 float-left">
                            <div class="single-project" style= "background-image: url({{{image}}});">
                                <div class="project-inner">
                                    <h5><a class="text-decoration-none" href="{{link}}">{{title}}</a></h5>
                                    <p>{{caption}}</p>
                                </div>
                            </div>
                        </div>   
                        {{/block04_1}} 
                    </div>
                    <div class="carousel-item row no-gutters">
                        {{#block04_2}}
                        <div class="col-md-3 float-left">
                            <div class="single-project" style= "background-image: url({{{image}}});">
                                <div class="project-inner">
                                    <h5><a class="text-decoration-none" href="{{link}}">{{title}}</a></h5>
                                    <p>{{caption}}</p>
                                </div>
                            </div>
                        </div>
                        {{/block04_2}}
                    </div>
                </div>
                <div class="d-none d-sm-block d-md-none d-block d-sm-none">
                    <a class="carousel-control-prev " href="#block04design1Carousel" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#block04design1Carousel"  data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>    
            </div>
        </div>

        {{! This Code Block is For Mobile Edition }}
        <div class="container text-center my-3 d-md-none d-lg-none d-xl-none">
            <div class="blockbgcolor-b">
                <a class="hire-us-btn hybtn" href="{{block04buttonlink}}">{{block04button}}</a>
            </div>  
            <div id="block04design1CarouselMobile" class="carousel slide w-100" data-ride="carousel">
                <div class="carousel-inner w-100" >
                    {{#block04}}
                    <div class="carousel-item col-md-3 float-left {{#active}}active{{/active}} ">
                        <div class="single-project" style = "background-image: url({{{image}}});">
                            <div class="project-inner">
                                <h5><a class="text-decoration-none" href="{{link}}">{{title}}</a></h5>
                                <p>{{caption}}</p>
                            </div>
                        </div>
                    </div>    
                    {{/block04}}
                </div>
                <a class="carousel-control-prev " href="#block04design1CarouselMobile" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#block04design1CarouselMobile"  data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>
</div>