{{!
    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 mod_interactivevideo/cardonly

    TODO describe template cardonly

    Example context (json):
    {
    }
}}

{{#cardonly}}
<div class="image-container card-only {{#hasanalytics}}hasanalytics{{/hasanalytics}}">
    <div class="poster position-relative {{#posterimagesquare}}square{{/posterimagesquare}}">
        <img src="{{interactivevideo.posterimage}}" loading="lazy">
        {{#new}}
        <span class="badge iv-badge-primary new-badge">{{#str}}new,interactivevideo{{/str}}</span>
    {{/new}}
    {{#cm.uservisible}}
    <a href="{{#launchinpopup}}javascript:void(){{/launchinpopup}}{{^launchinpopup}}{{baseurl}}/mod/interactivevideo/view.php?id={{cm.id}}{{/launchinpopup}}" class="{{#launchinpopup}}launch-interactivevideo{{/launchinpopup}} overlay" {{#launchinpopup}} data-id="{{cm.id}}" data-contextid="{{cm.context.id}}" data-instance="{{cm.instance}}" data-course="{{cm.course}}" data-title="{{formattedname}}"{{/launchinpopup}}><i class="fa fa-play"></i></a>
{{/cm.uservisible}}
<span class="position-absolute badge duration">{{duration}}</span>
{{#passwordprotected}}<span class="badge password" title="{{#str}}passwordrequired,interactivevideo{{/str}}"><i class="fa fa-key"></i></span>{{/passwordprotected}}
{{#cm.uservisible}}
{{^noitems}}
<span class="position-absolute badge percentage-badge d-flex">
    <i class="fa fa-bullseye iv-mr-1"></i>
    <span class="percentage">{{usercompletion.completionpercentage}}</span>%
</span>
{{/noitems}}
{{#hasanalytics}}
<div class="analytics iv-rounded-0 progress">
    <div class="progress-bar bg-danger"
         role="progressbar"
         style="width: {{analytics}}%"
         aria-valuenow="{{analytics}}"
         aria-valuemin="0"
         aria-valuemax="100"
         data-current="{{analytics}}"
         data-expected="{{analyticsexpected}}"></div>
</div>
{{/hasanalytics}}
{{/cm.uservisible}}
</div>
<div class="info p-2 w-100 position-absolute small">
    <a href="{{baseurl}}/mod/interactivevideo/view.php?id={{cm.id}}"
       class="title iv-font-weight-bold nolink no-pointer text-decoration-none text-white">{{{formattedname}}}</a>
    {{#hasanalytics}}
        <div class="analytics progress position-relative mt-2">
            <div class="progress-bar bg-danger"
                role="progressbar"
                style="width: {{analytics}}%"
                aria-valuenow="{{analytics}}"
                aria-valuemin="0"
                aria-valuemax="100"
                data-current="{{analytics}}"
                data-expected="{{analyticsexpected}}"></div>
        </div>
        <small class="d-flex align-items-center"
            title="{{#str}}watched,interactivevideo{{/str}}"><i class="fa fa-stopwatch iv-mr-auto"></i><span class="analytics-percentage">{{analytics}}</span>%</small>
    {{/hasanalytics}}
{{^noitems}}
<div class="tasks progress mt-2 bg-primary-alt">
    <div class="progress-bar {{#completed}}bg-success{{/completed}}{{^completed}}bg-primary{{/completed}}"
         role="progressbar"
         style="width: {{usercompletion.completionpercentage}}%"
         aria-valuenow="{{usercompletion.completionpercentage}}"
         aria-valuemin="0"
         aria-valuemax="100"></div>
</div>
<div class="task-percentage d-flex justify-content-between mt-1">
    <small class="d-flex align-items-center"
           title="{{#str}}taskscompleted,interactivevideo{{/str}}"><i class="fa fa-bullseye iv-mr-1"></i><span class="percentage">{{usercompletion.completionpercentage}}</span>%<span class="items iv-ml-1">({{completeditems}}/{{totalitems}})</span></small>
    {{^noxp}}
    <small class="d-flex align-items-center"
           title="{{#str}}xpcompleted,interactivevideo{{/str}}"><i class="fa fa-star iv-mr-1"></i><span class="xp">{{usercompletion.xp}}</span>/{{totalxp}}</small>
    {{/noxp}}
</div>
{{/noitems}}
{{#completion}}
<div class="small mt-3 {{^showcompletion}}d-none{{/showcompletion}}">{{{completion}}}</div>
{{/completion}}
</div>
</div>
{{#showname}}
<div class="description-container w-auto mt-0">
    {{#cm.uservisible}}
        <a href="{{baseurl}}/mod/interactivevideo/view.php?id={{cm.id}}"
        class="clamp-2 text-dark h5 text-decoration-none mb-1">{{{formattedname}}}</a>
    {{/cm.uservisible}}
    {{^cm.uservisible}}
        <a href="javascript:void()"
        class="clamp-2 text-dark h5 text-decoration-none mb-1">{{{formattedname}}}</a>
    {{/cm.uservisible}}
</div>
{{/showname}}
{{/cardonly}}