<script type="text/x-template" id="vpssdnaliases-template">

    <!-- full template HTML here -->

    <div class="col-xs-12">
        <div class="card">
            <div class="body">
                <div class="row">

                    <OperationsPanel v-if="!readOnly">
                        <a v-bind:href="'/PCC/VPS/SDN/AddEditAlias.aspx'" class="btn btn-primary waves-effect btnAction">{{ getLabelText('AddAlias') }}</a>
                    </OperationsPanel>

                    <SearchPanel id='vpssdnaliases-list' :showClearButton="showClearButton" @onSearch='doSearch' @onClear='doClearSearch'>

                        <div :class="searchContainerDivClass" v-if="owners.show">
                            <div class="form-group form-float">
                                <VueSelect id="Alias_Owner" :options="owners.items" :selectedValue="this.search.selectedOwner" @selectchange="ownerChangeHandler" />
                            </div>
                        </div>

                        <InputSearch :searchValue="search.clientId" fieldName="clientId" fieldDataType="Number" v-if="!isLoggedInAsCustomer" :fieldLabel="getLabelText('GN0000715')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                        <InputSearch :searchValue="search.customerName" fieldName="customerName" v-if="!isLoggedInAsCustomer" :fieldLabel="getLabelText('GN0000268')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                        <InputSearch :searchValue="search.clientCompanyName" fieldName="clientCompanyName" v-if="!isLoggedInAsCustomer" :fieldLabel="getLabelText('CustomerCompanyName')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                        <InputSearch :searchValue="search.aliasNameFilter" fieldName="aliasNameFilter" :fieldLabel="getLabelText('AliasName')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />

                        <div :class="searchContainerDivClass" v-if="typesFilter.show">
                            <div class="form-group form-float">
                                <VueSelect id="Alias_TypeFilter" :options="typesFilter.items" :selectedValue="this.search.selectedTypeFilter" @selectchange="typeChangeHandler" />
                            </div>
                        </div>

                        <InputSearch :searchValue="search.descriptionFilter" fieldName="descriptionFilter" :fieldLabel="getLabelText('Description')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                        <InputSearch :searchValue="search.detailsFilter" fieldName="detailsFilter" :fieldLabel="getLabelText('DGN1110431')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />

                    </SearchPanel>

                    <div class="col-xs-12" v-if="isLoading">
                        <Loading />
                    </div>

                    <div class="col-xs-12" v-else>
                        <table class="table table-bordered table-striped table-hover" v-if="records.length > 0">
                            <tbody>
                                <tr>
                                    <th class="col-xs-2"><a href="#" @click.prevent="sortBy('Name')">{{getLabelText('AliasName')}}</a></th>
                                    <th class="col-xs-2"><a href="#" @click.prevent="sortBy('Type')">{{ getLabelText('Type') }}</a></th>
                                    <th class="col-xs-2"><a href="#" @click.prevent="sortBy('Descr')">{{ getLabelText('Description') }}</a></th>
                                    <th class="col-xs-1 hidden-xs" v-if="owners.show">{{ getLabelText('SPT002811') }}</th>
                                    <th class="col-xs-2" v-if="!isLoggedInAsCustomer"><a href="#" @click.prevent="sortBy('CustomerId')">{{ getLabelText('GN0000850') }}</a></th>
                                    <th class="col-xs-1">{{ getLabelText('IsDefault') }}</th>
                                    <th class="col-xs-2 align-center">{{ getLabelText('GN0000360') }}</th>
                                </tr>
                                <tr v-for="record in records">

                                    <td>{{ record.Name }}</td>
                                    <td>{{ (record.Type == 'host' ? 'Host(s)' : (record.Type == 'network' ? 'Network(s)' : 'Port(s)')) }}</td>
                                    <td>{{ record.Descr }}</td>

                                    <td v-if="owners.show && record.OwnerId == 0">{{ record.OwnerName }}</td>
                                    <td v-else-if="owners.show"><a v-bind:href="'/RCC/Clients/ClientDetail.aspx?RD=1&CID='+record.OwnerId+'&Src=C'">{{ record.OwnerName }}</a></td>

                                    <td v-if="!isLoggedInAsCustomer"><a v-bind:href="'/RCC/Clients/ClientDetail.aspx?CID=' + record.CustomerId">{{ '#' + record.CustomerId + ' ' + record.CustomerName + (record.CustomerCompanyName != '' ? ' [' + record.CustomerCompanyName + ']' : '') }} </a></td>

                                    <td>{{ (record.IsDefault ? getLabelText('strYes') : getLabelText('strNo')) }}</td>
                                    <td>
                                        <a v-if="!record.IsDefault" v-bind:href="'/PCC/VPS/SDN/AddEditAlias.aspx?Id=' + record.AliasId" class="btn btn-primary waves-effect btnAction">{{ getLabelText('GN0000276') }}</a>
                                        <a v-else v-bind:href="'/PCC/VPS/SDN/AddEditAlias.aspx?Id=' + record.AliasId" class="btn btn-primary waves-effect btnAction">{{ getLabelText('View') }}</a>

                                        <a :disabled="(record.IsDefault || record.InUse ? true : null)" v-if="!readOnly" 
                                           :title="(record.InUse ? getLabelText('ActionRestrictedForInUse').replace('%record%','alias') : (record.IsDefault ? getLabelText('ActionRestrictedForDefault').replace('%record%','alias') : ''))" 
                                           @click="confirmRemove" :data-id="record.AliasId" :data-name="record.Name" class="btn btn-primary waves-effect btnAction">{{ getLabelText('GN0000278') }}</a>
                                    </td>

                                </tr>

                                <Pager :totalRecords="totalRecords" :pageSize="this.search.pageSize" :currentPage="this.search.pageIndex" @pagerChange="pagerChangeHandler" />
                            </tbody>
                        </table>
                        <NoRecords v-else />
                    </div>
                </div>
            </div>
        </div>
    </div>


</script>