{{!
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" alt="{{{formattedname}}}">
        {{#cm.uservisible}}
        <a href="{{#cm.visible}}{{^launchinpopup}}{{baseurl}}/mod/interactivevideo/view.php?id={{cm.id}}{{/launchinpopup}}{{/cm.visible}}{{#launchinpopup}}javascript:void(0){{/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}}
           role="button"
           aria-label="{{#str}}launchvideo,mod_interactivevideo{{/str}}">
            <i class="fa fa-play" aria-hidden="true"></i>
            <span class="visually-hidden sr-only">{{#str}}launchvideo,mod_interactivevideo{{/str}}</span>
        </a>
    {{/cm.uservisible}}
    <span class="badge duration" aria-label="{{duration}} minutes">{{duration}}</span>
    {{#passwordprotected}}
    <span class="badge password"
          title="{{#str}}passwordrequired,interactivevideo{{/str}}"
          aria-label="{{#str}}passwordrequired,interactivevideo{{/str}}">
        <i class="fa fa-key" aria-hidden="true"></i>
    </span>
{{/passwordprotected}}
{{#cm.uservisible}}
{{#new}}
<span class="badge iv-badge-primary new-badge"
      aria-label="{{#str}}new,interactivevideo{{/str}}">{{#str}}new,interactivevideo{{/str}}</span>
{{/new}}
{{#hasanalytics}}
<div class="analytics iv-rounded-0 progress"
     aria-label="{{#str}}progress,interactivevideo{{/str}}">
    <div class="progress-bar"
         role="progressbar"
         aria-label="Video analytics progress"
         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}}"
         role="link"
         tabindex="0"
         aria-label="Section: {{{displayoptions.sectionname}}}">#{{{displayoptions.sectionname}}}</div>
{{/displayoptions.sectionname}}
{{#displayoptions.subsection}}
<div class="cursor-pointer small text-primary subsection-tag">{{{displayoptions.subsection}}}</div>
{{/displayoptions.subsection}}
<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}}"
           class="clamp-2 text-dark h5 text-decoration-none mb-1 title-link flex-grow-1"
           data-id="{{cm.id}}"
           data-contextid="{{cm.context.id}}"
           data-instance="{{cm.instance}}"
           data-course="{{cm.course}}"
           data-title="{{formattedname}}"
           aria-label="Open video: {{{formattedname}}}">{{{formattedname}}}</a>
        {{#hascompletion}}
        {{#overallcomplete}}
        <i class="bi bi-check-circle-fill text-success iv-ml-2 fs-n"
           aria-label="Completed"></i>
    {{/overallcomplete}}
    {{^overallcomplete}}
    <i class="bi bi-circle iv-ml-2" aria-label="Incomplete"></i>
{{/overallcomplete}}
{{/hascompletion}}
{{/cm.uservisible}}
{{^cm.uservisible}}
<span class="text-dark h5 mb-0">{{{formattedname}}}</span>
{{/cm.uservisible}}
{{/showname}}
{{#showdescription}}
{{#formattedintro}}
{{^usecustomdesc}}
<div>
    <button class="description-toggle btn btn-link m-0"
            aria-expanded="false"
            aria-controls="description-{{cm.id}}">
        <i class="dir-rtl-hide fa fa-chevron-right description-show mb-0"></i>
        <i class="dir-ltr-hide fa fa-chevron-left description-show mb-0"></i>
        <span class="visually-hidden sr-only">Show description</span>
    </button>
</div>
{{/usecustomdesc}}
{{/formattedintro}}
{{/showdescription}}
</div>
{{#showdescription}}
{{#formattedintro}}
<div id="description-{{cm.id}}"
     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"
         role="progressbar"
         aria-valuemin="0"
         aria-valuemax="100"
         aria-valuenow="{{usercompletion.completionpercentage}}"
         aria-label="Task completion: {{usercompletion.completionpercentage}}%">
        <div class="progress-bar {{#completed}}bg-success{{/completed}}{{^completed}}bg-primary{{/completed}}"
             style="width: {{usercompletion.completionpercentage}}%"></div>
    </div>
    <div class="d-flex justify-content-between">
        <small title="{{#str}}taskscompleted,interactivevideo{{/str}}">
            <i class="fa fa-bullseye iv-mr-1" aria-hidden="true"></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" aria-hidden="true"></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>
