<div class="layer-manager-header">
    <div class="title">
        {{trans.title}}
    </div>
    <i class="fa fa-close close-layer-manager"></i>
</div>

<div class="layer-manager-body">
    {{#each layerStructure as |layer layerIdx|}}
        {{#each this}}
            {{#eq type 'canvas'}}
                <div class="layer-manager-canvas-layers sortable-main" data-layer="{{layerIdx}}" data-type="canvas">
                    <div class="layer-manager-layer-canvas" title="{{../trans.layer}}">
                        <div class="layer">{{layerIdx}}</div>
                        <span class="name" title="{{../../trans.canvas}}">{{../../trans.canvas}}</span>
                        {{#if duration}}
                            <span class="duration" title="{{../../trans.duration}}">{{duration}}</span>
                        {{/if}}
                    </div>
                    {{#each layers as |canvasLayer canvasLayerIdx|}}
                        {{#each this}}
                            {{#eq type 'elementGroup'}}
                                <div class="element-group-wrapper sortable-canvas" data-item-id="{{id}}" data-type="{{type}}" data-widget-id="{{widgetId}}" data-region-id="{{regionId}}">
                                    <div class="layer-manager-layer-item selectable element-group {{#if selected}}selected{{/if}} {{#if expanded}}expanded{{/if}}" data-item-id="{{id}}" data-widget-id="{{widgetId}}">
                                        <div class="layer">{{canvasLayerIdx}}</div>
                                        {{#if moduleIcon}}
                                            <i title="{{templateName}}" class="module-icon {{#if moduleIcon}}{{moduleIcon}}{{else}}fas fa-object-group{{/if}}"></i>
                                        {{/if}}
                                        {{#if name}}<span class="name" title="{{../../../../trans.group}}">"{{name}}"</span>{{else}}<span class="label">{{../../../../trans.group}}</span>{{/if}}
                                        {{#if outsideView}}
                                            <i title="{{../../../../trans.outsideViewArea}}" class="fa fa-warning"></i>
                                        {{/if}}
                                        <button class="btn btn-sm expand-group-button">
                                            <i class="fa fa-chevron-down hide-expanded" title="{{../../../../trans.expand}}"></i>
                                            <i class="fa fa-chevron-up show-expanded" title="{{../../../../trans.shrink}}"></i>
                                        </button>
                                    </div>
                                    {{#each layers as |groupLayer groupLayerIdx|}}
                                        {{#each this}}
                                            <div class="layer-manager-layer-item sortable-element-group selectable has-group {{#if selected}}selected{{/if}} {{#unless ../../expanded}}hidden{{/unless}}" data-group-id="{{../../id}}" data-item-id="{{id}}">
                                                <div class="layer-item-in-group">
                                                    <div class="layer-item-in-group-helper"></div>
                                                </div>
                                                <div class="layer">{{groupLayerIdx}}</div>
                                                {{#eq type 'element'}}
                                                    <i title="{{templateName}}" class="element-icon {{#if icon}}{{icon}}{{else}}fas fa-atom{{/if}}"></i>
                                                {{/eq}}
                                                {{#if name}}
                                                    <span class="name" title="{{../../../../../../trans.name}}">"{{name}}"</span>
                                                {{else}}
                                                    <span class="name" title="{{../../../../../../trans.template}}">{{templateName}}</span>
                                                {{/if}}
                                                {{#if duration}}
                                                    <span class="duration" title="{{../../../../../../trans.duration}}">{{duration}}</span>
                                                {{/if}}
                                            </div>
                                        {{/each}}
                                    {{/each}}
                                </div>
                            {{else}}
                                <div class="layer-manager-layer-item selectable sortable-canvas {{#if selected}}selected{{/if}}" data-item-id="{{id}}" data-type="{{type}}" data-widget-id="{{widgetId}}"  data-region-id="{{regionId}}">
                                    <div class="layer">{{canvasLayerIdx}}</div>
                                    {{#eq type 'element'}}
                                        {{#if moduleIcon}}
                                            <i class="module-icon {{#if moduleIcon}}{{moduleIcon}}{{else}}fas fa-object-group{{/if}}" {{#if hasGroup}}title="{{groupId}}"{{/if}}></i>
                                        {{/if}}
                                        <i title="{{templateName}}" class="element-icon {{#if icon}}{{icon}}{{else}}fas fa-atom{{/if}}"></i>
                                    {{/eq}}
                                    {{#if name}}
                                        <span class="name" title="{{../../../../../../trans.name}}">"{{name}}"</span>
                                    {{else}}
                                        <span class="name" title="{{../../../../../../trans.template}}">{{templateName}}</span>
                                    {{/if}}
                                    {{#if outsideView}}
                                        <i title="{{../../../../trans.outsideViewArea}}" class="fa fa-warning"></i>
                                    {{/if}}
                                    {{#if duration}}
                                        <span class="duration" title="{{../../../../trans.duration}}">{{duration}}</span>
                                    {{/if}}
                                </div>
                            {{/eq}}
                        {{/each}}
                    {{/each}}
                </div>
            {{else}}
                <div class="layer-manager-layer-item sortable-main {{#if selected}}selected{{/if}} selectable" data-item-id="{{id}}" data-item-aux-id="{{auxId}}" data-type="{{type}}" data-layer="{{layerIdx}}">
                    <div class="layer">{{layerIdx}}</div>

                    {{#eq type 'playlist'}}
                        <i class="fas fa-list" title="{{../../trans.playlist}}"></i>
                    {{/eq}}
                    {{#eq type 'zone'}}
                        <i class="far fa-square" title="{{../../trans.zone}}"></i>
                    {{/eq}}
                    {{#eq type 'frame'}}
                        <i class="fa fa-window-close" title="{{../../trans.invalidRegionHelp}}"></i>
                    {{/eq}}
                    {{#eq type 'staticWidget'}}
                        <i title="{{moduleName}}" class="{{icon}}"></i>
                    {{/eq}}
                    {{#eq type 'layoutBackground'}}
                        <i class="fa fa-image" title="{{../../trans.layoutBackground}}"></i>
                    {{/eq}}

                    <span class="name" title="{{../../trans.name}}">
                        {{name}}
                        {{#eq type 'frame'}}
                            {{../../trans.invalidRegion}}
                        {{/eq}}
                    </span>

                    {{#if outsideView}}
                        <i title="{{../../trans.outsideViewArea}}" class="fa fa-warning"></i>
                    {{/if}}

                    {{#if duration}}
                        <span class="duration" title="{{../../trans.duration}}">{{duration}}</span>
                    {{/if}}
                </div>
            {{/eq}}
        {{/each}}
    {{else}}
        <div class="empty-layout-message">
            {{trans.emptyLayout}}
        </div>
    {{/each}}
</div>