{{!
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/>.
}}
<div class="no-ludic-event inventory-container avatar">
    <div class="avatar-preview"></div>
    <div class="inventory-content">
    {{#slotsowned}}
        <div class="slot slot-{{name}}" >
            <div class="slot-title">{{name}}</div>
            <div class="owned-items">
            {{#items}}
                <div class="slot-item {{isselected}} {{filter}}">
                    <div class="slot-item-icon">
                        {{#icon}}
                        <img src="{{src}}" alt="{{alt}}" class="{{classes}} clickable" data-sectionid="{{sectionid}}" data-itemname="{{itemid}}"
                    data-slotname="{{slot}}" data-action="avatar_toggle_item" data-controller="skin" data-callback="updateAvatar">
                        {{/icon}}
                    </div>
                </div>
            {{/items}}
            </div>
        </div>
    {{/slotsowned}}

    {{#slotsother}}
        <div class="slot slot-{{name}}" >
            <div class="slot-title">{{name}}</div>
            <div class="slot-items">
                {{#items}}
                    {{^cantbuy}}
                    <div class="slot-item">
                        <div class="slot-item-name">{{name}}</div>
                        <div class="slot-item-icon">
                            {{#icon}}
                            <img src="{{src}}" alt="{{alt}}" class="{{classes}} clickable" data-sectionid="{{sectionid}}" data-itemname="{{itemid}}"
                                data-slotname="{{slot}}" data-action="avatar_buy_item" data-controller="skin" data-callback="updateAvatar">
                            {{/icon}}
                        </div>
                        <div class="slot-item-state {{state}}">
                            <div class="slot-item-buy">
                                <div class="slot-item-price">
                                    {{cost}}
                                </div>
                            </div>
                        </div>
                    </div>
                    {{/cantbuy}}
                    {{#cantbuy}}
                    <div class="slot-item">
                        <div class="slot-item-name cant-buy">{{name}}</div>
                        <div class="slot-item-icon">
                            {{#icon}}
                            <img src="{{src}}" alt="{{alt}}" class="{{classes}} cant-buy">
                            {{/icon}}
                        </div>
                        <div class="slot-item-state {{state}}">
                            <div class="slot-item-buy">
                                <div class="slot-item-price cant-buy" data-sectionid="{{sectionid}}" data-itemname="{{itemid}}">
                                    {{cost}}
                                </div>
                                <!-- div class="slot-item-price-text cant-buy" data-sectionid="{{sectionid}}" data-itemname="{{itemid}}" data-slotname="{{slot}}">
                                    {{#str}}cs-avatar-notmoney, format_ludic{{/str}}
                                </div -->
                            </div>
                        </div>
                    </div>
                    {{/cantbuy}}
                {{/items}}
            </div>
        </div>
    {{/slotsother}}
    </div>
</div>
