{% load i18n %}
{% load static %}
{% load webpack_static from webpack_loader %}

<!--ko let: { self: $data }-->
<div class="flex advanced-search-container">

    <div class="facets-search-container">

        <div data-bind="visible: filter.facets().length === 0">
            <div id="rr-splash" class="rr-splash">
                <!-- Image -->
                <div class="img-lg img-circle rr-splash-img-container">
                    <img class="rr-splash-img" src="{% webpack_static 'img/inspection.png' %}" alt="Advanced Search">
                </div>

                <!-- Splash Title -->
                <div class="rr-splash-title">
                    <span data-bind="text: $root.translations.advancedSearch"></span>
                </div>

                <!-- Splash Instructions -->
                <div class="rr-splash-description">
                    <span data-bind="text: $root.translations.advancedSearchDescription"></span>
                </div>
            </div>
        </div>

        <!-- ko foreach: filter.facets -->

        <!-- ko if: $index  -->
        <div class="btn-group btn-group-sm facet-btn-group" data-bind="let: {previousCardName: $parent.filter.facets()[$index()-1].card.name}">
            <button class="btn btn-warning btn-active-dark facet-btn" data-bind="onEnterkeyClick, onSpaceClick, click: function () { value.op('and'); }, 
                css: {'selected': value.op() === 'and'},
                attr: {
                    'aria-label': $root.translations.currentAndPrevious(card.name, previousCardName),
                    'aria-pressed': (value.op() === 'and').toString()
                }
            ">
                <span data-bind="text: $root.translations.and"></span>
            </button>
            <button class="btn btn-warning btn-active-dark facet-btn" data-bind="onEnterkeyClick, onSpaceClick, click: function () { value.op('or'); }, 
                css: {'selected': value.op() === 'or'},
                attr: {
                    'aria-label': $root.translations.currentOrPrevious(card.name, previousCardName),
                    'aria-pressed': (value.op() === 'or').toString()
                }
            ">
                <span data-bind="text: $root.translations.or"></span>
            </button>
        </div>
        <!-- /ko -->

        <div class="faceted-search-card-container" tabindex="-1" data-bind="attr:{'id': 'facet-filter-' + $index()}">
            <div class="facet-name" data-bind="text: ko.unwrap(card.getGraph().name) + ' - ' + card.name"></div>
            <div class="row facet-search-criteria">
                <!-- ko foreach: card.nodes -->
                <div class="facet-body">

                    <div class="facet-label" data-bind="text: $data.label"></div>
                    <div data-bind="component: {
                        name: self.datatypelookup[datatype].configname,
                        params: {
                            search: true,
                            filterValue: $parent.value[nodeid],
                            node: $data,
                            datatype: self.datatypelookup[datatype]
                        }
                    }">
                    </div>

                </div>
                <!-- /ko -->

                <div class="facet-search-button">
                    <button class="btn btn-sm btn-primary" data-bind="onEnterkeyClick, onSpaceClick, click: self.removeFacet,
                        attr: {'aria-label': $root.translations.removeFacet(card.name) }
                    ">
                        <span data-bind="text: $root.translations.remove"></span>
                    </button>
                </div>
            </div>
        </div>
        <!-- /ko -->
    </div>

    <!-- Advanced Search Panel -->
    <div class="facets-container">
        <div class="list-group search-facets">
            <div class="search-facet-item header">
                <div class="search-facet-item-heading">
                    <span data-bind="text: $root.translations.searchFacets"></span>
                </div>
                <div class="list-filter">
                    <input 
                        type="text" 
                        class="form-control"
                        data-bind="
                            attr:{
                                placeholder: $root.translations.find + '...',
                                'aria-label': $root.translations.filterSearchFacets,
                            },
                            value: facetFilterText, 
                            valueUpdate: 'keyup'
                        "
                    >
                    <!-- Clear Filter -->
                    <span tabindex="0" role="button" class="clear-node-search" data-bind="onEnterkeyClick, onSpaceClick, 
                            click: function () { facetFilterText(''); },
                            attr:{'aria-label': $root.translations.clearFacetFilter},
                        "
                    ><i class="fa fa-times-circle"></i></span>
                </div>
            </div>
            <!-- ko foreach: searchableGraphs -->
                <!-- ko if: cards().length > 0  -->
                <!-- ko let: {uid: Math.random().toString()} -->
                <div tabindex="0" role="button" class="search-facet-item disabled" data-bind="onEnterkeyClick, onSpaceClick, 
                    click: function () { collapsed(!collapsed()) },
                    attr: {
                        'aria-expanded': (!collapsed()).toString(),
                        'aria-controls': uid,
                        'aria-label': $root.translations.resourceTypeSearchFacets(name),
                    }
                    ">
                    <div class="search-facet-item-heading">
                        <strong data-bind="text: name"></strong>
                        <span><i class="fa report-expander print-hide" data-bind="css: {'fa-angle-down': !collapsed(), 'fa-angle-right': collapsed()}"></i></span>
                    </div>
                </div>
                <div data-bind="visible: !collapsed()" role="list">
                    <!-- ko foreach: cards -->
                    <div role="listitem" style="display: flex; align-items:center;">
                        <div class="search-facet-item" style="display: flex;">
                            <div>
                                <div style="margin-right:5px;" role="button" data-bind="onEnterkeyClick, onSpaceClick, click: self.getNodegroupPath, 
                                class: $data.nodegroup_id === self.selectedNodegroupId() && self.expandPath() ? 'fa fa-times-circle' : 'fa fa-info-circle',
                                attr: {
                                    'aria-label': $data.nodegroup_id === self.selectedNodegroupId() && self.expandPath() ? $root.translations.hideFacetPath : $root.translations.showFacetPath
                                }"></div>
                            </div>
                            <div>
                                <!-- ko if: $data.nodegroup_id == self.selectedNodegroupId() && self.expandPath() -->
                                    <div>
                                    <!-- ko if: self.cardPath().length > 0 -->
                                        <!-- ko foreach: { data: self.cardPath(), as: 'val' } -->
                                        <div style="display:flex;">
                                            <div data-bind="style: { 'border-bottom': '10px', 'width': function() { return ($index() * 12) + 'px'}}"></div>
                                            <div style="width: max-content;color: #777; font-size: 1.3rem;" data-bind="text: val"></div>
                                        </div>
                                        <!-- /ko -->
                                    <!-- /ko -->
                                    </div>
                                <!-- /ko -->
                                <a href="#" role="button" data-bind="onEnterkeyClick, onSpaceClick, 
                                    click: addFacet, 
                                    attr: {
                                        id: uid,
                                        'aria-label': $root.translations.addCardToSearchQuery(name, $parent.name)
                                    }">
                                    <p class="search-facet-item-heading" data-bind="text: name"></p>
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- /ko -->
                </div>
                <!-- /ko -->
                <!-- /ko -->
            <!-- /ko -->
        </div>
    </div>
</div>
<!-- /ko -->
