{{!
    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.

    Edwiser RemUI 
    @package    theme_remui
    @copyright  (c) 2018 WisdmLabs (https://wisdmlabs.com/)
    @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 
}}

{{#old_card}}
<div class=" {{widthclasses}} d-flex animation-{{animation}}" data-plugin="appear" data-animate="{{animation}}" course-id="{{id}}" >
    <div class="card {{^shadowless}}border{{/shadowless}} w-full rounded-bottom bg-white" style="{{#shadowless}}box-shadow: 0 2px 5px {{sectionproperties.shadowcolor}};{{/shadowless}}">
        <div class="img-container">
            <a href="{{ courseurl }}">
            <div class="h-200 rounded-top" style="background-image: url('{{ courseimage }}');background-size: cover;background-position: center; position: relative;"></div></a>

            {{# instructors }}
            <a href="{{ url }}" class="d-block instructor-img {{ imgStyle }}" data-toggle="tooltip" title="{{ name }}">
                <img src="{{ picture }}" style="border: 2px solid white; cursor: pointer;" class="h-50 w-50 rounded-circle" alt="{{ name }}" />
            </a>
            {{/ instructors }}
        </div>
        <div class="card-block">
            <h4 class="card-title my-5 ellipsis ellipsis-2" style="-webkit-box-orient: vertical;"><a href="{{ courseurl }}" class="font-weight-400 blue-grey-600 font-size-18">{{{ coursename }}}</a></h4>
            <p class="card-text m-0"><span class="text-muted ellipsis ellipsis-1" style="-webkit-box-orient: vertical;">{{{ categoryname }}}</span></p>
            <p class="card-text ellipsis ellipsis-3 m-0" style="-webkit-box-orient: vertical;">{{{ coursesummary }}}</p>
        </div>
        
        {{# mycourses}}
            {{# coursecompleted }}
                <div class="card-footer card-footer-transparent p-0 activity-btn {{listbuttons}}">
                    <a href="{{ courseurl }}" class="btn btn-success btn-block p-10 bg-green-500 border-0 rounded-0 text-white font-weight-800" href="">
                    <i class="fa fa-check" aria-hidden="true"></i>
                    {{coursecompleted}}</a>
                </div>
            {{/ coursecompleted }}

            {{# courseinprogress }}
                <div class="progress progress-xs m-0 bg-purple-200 w-p100 {{listprogress}}">
                    <div class="progress-bar bg-purple-400" style="width: {{percentage}}%;" role="progressbar">
                    </div>
                </div>
                <div class="card-footer card-footer-transparent p-0 activity-btn {{listbuttons}}">
                    <a href="{{# lastaccessactivity}} {{lastaccessactivity}} {{/ lastaccessactivity}}{{^ lastaccessactivity}} {{ courseurl }} {{/ lastaccessactivity}}" class="btn btn-default btn-block p-10 bg-purple-500 border-0 rounded-0 text-white font-weight-800" href=""><i class="fa fa-refresh" aria-hidden="true"></i>
                    {{courseinprogress}}</a>
                </div>
            {{/ courseinprogress }}

            {{# coursetostart }}
                <div class="card-footer card-footer-transparent p-0 activity-btn {{listbuttons}}">
                    <a href="{{ courseurl }}" class="btn btn-info btn-block p-10 border-0 rounded-0 text-white font-weight-800" href=""><i class="fa fa-play-circle" aria-hidden="true"></i>
                    {{coursetostart}}</a>
                </div>
            {{/ coursetostart }}
        {{/ mycourses}}


        {{^ mycourses}}
            {{# usercanmanage }}
                <div class="card-footer card-footer-transparent text-muted activity-btn {{listbuttons}}">
                    <div class="enrolmenticons d-inline-block">
                        {{{ enrollmenticons }}}
                    </div>

                    <button type="button"
                        class="btn btn-icon btn-outline btn-sm btn-primary btn-round float-right showoptions "
                        data-plugin="toolbar"
                        data-toolbar="#course-{{ id }}-options">
                        <i class="icon fa fa-cog" aria-hidden="true"></i>
                    </button>
                </div>
                <div class="toolbar-icons tool-items toolbar-primary" id="course-{{ id }}-options" hidden="">
                    <a href="{{ enrollusers }}" class="tool-item" title="{{# str }} enroluser, theme_remui {{/ str }}"><i class="icon fa fa-users" aria-hidden="true"></i></a>
                    <a href="{{ grader }}" class="tool-item" title="{{# str }} graderreport, theme_remui {{/ str }}"><i class="icon fa fa-star" aria-hidden="true"></i></a>
                    <a href="{{ activity }}" class="tool-item" title="{{# str }} activityeport, theme_remui {{/ str }}"><i class="icon fa fa-pie-chart" aria-hidden="true"></i></a>
                    <a href="{{ editcourse }}" class="tool-item" title="{{# str }} editcourse, theme_remui {{/ str }}"><i class="icon fa fa-edit" aria-hidden="true"></i></a>
                </div>
            {{/ usercanmanage }}

            {{^ usercanmanage }}
                {{#enrollmenticons}}
                <div class="card-footer card-footer-transparent text-muted">
                    <div class="enrolmenticons">
                        {{{ enrollmenticons }}}
                    </div>
                </div>
                {{/enrollmenticons}}
            {{/ usercanmanage }}
        {{/ mycourses}}
    </div>
</div>
{{/old_card}}


{{^old_card}}
<div class=" {{widthclasses}} course_card card animation-{{animation}}" data-plugin="appear" data-animate="{{animation}}" course-id="{{id}}">
    <div class="wrapper" style="background-image: url('{{ courseimage }}');background-size: cover;background-position: center; position: relative;
    {{#shadowless}}box-shadow: -1px 4px 6px -1px {{sectionproperties.shadowcolor}};{{/shadowless}}">
        {{#startdate}}
        <div class="date btn-primary">
        <span class="day">{{day}}</span>
        <span class="month">{{month}}</span>
        <span class="year">{{year}}</span>
        </div>
        {{/startdate}}
        {{# usercanmanage }}
        <div class="menu-picker-select">
            <div class="menu-picker btn-group " role="group">
              <label for="show-menu" class="menu-button"><span></span></label>
            </div>
            <div class="menu-content btn-group btn-group-vertical" aria-label="Vertical button group">
                <div class="btn-group" role="group">
                        <button type="button" class="btn btn-primary">
                            <a href="{{ enrollusers }}" title="{{# str }} enroluser, theme_remui {{/ str }}">
                                <i class="m-0 icon fa fa-users text-white" aria-hidden="true"></i>
                                <br>
                            </a>
                        </button>
                </div>
                <div class="btn-group" role="group">
                        <button type="button" class="btn btn-primary">
                            <a href="{{ grader }}" title="{{# str }} graderreport, theme_remui {{/ str }}">
                            <i class="m-0 icon fa fa-star text-white" aria-hidden="true"></i>
                            <br>
                            </a>
                        </button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-primary">
                            <a href="{{ activity }}" title="{{# str }} activityeport, theme_remui {{/ str }}">
                            <i class="m-0 icon fa fa-pie-chart text-white" aria-hidden="true"></i>
                            <br>
                            </a>
                    </button>
                </div>
                <div class="btn-group" role="group">
                        <button type="button" class="btn btn-primary">
                            <a href="{{ editcourse }}" title="{{# str }} editcourse, theme_remui {{/ str }}">
                            <i class="m-0 icon  fa fa-edit text-white" aria-hidden="true"></i>
                            <br>
                            </a>
                        </button>
                </div>
            </div>
        </div>
        {{/ usercanmanage }}
        {{# instructors }}
            <a href="{{ url }}" class="d-block instructor-img {{ imgStyle }}" data-toggle="tooltip" title="{{ name }}">
                <img src="{{ picture }}" style="border: 2px solid white; cursor: pointer;" class="h-40 w-40 rounded-circle" alt="{{ name }}" />
            </a>
        {{/ instructors }}
        <div class="data">
            {{# mycourses}}
                <div class="course-stat">
                {{# coursecompleted }}
                <div class="progress progress-xs m-0 bg-green-200 w-p100 {{listprogress}}">
                    <div class="progress-bar bg-green-400" style="width: 100%;" role="progressbar">
                    </div>
                </div>
                <div class="card-footer card-footer-transparent p-0 activity-btn {{listbuttons}}">
                    <a href="{{ courseurl }}" class="btn btn-success btn-block p-10 bg-green-500 border-0 rounded-0 text-white font-weight-800" href="">
                    <i class="fa fa-check" aria-hidden="true"></i>
                    {{coursecompleted}}</a>
                </div>
                {{/ coursecompleted }}

                {{# courseinprogress }}
                <div class="progress progress-xs m-0 bg-purple-200 w-p100 {{listprogress}}">
                    <div class="progress-bar bg-purple-400" style="width: {{percentage}}%;" role="progressbar">
                    </div>
                </div>
                <div class="card-footer card-footer-transparent p-0 activity-btn {{listbuttons}}">
                    <a href="{{# lastaccessactivity}} {{lastaccessactivity}} {{/ lastaccessactivity}}{{^ lastaccessactivity}} {{ courseurl }} {{/ lastaccessactivity}}" class="btn btn-default btn-block p-10 bg-purple-500 border-0 rounded-0 text-white font-weight-800" href=""><i class="fa fa-refresh" aria-hidden="true"></i>
                    {{courseinprogress}}</a>
                </div>
                {{/ courseinprogress }}

                {{# coursetostart }}
                <div class="card-footer card-footer-transparent p-0 activity-btn {{listbuttons}}">
                    <a href="{{ courseurl }}" class="btn btn-info btn-block p-10 border-0 rounded-0 text-white font-weight-800" href=""><i class="fa fa-play-circle" aria-hidden="true"></i>
                    {{coursetostart}}</a>
                </div>
                {{/ coursetostart }}
                </div>
            {{/ mycourses}}
            <div class="content" title="{{coursename}}">
                <span class="author">{{{categoryname}}}</span>
                <h1 class="title"><a href="{{ courseurl }}" >{{{coursename}}}</a></h1>
                <p class="text">{{{coursesummary}}}</p>
            </div>
        </div>
    </div>
</div>
{{/old_card}}
