<script setup>

import { inject, useTemplateRef } from 'vue';
import { Button, FormGroup } from '@cloudron/pankow';
import ApplinkDialog from './ApplinkDialog.vue';
import Section from './Section.vue';
import SettingsItem from './SettingsItem.vue';

const features = inject('features');

const applinkDialog = useTemplateRef('applinkDialog');

function onAddExternalLink() {
  applinkDialog.value.open();
}

function onApplinkAdded() {
  window.location.href = '#/apps';
}

</script>

<template>
  <ApplinkDialog ref="applinkDialog" @success="onApplinkAdded"/>

  <Section :title="$t('dashboard.title')">
    <SettingsItem>
    <FormGroup>
      <label>{{ $t('externallinks.label') }}</label>
      <div>{{  $t('externallinks.description') }}</div>
    </FormGroup>
    <div style="display: flex; position: relative; align-items: center">
      <Button tool plain @click="onAddExternalLink()" :disabled="!features.branding">{{ $t('main.action.add') }}</Button>
    </div>
    </SettingsItem>
  </Section>
</template>
