{"version":3,"file":"SettingsProfile-DS2FyDXe.js","sources":["../../src/lib/components/molecules/SettingsProfile.svelte"],"sourcesContent":["<!--\nSettingsProfile molecule.\nCopyright (C) 2024 André Jaenisch\nSPDX-FileCopyrightText: 2024 André Jaenisch\nSPDX-License-Identifier: AGPL-3.0-or-later\n\nThis program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.\n\nThis program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.\n\nYou should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.\n-->\n\n<script>\n\timport { _ } from 'svelte-i18n';\n\timport { Person24, Upload16, XCircleFill12 } from 'svelte-octicons';\n</script>\n\n<div class=\"flex flex-col flex-1 gap-4 pe-8 pb-8 ps-8 pt-20 bg-surface-100-800-token\">\n\t<div class=\"flex text-surface-500-400-token text-xl font-semibold\">\n\t\t{$_('settings.profile.headline')}\n\t</div>\n\t<div class=\"flex flex-col gap-6\">\n\t\t<div class=\"text-surface-500-400-token font-semibold\">\n\t\t\t{$_('settings.profile.avatar.headline')}\n\t\t</div>\n\t\t<div class=\"flex flex-col px-2\">\n\t\t\t<div class=\"flex gap-4\">\n\t\t\t\t<Person24\n\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\tclass=\"h-16 w-16 text-white dark:text-surface-300 bg-surface-400-500-token rounded-full\"\n\t\t\t\t/>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"btn flex gap-4 justify-between px-4 text-surface-900-50-token bg-surface-50-900-token border-surface-100-800-token\"\n\t\t\t\t>\n\t\t\t\t\t<Upload16 fill=\"currentColor\" />\n\t\t\t\t\t<span>{$_('settings.profile.avatar.upload')}</span>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t\t<div>\n\t\t\t\t<button type=\"button\" class=\"btn p-0 text-warning-700\">\n\t\t\t\t\t<XCircleFill12 fill=\"currentColor\" />\n\t\t\t\t\t<span>{$_('settings.profile.avatar.remove')}</span>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</div>\n\t\t<div>\n\t\t\t<div class=\"flex gap-8\">\n\t\t\t\t<div class=\"flex flex-col gap-2 grow\">\n\t\t\t\t\t<span class=\"text-surface-500-400-token font-semibold\"\n\t\t\t\t\t\t>{$_('settings.profile.name.label')}</span\n\t\t\t\t\t>\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tplaceholder={$_('settings.profile.name.placeholder')}\n\t\t\t\t\t\tclass=\"input bg-white dark:bg-black placeholder:text-surface-300 dark:placeholder:text-surface-400\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"flex flex-col gap-2 flex-1 shrink basis-40\">\n\t\t\t\t\t<span class=\"text-surface-500-400-token font-semibold\"\n\t\t\t\t\t\t>{$_('settings.profile.pronouns.label')}</span\n\t\t\t\t\t>\n\t\t\t\t\t<input type=\"text\" class=\"input bg-white dark:bg-black\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div>\n\t\t\t<div class=\"flex flex-col gap-2\">\n\t\t\t\t<span class=\"text-surface-500-400-token font-semibold\"\n\t\t\t\t\t>{$_('settings.profile.bio.label')}</span\n\t\t\t\t>\n\t\t\t\t<textarea\n\t\t\t\t\tplaceholder={$_('settings.profile.bio.placeholder')}\n\t\t\t\t\trows=\"4\"\n\t\t\t\t\tclass=\"placeholder:text-surface-300 dark:placeholder:text-surface-400 bg-white dark:bg-black\"\n\t\t\t\t></textarea>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"flex flex-col\">\n\t\t\t<div class=\"text-surface-500-400-token font-semibold\">\n\t\t\t\t{$_('settings.profile.extra.headline')}\n\t\t\t</div>\n\t\t\t<div class=\"text-surface-500-400-token\">{$_('settings.profile.extra.hint')}</div>\n\t\t\t<div class=\"flex gap-2 py-1\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tclass=\"input bg-white dark:bg-black shrink basis-40 placeholder:text-surface-300 dark:placeholder:text-surface-400\"\n\t\t\t\t\tplaceholder={$_('settings.profile.extra.label.placeholder')}\n\t\t\t\t/>\n\t\t\t\t<input\n\t\t\t\t\t
