<!--
  @component Renders a settings page for security settings.
-->
<script lang="ts">
  import {ROUTE_DEFINITIONS} from '~/app/routing/routes';
  import Text from '~/app/ui/components/atoms/text/Text.svelte';
  import KeyValueList from '~/app/ui/components/molecules/key-value-list';
  import type {SecuritySettingsProps} from '~/app/ui/components/partials/settings/internal/security-settings/props';
  import {i18n} from '~/app/ui/i18n';

  const {services}: SecuritySettingsProps = $props();

  const {router} = services;

  function handleClickChangePassword(): void {
    router.go({modal: ROUTE_DEFINITIONS.modal.changePassword.withoutParams()});
  }
</script>

<KeyValueList>
  <KeyValueList.Section
    title={$i18n.t('settings--security.label--app-protection', 'App Protection')}
  >
    <KeyValueList.ItemWithButton icon="edit" key="" onclick={handleClickChangePassword}>
      <Text text={$i18n.t('settings--security.label--change-password', 'Change App Password')} />
    </KeyValueList.ItemWithButton>
  </KeyValueList.Section>
</KeyValueList>
