{{!
    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 format_tiles/course_module

    Tiles course module template.

    The purpose of this template is to render a li activity element
    representing a single course module.

    Classes required for JS:
    * none

    Data attributes required for JS:
    * none

    Context variables required for this template:
        * cmid - course module id
        * modname - course module name (type)
        * modnameDisplay - module name to display to user on sub tile or course mod
        * activityname - title to display on this sub tile or course mod
        * modtitle_inplaceeditable - in place editable version of the title
        * modresourceicon - resource icon e.g. pdf,
        * is_label - is this a label
        * hasSpacersBefore - does this sub tile need spacer sub tiles before it?
        * previouswaslabel - was the previous sub tile a label?
        * useSubtiles - are we usign sub tiles here (or standard list form)?
        * modalType - if this a cm which launces a modal when clicked, what type e.g. pdf?
        * clickable - is this item clickable by user (or click disabled?)
        * extraclasses - any extra classes
        * content - some activities have content e.g. labels and pages, to be displayed in modal
        * modinstance - ID from the module table
        * url - URL for the link to launch the module,
        * description - Description entered on the course module edit page
        * cmeditmenu - HTML for course module edit menu
        * cmmove - move icon
        * availabilityinfo - availability information to display to user about this cm
        * hascompletion - are we using completion for this cm?
        * completionIsManual - is completion manual?
        * completionstring - what to display when hover over the completion icon
        * completionstate - is the item marked as complete
        * completionstateInverse - invers of completionstate

    Example context (json):
    {
        "cmid": 123456,
        "modname": "label",
        "modnameDisplay": "",
        "activityname": "",
        "modtitle_inplaceeditable": "",
        "modresourceicon": "",
        "is_label": 1,
        "hasSpacersBefore": 0,
        "previouswaslabel": 0,
        "useSubtiles": 1,
        "modalType": "pdf",
        "clickable": 1,
        "extraclasses": "",
        "content": "This is a label",
        "modinstance": "",
        "url": "",
        "description": "",
        "cmeditmenu": "",
        "cmmove": "",
        "availabilityinfo": "",
        "hascompletion": 1,
        "completionIsManual": 1,
        "completionstring": "Click to toggle completion status",
        "completionstate": 1,
        "completionstateInverse": "0"
    }
}}

{{! if this is a label (except first one in section) we need spacer activities before it so that the previous row of subtiles has correct flexbox width }}

{{^useSubtiles}}
    {{>format_tiles/local/content/section/cmitem}}
{{/useSubtiles}}
{{#useSubtiles}}
    {{#hasSpacersBefore}}
        {{! A label will have spacers before it to left align the items on the previous row }}
        <li class="activity subtile spacer" aria-hidden="true"></li>
        <li class="activity subtile spacer" aria-hidden="true"></li>
        <li class="activity subtile spacer" aria-hidden="true"></li>
        <li class="activity subtile spacer" aria-hidden="true"></li>
        <li class="activity subtile spacer" aria-hidden="true"></li>
        <li class="activity subtile spacer" aria-hidden="true"></li>
        <li class="activity subtile spacer" aria-hidden="true"></li>
    {{/hasSpacersBefore}}
    <li class="activity{{^is_label}} subtile{{/is_label}} {{#is_label}}fullwidth{{/is_label}} {{modname}} modtype_{{modname}} {{#modresourceicon}} resourcetype_{{modresourceicon}}{{/modresourceicon}}{{^clickable}} unclickable {{/clickable}}{{#clickable}} cursorpointer{{/clickable}} {{#photourl}} hasphoto{{/photourl}} purpose_{{purpose}} {{extraclasses}}"
        id="module-{{cmid}}" data-modtype="{{modname}}{{#modresourceicon}}_{{{modresourceicon}}}{{/modresourceicon}}"
        data-cmid="{{cmid}}" data-completion="{{completion}}"
        data-modinstance="{{modinstance}}" data-contextid="{{modcontextid}}"
        data-title="{{{activityname}}}"
        {{#modalType}}data-modal="{{modalType}}" {{/modalType}}
        {{#hascompletion}}data-completion-state="{{completionstate}}"{{/hascompletion}}
    >
        {{^is_label}}
            {{#clickable}}
                <a href="{{url}}" {{#modalType}} data-action="launch-tiles-cm-modal"{{/modalType}}
                    {{#onclick}} onclick="{{{onclick}}}"{{/onclick}}
                   data-title="{{{activityname}}}" class="cm-link {{{extraclasses}}}">
                    {{> format_tiles/course_module_subtile_inner}}
                </a>
                {{#modalDescriptionHTML}}
                    {{! If this is a modal capable course module, we may include the description HTML here, hidden }}
                    {{! This enables JS to grab it and add it to the modal }}
                    <div class="modal-description" style="display: none;">{{{modalDescriptionHTML}}}</div>
                {{/modalDescriptionHTML}}
            {{/clickable}}
            {{^clickable}}
                <div class="cm-inner">
                    {{> format_tiles/course_module_subtile_inner}}
                </div>
            {{/clickable}}
            {{#hascompletion}}
                {{#completionenabled}}
                    {{>format_tiles/completion_button_subtile}}
                {{/completionenabled}}
            {{/hascompletion}}
        {{/is_label}}

        {{#is_label}}
            <div class="cm-inner">
                {{#hascompletion}}
                    {{#completionenabled}}
                        {{>format_tiles/completion_button_subtile}}
                    {{/completionenabled}}
                {{/hascompletion}}
                {{> format_tiles/course_module_subtile_inner}}
            </div>
        {{/is_label}}

        {{#dimmed}}
            {{#clickable}}
                <a href="{{url}}" class="dim-overlay cm-link"{{#modalType}} data-action="launch-tiles-cm-modal"{{/modalType}}
                    {{#onclick}} onclick="{{{onclick}}}"{{/onclick}}>
                </a>
            {{/clickable}}
            {{^clickable}}
                <div href="{{url}}" class="dim-overlay"></div>
            {{/clickable}}
        {{/dimmed}}

        {{^is_label}}
            <div class="contentafterlink">
                {{#visible}}
                    {{#availabilitymessage}}
                        {{#stealth}}{{{availabilitymessage}}}{{/stealth}}
                        {{^stealth}}{{>format_tiles/availability_info}}{{/stealth}}
                    {{/availabilitymessage}}
                {{/visible}}
                {{^visible}}
                    {{>format_tiles/availability_info}}
                {{/visible}}
            </div>
        {{/is_label}}
    </li>
{{/useSubtiles}}