<div class="panel panel-default lt-module-page__content-panel position-relative">
    <wizdom365-spinner class="spinner" loading="loading"></wizdom365-spinner>

    <div class="saveConfigurationButton abs-position" ng-if="instances.length > 0">
        <button type="button" ng-click="openInstancePopup();" class="btn btn-primary">{{'Create instance' | translate}}</button>
    </div>

    <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}">
            <div class="lt-list-item__title lt-list-item__title lt-flextable__row">{{instance.name}}<span class="streamline icon-content-pencil-write" style="cursor:pointer;padding-left:10px;" title="Change title" ng-click="openInstancePopup(instance)"></span></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 class="spinner" 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>
