<script setup>

import { onMounted } from 'vue';
import { FormGroup, MultiSelect } from '@cloudron/pankow';

defineProps(['hasFtp', 'users', 'groups']);

const accessRestriction = defineModel('acl');

onMounted(async () => {
});

</script>

<template>
  <div>
    <FormGroup>
      <label>{{ $t('app.accessControl.operators.title') }} <sup><a href="https://docs.cloudron.io/apps/#operators" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
      <div description>{{ $t('app.accessControl.operators.description') }} <span v-if="hasFtp">{{ $t('app.accessControl.userManagement.descriptionSftp') }}</span></div>
    </FormGroup>

    <div style="margin-top: 10px; margin-left: 20px; display: flex; gap: 10px;">
      <div>
        {{ $t('appstore.installDialog.users') }}: <MultiSelect v-model="accessRestriction.users" :options="users" option-key="id" option-label="username" :search-threshold="20" />
      </div>
      <div>
        {{ $t('appstore.installDialog.groups') }}: <MultiSelect v-model="accessRestriction.groups" :options="groups" option-key="id" option-label="name" :search-threshold="20" />
      </div>
    </div>
  </div>
</template>
