{{!
    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" alt="{{{formattedname}}}">
        {{#new}}
        <span class="badge iv-badge-primary new-badge" aria-label="{{#str}}new,interactivevideo{{/str}}">
            {{#str}}new,interactivevideo{{/str}}
        </span>
        {{/new}}

        {{#cm.uservisible}}
        <a href="{{^launchinpopup}}{{baseurl}}/mod/interactivevideo/view.php?id={{cm.id}}{{/launchinpopup}}{{#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="position-absolute badge duration" aria-label="Duration: {{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}}
        {{^noitems}}
        <span class="position-absolute badge percentage-badge d-flex" aria-label="Task completion: {{usercompletion.completionpercentage}}%">
            <i class="fa fa-bullseye iv-mr-1" aria-hidden="true"></i>
            <span class="percentage">{{usercompletion.completionpercentage}}</span>%
        </span>
        {{/noitems}}

        {{#hasanalytics}}
        <div class="analytics iv-rounded-0 progress" aria-label="Video analytics progress">
            <div class="progress-bar bg-danger"
                 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 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"
           aria-label="Open video: {{{formattedname}}}">
           {{{formattedname}}}
        </a>

        {{#hasanalytics}}
        <div class="analytics progress position-relative mt-2" aria-label="Video analytics progress">
            <div class="progress-bar bg-danger"
                 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>
        <small class="d-flex align-items-center" title="{{#str}}watched,interactivevideo{{/str}}">
            <i class="fa fa-stopwatch iv-mr-auto" aria-hidden="true"></i>
            <span class="analytics-percentage">{{analytics}}</span>%
        </small>
        {{/hasanalytics}}

        {{^noitems}}
        <div class="tasks progress mt-2 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="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" aria-hidden="true"></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" aria-hidden="true"></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"
       aria-label="Open video: {{{formattedname}}}">{{{formattedname}}}</a>
    {{/cm.uservisible}}

    {{^cm.uservisible}}
    <span class="clamp-2 text-dark h5 mb-1" aria-label="{{{formattedname}}}">{{{formattedname}}}</span>
    {{/cm.uservisible}}
</div>
{{/showname}}
{{/cardonly}}
