{% extends "views/components/workbench.htm" %}
{% load static %}
{% load i18n %}

{% block workbench_wrapper_classes %}related-resources-graph-workbench{% endblock workbench_wrapper_classes %}

{% block tabs %}
<div role="tablist">
    <div id="infoTabButton" class="workbench-card-sidebar-tab" tabindex="0" role="tab" 
        data-bind="onEnterkeyClick, onSpaceClick, click: function(data, event) {
            toggleTab('information');
            $root.handleEscKey(event.currentTarget, '#infoTabId'); 
        }, css: {
            'active': activeTab() === 'information'
        }, attr: {
            'aria-label': $root.translations.info,
            'aria-expanded': (activeTab() === 'information').toString(),
            'aria-controls': 'infoTabId',
        }"
    >
        <i class="fa fa-info"></i>
        <span 
            class="map-sidebar-text"
            data-bind="text: $root.translations.info"
        ></span>
    </div>
    <div id="searchTabButton" class="workbench-card-sidebar-tab" tabindex="0" role="tab" 
        data-bind="onEnterkeyClick, onSpaceClick, click: function() {
            toggleTab('search');
            $root.handleEscKey(event.currentTarget, '#searchTabId'); 
        }, css: {
            'active': activeTab() === 'search'
        }, attr: {
            'aria-label': $root.translations.search,
            'aria-expanded': (activeTab() === 'search').toString(),
            'aria-controls': 'searchTabId',
        }"
    >
        <i class="fa fa-search"></i>
        <span 
            class="map-sidebar-text"
            data-bind="text: $root.translations.search"
        ></span>
    </div>
    {% comment %} Uncomment this section to show additional tabs...
    <div id="analyzeTabButton" class="workbench-card-sidebar-tab" tabindex="0" role="tab" 
        data-bind="onEnterkeyClick, onSpaceClick, click: function() {
            toggleTab('analyze');
            $root.handleEscKey(event.currentTarget, '#analyzeTabId');
        }, css: {
            'active': activeTab() === 'analyze'
        }, attr: {
            'aria-label': $root.translations.analyze,
            'aria-expanded': (activeTab() === 'analyze').toString(),
            'aria-controls': 'analyzeTabId',
        }"
    >
        <i class="fa fa-line-chart"></i>
        <span 
            class="map-sidebar-text"
            data-bind="text: $root.translations.analyze"
        ></span>
    </div>
    <div id="settingsTabButton" class="workbench-card-sidebar-tab" tabindex="0" role="tab" 
        data-bind="onEnterkeyClick, onSpaceClick, click: function() {
            toggleTab('settings');
            $root.handleEscKey(event.currentTarget, '#settingsTabId');
        }, css: {
            'active': activeTab() === 'settings'
        }, attr: {
            'aria-label': $root.translations.settings,
            'aria-expanded': (activeTab() === 'settings').toString(),
            'aria-controls': 'settingsTabId',
        }"
    >
        <i class="fa fa-cog"></i>
        <span 
            class="map-sidebar-text"
            data-bind="text: $root.translations.settings"
        ></span>
    </div>
    {% endcomment %}
    <div id="legendTabButton" class="workbench-card-sidebar-tab" tabindex="0" role="tab" 
        data-bind="onEnterkeyClick, onSpaceClick, click: function() {
            toggleTab('legend');
            $root.handleEscKey(event.currentTarget, '#legendTabId'); 
        }, css: {
            'active': activeTab() === 'legend'
        }, attr: {
            'aria-label': $root.translations.legend,
            'aria-expanded': (activeTab() === 'legend').toString(),
            'aria-controls': 'legendTabId',
        }"
    >
        <i class="fa fa-list"></i>
        <span 
            class="map-sidebar-text"
            data-bind="text: $root.translations.legend"
        ></span>
    </div>
</div>
{% endblock tabs %}

{% block sidepanel %}
<!--ko if: activeTab() === 'information' -->
<div id="infoTabId" role="tabpanel" data-bind="attr: {'aria-label': $root.translations.resourceInformation}">
<div class="workbench-card-sidepanel-header-container">
    <div class="h4 workbench-card-sidepanel-header" tabindex="0" role="button"
        data-bind="click: function(){hideSidePanel('#infoTabButton');}, onEnterkeyClick, onSpaceClick, attr: {'aria-label': $root.translations.closeResourceInformation, 'aria-description': $root.translations.resourceInformationDescription}">
        <span data-bind="text: $root.translations.resourceInformation"></span>
    </div>
</div>
<div class="workbench-card-sidepanel-border"></div>

<div class="related-resource-graph-information-content" data-bind="using: informationElement">
    <!--ko if: $data -->
    <!--ko if: $parent.edgeInformation() -->
    <div class="edge-node-information" data-bind="event: {
            mouseover: function() {
                $parent.hoverElementId($parent.edgeInformation().source.id)
            },
            mouseout: function() {
                $parent.hoverElementId(null);
            }
        }, css: {'element-hover': $parent.hoverElementId() === $parent.edgeInformation().source.id}">
        <div class="edge-node-graph-color" data-bind="style: {backgroundColor: $parent.edgeInformation().sourceGraph.fillColor}"></div>
        <div class="edge-node-title">
            <div class="edge-node-display-name" tabindex="0" role="button" data-bind="text: $parent.edgeInformation().source.displayname, onEnterkeyClick, onSpaceClick, click: function() {
                $parent.informationElement($parent.edgeInformation().source);
                $root.shiftFocus('.workbench-card-sidepanel-header');
            }, attr: {'aria-label': $root.translations.returnToRelatedResources($parent.edgeInformation().source.displayname) }"></div>
            <div class="edge-node-graph-name" data-bind="text: $parent.edgeInformation().sourceGraph.name"></div>
        </div>
    </div>
    <div class="edge-relationship-information" data-bind="event: {
            mouseover: function() {
                $parent.hoverElementId($parent.edgeInformation().id)
            },
            mouseout: function() {
                $parent.hoverElementId(null);
            }
        }, css: {'element-hover': $parent.hoverElementId() === $parent.edgeInformation().id}">
        <div class="edge-relationship-arrow">
            <div></div>
        </div>
        <div class="edge-relationship-details">
            <div class="edge-relationship-prefix">
                <span data-bind="text: $root.translations.hasRelationship"></span>
            </div>
            <div class="edge-relationship-label" data-bind="text: $parent.edgeInformation().label || $root.translations.relatedTo "></div>
            <div class="edge-relationship-sufix">
                <span data-bind="text: $root.translations.with"></span>
            </div>
        </div>
    </div>
    <div class="edge-node-information" data-bind="event: {
            mouseover: function() {
                $parent.hoverElementId($parent.edgeInformation().target.id)
            },
            mouseout: function() {
                $parent.hoverElementId(null);
            }
        }, css: {'element-hover': $parent.hoverElementId() === $parent.edgeInformation().target.id}">
        <div class="edge-node-graph-color" data-bind="style: {backgroundColor: $parent.edgeInformation().targetGraph.fillColor}"></div>
        <div class="edge-node-title">
            <div class="edge-node-display-name" tabindex="0" role="button" data-bind="text: $parent.edgeInformation().target.displayname, onEnterkeyClick, onSpaceClick, 
            click: function() {
                $parent.informationElement($parent.edgeInformation().target);
                $root.shiftFocus('.workbench-card-sidepanel-header');
            }, attr: {'aria-label': $root.translations.expandRelatedResource($parent.edgeInformation().source.displayname) }"></div>
            <div class="edge-node-graph-name" data-bind="text: $parent.edgeInformation().targetGraph.name"></div>
        </div>
    </div>
    <!--/ko -->
    <!--ko if: !$data.source -->
    <!--ko let: { relationshipsListCountId: Math.random() }-->
    <div class="edge-node-information node-display-name-header">
        <div class="edge-node-graph-color" data-bind="style: {backgroundColor: $parent.informationGraph().fillColor}"></div>
        <div class="edge-node-title">
            <div class="edge-node-display-name" data-bind="text: displayname"></div>
            <div class="edge-node-graph-name" data-bind="text: $parent.informationGraph().name"></div>
            <div class="edge-node-links">
                <span tabindex="0" role="link" data-bind="onEnterkeyClick, onSpaceClick, click: $parent.viewInformationNodeReport, 
                    attr: {'aria-label': $root.translations.visitResourceReport(displayname) }"
                >
                    <i class="fa fa-info"></i>
                    <span data-bind="text: $root.translations.report"></span>
                </span>
                &nbsp;&nbsp;|&nbsp;&nbsp;
                <span tabindex="0" role="link" data-bind="onEnterkeyClick, onSpaceClick, click: $parent.editInformationNode, 
                    attr: {'aria-label': $root.translations.edit + ' ' + displayname}"
                >
                    <i class="fa fa-pencil"></i>
                    <span data-bind="text: $root.translations.edit"></span>
                </span>
            </div>
        </div>
    </div>
    <div class="relationships-list-header">
        <span data-bind="text: $root.translations.relationships"></span>
    </div>
    <div class="relationships-list-count">
        <span data-bind="attr: {id: relationshipsListCountId}">
            <span data-bind="text: $parent.informationElementRelationships().length"></span> / <span data-bind="text: totalRelations"></span>
            <span data-bind="text: $root.translations.relationshipsShown"></span>
        </span>
        <!--ko if: $parent.informationElementRelationships().length !== totalRelations -->
        <a href="javascript:void(0);" tabindex="0" role="button" data-bind="onEnterkeyClick, onSpaceClick, click: function() {
            $parent.expandNode($data);
        }, attr: {
            'aria-label': $root.translations.loadMoreResources,
            'aria-describedby': relationshipsListCountId
        }">
            <span data-bind="text: $root.translations.loadMore"></span>
        </a>
        <!--/ko -->
    </div>
    <div class="relationships-list" role="table" data-bind="foreach: $parent.informationElementRelationships">
        <div class="relationships-list-item" role="row">
            <span role="cell">
                <span tabindex="0" role="button" class="relationships-list-item-type" data-bind="text: label || 'Related to', onEnterkeyClick, onSpaceClick,
                click: function() {
                    informationElement(edge);
                    $root.shiftFocus('.edge-node-display-name');
                }, event: {
                    mouseover: function() {
                        hoverElementId(edge.id)
                    },
                    mouseout: function() {
                        hoverElementId(null);
                    }
                }, css: {
                    'element-hover': hoverElementId() === edge.id
                }, attr: {
                    'aria-label': $root.translations.expandRelationship($parent.displayname, (label || $root.translations.relatedTo), node.displayname),
                    'aria-describedby': relationshipsListCountId
                }"></span>
            </span>
            <span role="cell"><i class="relationships-list-icon fa fa-angle-right"></i></span>
            <span role="cell">
                <span tabindex="0" role="button" class="relationships-list-item-name" data-bind="onEnterkeyClick, onSpaceClick, click: function() {
                    informationElement(node);
                    $root.shiftFocus('.workbench-card-sidepanel-header');
                }, event: {
                    mouseover: function() {
                        hoverElementId(node.id)
                    },
                    mouseout: function() {
                        hoverElementId(null);
                    }
                }, css: {
                    'element-hover': hoverElementId() === node.id
                }, attr: {
                    'aria-label': $root.translations.expandRelatedResource(node.displayname),
                }">
                    <span data-bind="text: node.displayname"></span>
                </span>
            </span>
        </div>
    </div>
    <!--/ko -->
    <!--/ko -->
    <!--/ko -->
</div>
</div>
<!--/ko -->

<!--ko if: activeTab() === 'search' -->
<div id="searchTabId" role="tabpanel" data-bind="attr: {'aria-label': $root.translations.searchNetwork}">
<div class="workbench-card-sidepanel-header-container">
    <div class="h4 workbench-card-sidepanel-header" tabindex="0" role="button" data-bind="onEnterkeyClick, onSpaceClick, click: function(){hideSidePanel('#searchTabButton');}, 
        attr: {'aria-label': $root.translations.closeSearchNetwork, 'aria-description': $root.translations.resourceSearchDescription}">
        <span data-bind="text: $root.translations.searchNetwork"></span>
    </div>
<div class="list-filter related-reasources-search-container">
    <input 
        type="text" 
        class="form-control" 
        data-bind="
            attr: {placeholder: $root.translations.filter + '...', 'aria-label': $root.translations.filterNetwork},
            value: nodeSearchFilter, 
            valueUpdate: 'afterkeydown'
        "
    >
    <span class="clear-node-search" tabindex="0" role="button" data-bind="onEnterkeyClick, onSpaceClick, 
        click: function() { nodeSearchFilter(''); }, visible: nodeSearchFilter() !== ''"><i class="fa fa-times-circle"></i></span>
</div>
<div class="related-reasources-search-list" role="list" data-bind="foreach: searchNodes">
    <div role="listitem" class="edge-node-information" data-bind="event: {
            mouseover: function() {
                $parent.hoverElementId($data.id)
            },
            mouseout: function() {
                $parent.hoverElementId(null);
            }
        }, css: {'element-hover': $parent.hoverElementId() === $data.id}">
        <div class="edge-node-graph-color" data-bind="style: {backgroundColor: graph.fillColor}"></div>
        <div class="edge-node-title">
            <div class="edge-node-display-name" tabindex="0" role="button" data-bind="text: displayname, onEnterkeyClick, onSpaceClick, click: function() {
                $parent.informationElement($data);
                $root.shiftFocus('.workbench-card-sidepanel-header');
            }, attr: {'aria-label': $root.translations.expandRelatedResource(displayname) }"></div>
            <div class="edge-node-graph-name" data-bind="text: graph.name"></div>
            <div class="relationships-list-count shim">
                <span data-bind="text: shownRelationsCount"></span> / <span data-bind="text: totalRelations"></span>
                <span data-bind="text: $root.translations.relationshipsShown"></span>
                <!--ko if: shownRelationsCount() !== totalRelations -->
                <a href="javascript:void(0);" tabindex="0" role="button" data-bind="onEnterkeyClick, onSpaceClick, click: function() {
                    $parent.expandNode($data);
                }, attr: {'aria-label': $root.translations.loadMore }">
                    <span data-bind="text: $root.translations.loadMore"></span>
                </a>
                <!--/ko -->
            </div>
        </div>
    </div>
</div>
</div>
</div>
<!--/ko -->
<!--ko if: activeTab() === 'analyze' -->
<div class="workbench-card-sidepanel-header-container" id="analyzeTabId" role="tabpanel" data-bind="attr: {'aria-label': $root.translations.analyzeNetwork}">
    <div class="h4 workbench-card-sidepanel-header" tabindex="0" role="button"
        data-bind="onEnterkeyClick, onSpaceClick, click: function(){hideSidePanel('#analyzeTabButton');}, attr: {'aria-label': $root.translations.closeAnalyzeNetwork}">
        <span data-bind="text: $root.translations.analyzeNetwork"></span>
    </div>
</div>
<!--/ko -->
<!--ko if: activeTab() === 'settings' -->
<div class="workbench-card-sidepanel-header-container" id="settingsTabId" role="tabpanel" data-bind="attr: {'aria-label': $root.translations.settings}">
    <div class="h4 workbench-card-sidepanel-header" tabindex="0" role="button"
        data-bind="onEnterkeyClick, onSpaceClick, click: function(){hideSidePanel('#settingsTabButton');}, attr: {'aria-label': $root.translations.closeSettings}">
        <span data-bind="text: $root.translations.settings"></span>
    </div>
</div>
<!--/ko -->
<!--ko if: activeTab() === 'legend' -->
<div id="legendTabId" role="tabpanel" data-bind="attr: {'aria-label': $root.translations.legend}">
<div class="workbench-card-sidepanel-header-container">
    <div class="h4 workbench-card-sidepanel-header" tabindex="0" role="button" data-bind="onEnterkeyClick, onSpaceClick, click: function(){hideSidePanel('#legendTabButton');}, 
            attr: {'aria-label': $root.translations.closeLegend, 'aria-description': $root.translations.resourceLegendDescription}">
        <span data-bind="text: $root.translations.legend"></span>
    </div>
</div>
<div class="workbench-card-sidepanel-border"></div>
<div class="legend-listing-container" data-bind="foreach: legendEntries">
    <div class="legend-listing related-resource-legend">
        <div class="edge-node-information">
            <div class="edge-node-graph-color" data-bind="style: {backgroundColor: fillColor}"></div>
            <div class="edge-node-title">
                <div class="edge-node-display-name" data-bind="text: name"></div>
            </div>
        </div>
    </div>
</div>
</div>
<!--/ko -->
{% endblock sidepanel %}

{% block content_management %}
<div class="related-resources-graph-controls">
    <span class="ion-information-circled" data-bind="click: function() { selectionMode('information'); }, css: {
        'active-graph-control': selectionMode() === 'information'
    }"></span>
    <span class="ion-plus" data-bind="click: function() { selectionMode('expand'); }, css: {
        'active-graph-control': selectionMode() === 'expand'
    }"></span>
    <span class="ion-asterisk" data-bind="click: function() { selectionMode('focus'); }, css: {
        'active-graph-control': selectionMode() === 'focus'
    }"></span>
    <span class="ion-eye-disabled" data-bind="click: function() { selectionMode('delete'); }, css: {
        'active-graph-control': selectionMode() === 'delete'
    }"></span>
    <span class="ion-refresh" data-bind="click: refreshLayout"></span>
</div>
<div class="related-resources-graph-controls-instructions">
<!--ko if: selectionMode() === 'information' -->
    <span data-bind="text: $root.translations.clickNodeInfo"></span>
<!--/ko -->
<!--ko if: selectionMode() === 'expand' -->
    <span data-bind="text: $root.translations.clickNodeRelationships"></span>
<!--/ko -->
<!--ko if: selectionMode() === 'focus' -->
    <span data-bind="text: $root.translations.clickNodeRefocus"></span>
<!--/ko -->
<!--ko if: selectionMode() === 'delete' -->
    <span data-bind="text: $root.translations.clickNodeRemove"></span>
<!--/ko -->
</div>
<!--ko if: cytoscapeConfig() -->
<div class="related-resources-graph-cytoscape" data-bind="cytoscape: {
    afterRender: viz,
    config: cytoscapeConfig
}"></div>
<!--/ko -->
{% endblock content_management %}
