<div ng-controller="wizdom365AudienceController as vm">
    <div class="lt-module-page__top lt-module-page-top">
        <div class="lt-module-page-top__title mr-auto">
            <h1>{{'LiveTiles audiences and groups' | translate}}</h1>
        </div>
    </div>

    <div class="panel lt-module-page__content-panel" ng-if="vm.isSaaS">
        <!--Special html for SaaS because we only support custom audiences in SaaS-->
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon1">
                <i class="glyphicon glyphicon-search"></i>
            </span>
            <input type="text" class="form-control" placeholder="Search..." aria-describedby="basic-addon1" ng-model="srcText">
            <span class="input-group-addon btn btn-primary" ng-click="vm.editAudience({principalID:0, type:srcType})"><i class="glyphicon glyphicon-plus"></i>Add Audience</span>
        </div>

        <br />

        <ul class="list-group lt-list">
            <li class="list-group-item lt-list__item lt-flextable__table">
                <div class="lt-flextable__row lt-flextable__row-heading colauto">
                    {{'Name' | translate}}
                </div>
            </li>

            <li class="list-group-item lt-list__item lt-flextable__table" ng-repeat="audience in vm.audiences | filter:vm.filterAudience | filter:srcText">
                <div class="lt-flextable__row colauto" ng-click="vm.editAudience(audience)">
                    {{audience.displayName}}
                </div>
            </li>
        </ul>
    </div>

    <div class="panel lt-module-page__content-panel" ng-if="!vm.isSaaS">
        <!--Default html for audiences -->
        <ul class="list-group lt-list">
            <li class="list-group-item lt-list__item lt-flextable__table">
                <div class="lt-flextable__row">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic-addon1">
                            <i class="glyphicon glyphicon-search"></i>
                        </span>
                        <select class="form-control" aria-describedby="basic-addon1" ng-model="srcType">
                            <option ng-value="0"></option>
                            <option ng-value="3">{{'Audience' | translate}}</option>
                            <option ng-value="4">{{'Custom Audience' | translate}}</option>
                        </select>
                    </div>
                </div>
                <div class="lt-flextable__row col2/3">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search..." aria-describedby="basic-addon1" ng-model="srcText">
                        <span class="input-group-addon btn btn-primary" ng-click="vm.editAudience({principalID:0, type:srcType})"><i class="glyphicon glyphicon-plus"></i>Add Audience</span>
                    </div>
                </div>
            </li>
        </ul>

        <br />

        <ul class="list-group lt-list">
            <li class="list-group-item lt-list__item lt-flextable__table">
                <div class="lt-flextable__row lt-flextable__row-heading">
                    {{'Type' | translate}}
                </div>
                <div class="lt-flextable__row lt-flextable__row-heading">
                    {{'Name' | translate}}
                </div>
                <div class="lt-flextable__row lt-flextable__row-heading">
                    {{'Search query' | translate}}
                </div>
            </li>

            <li class="list-group-item lt-list__item lt-flextable__table" ng-repeat="audience in vm.audiences | filter:vm.filterAudience | filter:srcText">
                <div class="lt-flextable__row cursor-pointer"ng-click="vm.editAudience(audience)">
                    {{(audience.type==3?'Audience':'Custom Audience') | translate}}
                </div>
                <div class="lt-flextable__row cursor-pointer" ng-click="vm.editAudience(audience)">
                    {{audience.displayName}}
                </div>
                <div class="lt-flextable__row lt-flextable__row--breakall cursor-pointer" ng-click="vm.editAudience(audience)">
                    {{audience.searchQuery}}
                </div>
            </li>
        </ul>
    </div>
</div>
