Vue.component("User", {
    template: `
                <tt-card>
                  <tt-table :data="window['TT_CONFIG']['USERS']" :config="UserTableConfig">
                    <template v-slot:top-buttons>
                      <tt-button @click="window.location = window['TT_CONFIG']['ADD_URL']"
                                 additional-class="btn-primary"
                                 text="Benutzer hinzufügen"
                                 icon="fas fa-plus"/>
                    </template>

                    <template v-slot:actions="{ row: user }">
                      <div class="d-flex justify-content-center" style="gap: 4px">
                        <tt-button @click="window.location = window['TT_CONFIG']['EDIT_URL'] + '?id=' + user.id"
                                   additional-class="btn-outline-primary"
                                   sm
                                   icon="far fa-edit"
                                   title="Bearbeiten"/>

                        <tt-button @click="window.location = window['TT_CONFIG']['IMPERSONATE_URL'] + '?username=' + user.username"
                                   additional-class="btn-outline-secondary"
                                   sm
                                   title="Impersonate"
                                   icon="far fa-user-secret"/>
                      </div>
                    </template>

                  </tt-table>
                </tt-card>
              `, data: () => ({
        window: window, UserTableConfig: {
            key:             "UserTable",
            tableHeader:     "Benutzer",
            defaultPageSize: 25,
            headers:         [{text: "Username", key: "username", class: "text-center", sortable: false, priority: 20},
                              {text: "Name", key: "name", class: "text-center", sortable: false, priority: 18},
                              {text: "Firma", key: "address", class: "text-center", priority: 19},
                              {text: "E-Mail", key: "email", priority: 14},
                              {text: "Tel. Nr.", key: "mobile", priority: 17, filter: false, sortable: false},
                              {
                                  text:          "2FA", key: "twofactor", class: "text-center", priority: 16, filter: 'iconSelect', sortable: false,
                                  filterOptions: [{value: "N/A", text: "N/A", icon: "fa fa-exclamation-triangle text-danger"},
                                                  {value: "Mail", text: "Mail", icon: "fa-light fa-envelope text-primary"},
                                                  {value: "SMS", text: "SMS", icon: "fa-light fa-mobile-retro text-info"}]
                              },
                              {
                                  text:          "Admin", key: "isAdmin", class: "text-center", priority: 13, filter: 'iconSelect', sortable: false,
                                  filterOptions: [{value: true, text: "Ist Admin", icon: "fa-regular fa-circle-check text-success"},
                                                  {value: false, text: "Ist kein Admin", icon: "fa-regular fa-circle-xmark text-danger"}]
                              },
                              {
                                  text:          "Techniker", key: "isTechnician", class: "text-center", priority: 12, filter: 'iconSelect', sortable: false,
                                  filterOptions: [{value: true, text: "Ist Techniker", icon: "fa-regular fa-circle-check text-success"},
                                                  {value: false, text: "Ist kein Techniker", icon: "fa-regular fa-circle-xmark text-danger"}],
                              },
                              {
                                  text:          "Aktiv", key: "isActive", class: "text-center", priority: 12, filter: 'iconSelect', sortable: false,
                                  filterOptions: [{value: "1", text: "Ist Aktiv", icon: "fa-regular fa-circle-check text-success"},
                                                  {value: "0", text: "Ist nicht aktiv", icon: "fa-regular fa-circle-xmark text-danger"}],
                              },
                              {text: "Aktionen", key: "actions", class: "text-center", sortable: false, priority: 21, filter: false}]
        }
    })
});