{{!
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/card
TODO describe template card
Example context (json):
{
}
}}
{{#showposterimage}}
<div class="image-container position-relative {{#hasanalytics}}hasanalytics{{/hasanalytics}}">
    <div class="poster position-relative {{#posterimagesquare}}square{{/posterimagesquare}}">
        <img src="{{interactivevideo.posterimage}}" loading="lazy">
        {{#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="badge duration">{{duration}}</span>
    {{#passwordprotected}}<span class="badge password"
      title="{{#str}}passwordrequired,interactivevideo{{/str}}"><i class="fa fa-key"></i></span>{{/passwordprotected}}
    {{#cm.uservisible}}
    {{#new}}
    <span class="badge iv-badge-primary new-badge">{{#str}}new,interactivevideo{{/str}}</span>
{{/new}}
{{#hasanalytics}}
<div class="analytics iv-rounded-0 progress">
    <div class="progress-bar"
         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>
{{/showposterimage}}
<div class="description-container d-flex justify-content-between flex-column{{^showname}} mt-0{{/showname}}">
    {{#displayoptions.sectionname}}
    <div class="cursor-pointer small text-primary sectionname-tag"
         data-id="{{displayoptions.sectionid}}">#{{{displayoptions.sectionname}}}</div>
{{/displayoptions.sectionname}}
<div class="top-section small">
    <div class="w-100 d-flex align-items-start">
        {{#showname}}
        {{#cm.uservisible}}
        <a href="{{baseurl}}/mod/interactivevideo/view.php?id={{cm.id}}"
           data-id="{{cm.id}}"
           data-contextid="{{cm.context.id}}"
           data-instance="{{cm.instance}}"
           data-course="{{cm.course}}"
           data-title="{{formattedname}}"
           class="clamp-2 text-dark h5 text-decoration-none mb-1 title-link">{{{formattedname}}}</a>
        {{#hascompletion}}
        {{#overallcomplete}}<i class="bi bi-check-circle-fill text-success iv-ml-2 fs-n"></i>{{/overallcomplete}}
        {{^overallcomplete}}<i class="bi bi-circle iv-ml-2"></i>{{/overallcomplete}}
    {{/hascompletion}}
{{/cm.uservisible}}
{{^cm.uservisible}}
<a href="javascript:void()"
   class="text-dark h5 text-decoration-none mb-0">{{{formattedname}}}</a>
{{/cm.uservisible}}
{{/showname}}
{{#showdescription}}
{{#formattedintro}}
{{^usecustomdesc}}<i class="fa fa-chevron-right description-show iv-ml-auto iv-mr-1 mb-0 cursor-pointer"></i>{{/usecustomdesc}}{{/formattedintro}}
{{/showdescription}}
</div>
{{#showdescription}}
{{#formattedintro}}
<div class="description {{^showname}}mt-0{{/showname}} {{#showname}}mt-2{{/showname}}" {{^usecustomdesc}}style="display:none"{{/usecustomdesc}}>
    {{{formattedintro}}}
</div>
{{/formattedintro}}
{{/showdescription}}
</div>
{{#cm.uservisible}}
<div class="bottom-section">
{{#showprogressbar}}
{{^noitems}}
<div class="tasks progress mt-3 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="d-flex justify-content-between">
    <small title="{{#str}}taskscompleted,interactivevideo{{/str}}"><i class="fa fa-bullseye iv-mr-1"></i><span class="percentage">{{usercompletion.completionpercentage}}</span>% <span class="items">({{completeditems}}/{{totalitems}})</span></small>
    {{^noxp}}
    <small 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}}
{{/showprogressbar}}
{{#completion}}
<div class="small mt-2 {{^showcompletion}}d-none{{/showcompletion}}">{{{completion}}}</div>
{{/completion}}
</div>
{{/cm.uservisible}}
</div>
