<template>
  <loader :is-loading="isLoading">
    <header class="page-header pt-4 pb-3">
      <h1>IP-adressen whitelist</h1>

      <div class="page-header-buttons">
        <router-link class="btn btn-primary" :to="createItemRoute" v-if="canCreate">
          <span class="icon-plus"></span> {{ capitalizeModuleName }} toevoegen
        </router-link>
      </div>
    </header>

    <h2>Geldige IP-adressen</h2>
    <item-list
      :items="validIps"
      :fields="fields"
      :action="openItem"
      :schema="schema"
      :custom-fields="customFields"
      :module="module"
    ></item-list>

    <hr />

    <h2>Verlopen IP-adressen</h2>
    <item-list
      :items="expiredIps"
      :fields="fields"
      :action="openItem"
      :schema="schema"
      :custom-fields="customFields"
      :module="module"
    ></item-list>
  </loader>
</template>

<style lang="scss" scoped>
hr {
  margin: 2rem 0;
}
</style>

<script lang="ts">
import { Mixins, Vue } from 'vue-property-decorator';
import CrudOverview from '../crud/crud-overview.vue';
import { CrudStoreItemsModel } from '../stores/types/CrudStoreModel';

export default class WhitelistIpOverview extends Mixins(Vue, CrudOverview) {
  get searchResultItems(): CrudStoreItemsModel[] {
    return this.crudStore.latestSearchResult ? this.crudStore.latestSearchResult.items : [];
  }

  get expiredIps() {
    return this.searchResultItems.filter((item) => item.validUntil !== null && Date.parse(item.validUntil) < Date.now());
  }

  get validIps() {
    return this.searchResultItems.filter((item) => item.validUntil === null || Date.parse(item.validUntil) > Date.now());
  }
}
</script>
