Vue.component('Pop', {
    //language=Vue
    // g
    template: `
      <tt-card>

        <tt-table :data="window['TT_CONFIG']['POPS']" :config="PopTableConfig" excel-export>

          <template v-slot:top-buttons>
            <button type="button" class="btn btn-primary" @click="window.location = window['TT_CONFIG']['BASE_URL'] + '/Pop/add'">
              <i class="fas fa-plus"></i>
              Pop hinzufügen
            </button>
            <button type="button" class="btn btn-light mr-2" @click="$refs.mapModal.open()">
              <i class="fa-duotone fa-solid fa-map-location-dot"></i> <span class="font-weight-semibold">Übersichtskarte</span>
            </button>
          </template>

          <template v-slot:name="{ row }">
            <a target="_blank" :href="window['TT_CONFIG']['BASE_URL'] +'/Pop/Detail?id=' + row.id">{{row.name}}</a>
          </template>

          <template v-slot:address="{ row }">
            <a
                v-if="row.street || row.city"
                :title="'Google Maps: ' + row.street + ' ' + row.number + ', ' + row.zip + ' ' + row.city"
                class="mapsLink"
                :href="'http://maps.google.com/?q=' + row.street + ' ' + row.number + ', ' + row.zip + ' ' + row.city"
                target="_blank">
              {{row.street}} {{row.number}}, {{row.zip}} {{row.city}}
            </a>
          </template>

          <template v-slot:category="{ row }">
            {{ {1: 'Outdoor', 2: 'Indoor', 3: 'Sender/Funk', 4: 'Container', 99: 'Unbekannt'}[row.category] || 'Unbekannt' }}
          </template>

          <template v-slot:doku_date="{ row }">
            <span>{{row.doku_date ? window.moment.unix(row.doku_date).format('DD.MM.YYYY') : ''}}</span>
          </template>
          
          <template v-slot:vlan="{ row }">
            <span v-if="row.vlan.public" class="order-date-pill text-nowrap active mb-1">Public: <span class="font-weight-bold">{{row.vlan.public}}</span></span>
            <span v-if="row.vlan.nat" class="order-date-pill text-nowrap active mb-1">Nat: <span class="font-weight-bold">{{row.vlan.nat}}</span></span>
            <span v-if="row.vlan.ipv6" class="order-date-pill text-nowrap active mb-0">IPv6: <span class="font-weight-bold">{{row.vlan.ipv6}}</span></span>
          </template>

          <template v-slot:gps="{ row }">
            <a
                v-if="row.gps"
                :title="'Google Maps: ' + row.gps"
                class="mapsLink"
                :href="'http://maps.google.com/?q=' + row.gps"
                v-text="row.gps"
                target="_blank"></a>
          </template>

          <template v-slot:actions="{ row }">
            <a :href="window['TT_CONFIG']['BASE_URL'] +'/Pop/edit/?id=' + row.id +'&returnto=Pop'"><i class="far fa-edit" title="Bearbeiten"></i></a>
            <a v-if="row.folder_link && window.TT_CONFIG.IS_ADMIN === '1'" :href="row.folder_link" target="_blank"><i class="fas fa-folder" title="Ordner"></i></a>
            <a :href="window['TT_CONFIG']['BASE_URL'] +'/Pop/delete/?id=' + row.id" onclick="if(!confirm('Device wirklich löschen?')) return false;" class="text-danger" title="Löschen"><i class="fas fa-trash "></i></a>
          </template>

        </tt-table>
        
        <pop-map-modal ref="mapModal"></pop-map-modal>
      </tt-card>
    `,
    data() {
        return {
            window: window,
            PopTableConfig: {
                key: 'PopTable',
                tableHeader: 'Pops',
                defaultPageSize: 25,
                headers: [
                    {text: 'Name', key: 'name', priority: 10},
                    {text: 'Netzgebiet', key: 'networkArea', class: 'text-center',
                    // TODO: fix autocomplete Filter
                    //    filter: 'autocomplete',
                    //    filterOptions: window['TT_CONFIG']['NETWORKS'],
                    //    priority: 8
                    },
                    {text: 'Zutritt', key: 'location', class: 'text-center',  priority: 1},
                    {text: 'Standort', key: 'gps', class: 'text-center',  priority: 2},
                    {text: 'Adresse', key: 'address', class: 'text-center', priority: 3},
                    {text: 'Status', key: 'state', class: 'text-center',  priority: 4, filter: 'select', filterOptions: [
                            {value: '1', text: 'Planung'},
                            {value: '2', text: 'Bauphase'},
                            {value: '3', text: 'Grobdoku'},
                            {value: '4', text: 'In Betrieb'},
                            {value: '5', text: 'Abgenommen'}]},
                    {text: 'Doku-Stand', key: 'doku_date', class: 'text-center',  priority: 4, filter: 'date'},
                    {text: 'Vlan Public/Nat/ipv6', key: 'vlan', class: 'text-center',  priority: 7},
                    {text: 'Aktionen', key: 'actions', class: 'text-center', sortable: false, filter: false, priority: 9},
                ],
            },
        }
    }
});