{% extends "views/list.htm" %}
{% load staticfiles %}
{% load i18n %}

{% block title %}{% trans "Cards" %}{% endblock %}

{% block search_placeholder %}{% trans "Find cards or card containers" %}{% endblock %}


{% block list_wrapper %}
<span class="display-nodes-toggle">
    <button class="btn btn-shim btn-primary btn-labeled btn-lg" style="width: 100%; height: 22px; margin-bottom: 10px; font-size: 11px; padding-bottom: 3px;" data-bind="click: function(){showNodes(!showNodes());}, text: showNodes() ? '{% trans "Hide Nodes" %}' : '{% trans "Show Nodes" %}'">{% trans "Show Nodes" %}</button>
</span>

<!-- ko foreach: { data: [$data], as: 'self' } -->
<div class="perm-nodes-list" style="display: none;" data-bind="visible: self">

    <!-- TOC Cards/Widgets -->
    <div class="card-tree-container">
        <div data-bind="foreach: { data: $data.outerCards, as: 'card' }">
            <li class="card-tree-list">
                <a href="#" class="cc-link" aria-expanded="true" style="position: relative;" data-bind="css: {'active': card.selected || card.active}, visible: card.filtered() == false, click: self.selectItem.bind(self)">
                    <span class="icon-wrap icon-wrap-sm icon-circle bg-card">
                        <i class="card-tree-list-icon" data-bind="css: card.type === 'card_container' ? 'ion-ios-briefcase-outline' : 'ion-ios-folder'"></i>
                    </span>

                    <span class="node-name" data-bind="text: card.name"></span>
                    <span class="node-subname" data-bind="text: card.type_label"></span>

                    <span class="node-permissions">
                        <!-- ko foreach: card.perms -->
                        <i class="node-permission-icon" data-bind="css: $data.icon"></i>
                        <!-- /ko -->
                    </span>

                    <!-- ko if: card.type === 'card' -->
                    <span class="expando">
                        <i id="cc-expand-1" class="expand-cc-child-nodes" data-bind="click: self.toggleNodes, css: {'ion-arrow-down-b': card.visible(), 'ion-arrow-left-b': !card.visible()}"></i>
                    </span>
                    <!-- /ko -->
                </a>

                <ul class="card-tree-list-item report-tree-list" aria-expanded="true" data-bind="visible: card.visible">
                    <div data-bind="template: {
                        name: 'card-tree',
                        foreach: card.children,
                        as: 'card'
                      }">
                    </div>
                </ul>
            </li>
        </div>
    </div>
</div>
<!-- /ko -->

<template id="card-tree">
    <li class="card-tree-list">
        <a href="#" class="cc-link" aria-expanded="true" style="position: relative;" data-bind="css: {'active': card.selected || card.active}, visible: card.filtered() == false, click: self.selectItem.bind(self)">
            <span class="icon-wrap icon-wrap-sm branch-icon icon-circle bg-report-card">
                <i class="card-tree-list-icon" data-bind="css: card.type === 'card' ? 'ion-ios-folder' : self.datatypes[card.datatype]"></i>
            </span>

            <span class="node-name" data-bind="text: card.name"></span>
            <span class="node-subname" data-bind="text: card.type_label"></span>

            <span class="node-permissions">
                <!-- ko foreach: $data.perms -->
                <i class="node-permission-icon" data-bind="css: $data.icon"></i>
                <!-- /ko -->
            </span>
            
            <!-- ko if: card.type === 'card' -->
            <span class="expando">
                <i class="expand-icon" id="cc-expand-1" class="expand-cc-child-nodes" data-bind="click: self.toggleNodes, css: {'ion-arrow-down-b': card.visible(), 'ion-arrow-left-b': !card.visible()}"></i>
            </span>
            <!-- /ko -->
        </a>

        <ul class="card-tree-list-item node-indent" aria-expanded="true" data-bind="visible: card.visible">
            <div data-bind="template: {
                name: 'card-tree',
                foreach: card.children,
                as: 'card'
            }"></div>
        </ul>
    </li>
</template>



{% endblock %}