<div class="panel panel-default lt-module-page__content-panel">
    <wizdom365-spinner style="position: absolute; top: 30%; left: 50%;" loading="loading"></wizdom365-spinner>
    <div class="panel-heading">
        {{labelTitle}}
    </div>
        
    
    <ul class="list-group lt-list" ng-show="!loading">
        <li class="list-group-item lt-list__item lt-flextable__table">
            <div class="lt-flextable__row lt-flextable__row-heading">{{'Title' | translate}}</div>
            <div class="lt-flextable__row lt-flextable__row-heading">{{'Url' | translate}}</div>
            <div class="lt-flextable__row lt-flextable__row-heading"></div>
        </li>
        <li class="list-group-item lt-list__item lt-flextable__table" ng-repeat="instance in instances | filter: { archivedDate: null} | orderBy: 'name'">
            <div class="lt-list-item__title lt-list-item__title lt-flextable__row">{{instance.name}}</div>
            <div class="lt-flextable__row lt-flextable__row--breakall">{{instance.url}}</div>
            <div class="lt-list-item__actions lt-flextable__row">

                <span class="streamline icon-question-circle" style="cursor: pointer" bs-popover data-placement="left" template="instanceTemplate.html" auto-close="true">
                    <script type="text/ng-template" id="instanceTemplate.html">
                        <div class="popover">
                            <div class="popover-content">
                                <div class="form-group">
                                    <div><label class="control-label">Instance ID</label>:<span>{{instance.id}}</span></div>
                                    <div><label class="control-label">Name</label>:<span>{{instance.name}}</span></div>
                                    <div><label class="control-label">Url</label>:<span>{{instance.url}}</span></div>
                                </div>
                            </div>
                        </div>
                    </script>
                    <wizdom365-spinner style="position: absolute; top: 40%; left: 50%;" loading="loadingItem[instance.id]"></wizdom365-spinner>
                </span>

                <span class="streamline icon-archive" aria-hidden="true" title="{{'Archive Instance' | translate}}" ng-click="archive(instance)"></span>
                <span class="streamline icon-pencil-1" aria-hidden="true" title="{{'Edit' | translate}}" ng-click="selectInstance(instance)"></span>
            </div>
        </li>
    </ul>
</div>

<div class="lt-module-page__content-accordion">
    <accordion>
        <accordion-group is-open="panelExpanded">
            <accordion-heading class="panel-title">
                <a>{{'Archived instances' | translate}}</a>
                <i class="pull-right streamline" ng-class="{'icon-arrow-down-1': panelExpanded, 'icon-arrow-right-1': !panelExpanded}"></i>
            </accordion-heading>
            
            <ul class="list-group lt-list" ng-show="!loading">
                <li class="list-group-item lt-list__item lt-flextable__table">
                    <div class="lt-flextable__row lt-flextable__row-heading">{{'Title' | translate}}</div>
                    <div class="lt-flextable__row lt-flextable__row-heading">{{'Url' | translate}}</div>
                    <div class="lt-flextable__row lt-flextable__row-heading"></div>
                </li>
                <li class="list-group-item lt-list__item lt-flextable__table" ng-repeat="instance in instances | filter: { archivedDate: '!!'}">
                    <div class="lt-list-item__title lt-list-item__title lt-flextable__row">{{instance.name}}</div>
                    <div class="lt-flextable__row lt-flextable__row--breakall">{{instance.url}}</div>
                    <div class="lt-list-item__actions lt-flextable__row">
                        <span class="streamline icon-question-circle" style="cursor: pointer" bs-popover data-placement="left" template="instanceTemplate.html" auto-close="true">
                            <script type="text/ng-template" id="instanceTemplate.html">
                                <div class="popover">
                                    <div class="popover-content">
                                        <div class="form-group">
                                            <div><label class="control-label">Instance ID</label>:<span>{{instance.id}}</span></div>
                                            <div><label class="control-label">Name</label>:<span>{{instance.name}}</span></div>
                                            <div><label class="control-label">Url</label>:<span>{{instance.url}}</span></div>
                                        </div>
                                    </div>
                                </div>
                            </script>
                            <wizdom365-spinner style="position: absolute; top: 40%; left: 50%;" loading="loadingItem[instance.id]"></wizdom365-spinner>
                        </span>
                        <span class="streamline icon-archive item-special" aria-hidden="true" title="{{'Un-Archive Instance' | translate}}" ng-click="unArchive(instance)"></span>
                    </div>
                </li>
            </ul>
            
        </accordion-group>
    </accordion>
</div>