{% from 'activity_component.html' import activity_feed %}

{% macro angularVar(v, filterStr='', propStr='') %}{% autoescape false %}{% set filterStr = "|"+filterStr if filterStr else '' %}{% set propStr = '.'+propStr if propStr else '' %}{{'{{'}}{{v}}{{propStr}}{{filterStr}}{{'}}'}}{% endautoescape %}{% endmacro %}

{% macro objectProperty(key, value) %}

<dt>
    <a href="" class="toggle" ng-if="valueType({{value}}) == 'object'">
        <span class="caret"></span>
        {{ angularVar(key) }}
    </a>
    <span ng-if="valueType({{value}}) != 'object'">
        {{ angularVar(key) }}
    </span>
</dt>
<dd ng-if="valueType({{value}}) == 'simple'">
    {{ angularVar(value) }}
</dd>
<dd ng-if="valueType({{value}}) == 'date'">
    {{ angularVar(value, "date:'medium'") }}
</dd>
<dd ng-if="valueType({{value}}) == 'reference'">
    <a href="/{{angularVar(key)}}/{{angularVar('selectedServer')}}/{{angularVar(value, propStr='name')}}"
       target="_self">
        {{ angularVar(value, propStr='name') }}
    </a>
</dd>
<dd ng-if="valueType({{value}}) == 'listOfRefs'">
    <a ng-repeat="ref in {{value}}"
       href="/{{angularVar(key)}}/{{angularVar('selectedServer')}}/{{angularVar('ref', propStr='name')}}"
       target="_self">
        {{ angularVar('ref', propStr='name') }}</a>{{'{{'}}$last ? '' : ', '{{'}}'}}
</dd>
<dd ng-if="valueType({{value}}) == 'object'">
    <pre>{{ angularVar(value, "json") }}</pre>
    <span class="hidden">...</span>
</dd>

{% endmacro %}

{% macro collectionView(collection, showActivityFeed=false, orderField='name') %}
<div id="collection_list" ng-controller="CollectionList" ng-init="init('{{collection}}')">
    <div class="row">
        <div class="col-xs-12">
            <h1>{{collection | capitalize}}</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-3">
            <form name="collectionfilter" role="form">
                <div class="form-group">
                    <input type="search" ng-model="collectionFilter" class="form-control" placeholder="Filter">
                </div>
            </form>
            <div id="itemListNav">

                <div class="panel panel-default">
                    <div class="panel-heading" ng-repeat-start="(server, server_items) in items">
                        <a class="toggle" href="" ng-click="toggleSection(server)">
                            <span class="caret"></span>
                            {{ angularVar('server') }}
                        </a>
                    </div>
                    <ul class="nav nav-pills nav-stacked" id="itemList-{{angularVar('server')}}" ng-repeat-end>
                        <li ng-repeat="item in server_items | orderObjectByString:'{{orderField}}' | filter:collectionFilter ">
                            <a href="/{{collection}}/{{angularVar('server')}}/{{angularVar('item', propStr='name')}}">
                                {% raw %}
                                {{ item.hostname || item.name }}
                                {% endraw %}
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-xs-9">
            <div ng-if="selectedItemInfo">
                <h2 class="itemInfoHeader">
                    {% raw %}
                    {{selectedItemInfo.hostname || selectedItemInfo.name}}
                    {% endraw %}
                </h2>
                <h4>
                    {% raw %}
                    {{selectedItemInfo.name}} on {{selectedServer}}
                    {% endraw %}
                </h4>
                <dl class="dl-horizontal">
                    <span ng-repeat="key in prioritizedKeys">
                        {{ objectProperty('key', 'selectedItemInfo[key]') }}
                    </span>
                    <span
                        ng-repeat="(key, value) in selectedItemInfo"
                        ng-if="omittedKeys.indexOf(key) <= -1">
                        {{ objectProperty('key', 'value') }}
                    </span>
                </dl>
                {% if showActivityFeed %}
                <hr>
                <h4>Activity</h4>
                {{ activity_feed(chunkSize=10) }}
                {% endif %}
            </div>
        </div>
    </div>
</div>

{% endmacro %}
