Organization details

Avatar

{#if avatarUrl} {/if}

<div>
			<Button size="sm" onclick={saveGeneralSettings} loading={isSaving}
				>Save Changes</Button
			>
		</div>
	</div>

<div
		class="bg-dark/30 border border-light/5 rounded-xl p-5 flex flex-col gap-5"
	>
		<div>
			<h2 class="font-heading text-body text-white">
				{m.settings_social_title()}
			</h2>
			<p class="text-[11px] text-light/40 mt-0.5">
				{m.settings_social_desc()}
			</p>
		</div>

<div>
			<Button size="sm" onclick={saveSocialLinks} loading={isSavingSocial}
				>{m.settings_social_save()}</Button
			>
		</div>
	</div>

<div
		class="bg-dark/30 border border-light/5 rounded-xl p-5 flex flex-col gap-5"
	>
		<div>
			<h2 class="font-heading text-body text-white">Preferences</h2>
			<p class="text-[11px] text-light/40 mt-0.5">
				Currency, date format, timezone, and calendar defaults.
			</p>
		</div>

<Select
			variant="compact"
			label="Currency"
			bind:value={currency}
			placeholder=""
			options={SUPPORTED_CURRENCIES.map((c) => ({
				value: c.code,
				label: c.label,
			}))}
			hint={`Preview: ${currencyPreview}`}
		/>

<Select
			variant="compact"
			label="Date format"
			bind:value={dateFormat}
			placeholder=""
			options={DATE_FORMAT_OPTIONS}
		/>

<Select
			variant="compact"
			label="Timezone"
			bind:value={timezone}
			placeholder=""
			groups={TIMEZONE_OPTIONS.map((g) => ({
				label: g.group,
				options: g.zones.map((z) => ({
					value: z,
					label: z.replace(/_/g, " "),
				})),
			}))}
		/>

<div>
			<Button size="sm" onclick={savePreferences} loading={isSavingPrefs}
				>Save Preferences</Button
			>
		</div>
	</div>

<div
		class="bg-dark/30 border border-light/5 rounded-xl p-5 flex flex-col gap-5"
	>
		<div>
			<h2 class="font-heading text-body text-white">Event defaults</h2>
			<p class="text-[11px] text-light/40 mt-0.5">
				Defaults applied when creating new events and departments.
			</p>
		</div>

<div class="flex flex-col gap-2">
			<span class="font-body text-body-sm text-light/60"
				>Default event color</span
			>
			<div class="flex flex-wrap gap-2">
				{#each EVENT_COLOR_PRESETS as color}
					<button
						type="button"
						class="w-7 h-7 rounded-lg border-2 transition-all {defaultEventColor ===
						color
							? 'border-white scale-110'
							: 'border-transparent hover:border-light/30'}"
						style="background-color: {color}"
						onclick={() => (defaultEventColor = color)}
						aria-label="Color {color}"
					></button>
				{/each}
				<label
					class="w-7 h-7 rounded-lg border-2 border-dashed border-light/20 hover:border-light/40 transition-all cursor-pointer flex items-center justify-center overflow-hidden"
					title="Custom color"
				>
					<input
						type="color"
						class="opacity-0 absolute w-0 h-0"
						bind:value={defaultEventColor}
					/>
					<span
						class="material-symbols-rounded text-light/30"
						style="font-size: 14px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 14;"
						>colorize</span
					>
				</label>
			</div>
		</div>

<Select
			variant="compact"
			label="Default event status"
			bind:value={defaultEventStatus}
			placeholder=""
			options={EVENT_STATUS_OPTIONS}
		/>

<Select
			variant="compact"
			label="Default department layout"
			bind:value={defaultDeptLayout}
			placeholder=""
			options={DASHBOARD_LAYOUT_OPTIONS}
		/>

<div class="flex flex-col gap-2">
			<span class="font-body text-body-sm text-light/60"
				>Default department modules</span
			>
			<p class="text-[11px] text-light/30">
				Modules auto-added when a new department is created.
			</p>
			<div class="grid grid-cols-2 gap-2">
				{#each DEPT_MODULE_OPTIONS as mod}
					<button
						type="button"
						class="flex items-center gap-2.5 px-3 py-2.5 rounded-xl border transition-all text-left {defaultDeptModules.includes(
							mod.value,
						)
							? 'bg-primary/10 border-primary/30 text-white'
							: 'bg-dark/30 border-light/5 text-light/40 hover:border-light/10'}"
						onclick={() => toggleModule(mod.value)}
					>
						<span
							class="material-symbols-rounded {defaultDeptModules.includes(
								mod.value,
							)
								? 'text-primary'
								: 'text-light/30'}"
							style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;"
							>{mod.icon}</span
						>
						<span class="text-body-sm font-body">{mod.label}</span>
					</button>
				{/each}
			</div>
		</div>

<div>
			<Button
				size="sm"
				onclick={saveEventDefaults}
				loading={isSavingDefaults}>Save Event Defaults</Button
			>
		</div>
	</div>

<div
		class="bg-dark/30 border border-light/5 rounded-xl p-5 flex flex-col gap-5"
	>
		<div>
			<h2 class="font-heading text-body text-white">Features</h2>
			<p class="text-[11px] text-light/40 mt-0.5">
				Enable or disable features for this organization.
			</p>
		</div>

<div class="flex flex-col gap-3">

<label
				class="flex items-center justify-between px-3 py-3 rounded-xl bg-dark/30 border border-light/5 cursor-pointer hover:border-light/10 transition-colors"
			>
				<div class="flex items-center gap-3">
					<span
						class="material-symbols-rounded text-emerald-400"
						style="font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;"
						>account_balance</span
					>
					<div>
						<p class="text-body-sm text-white">Budget & Finances</p>
						<p class="text-[11px] text-light/30">
							Income/expense tracking, planned vs actual budgets
						</p>
					</div>
				</div>
				<input
					type="checkbox"
					bind:checked={featureBudget}
					class="w-4 h-4 rounded accent-primary"
				/>
			</label>

<label
				class="flex items-center justify-between px-3 py-3 rounded-xl bg-dark/30 border border-light/5 cursor-pointer hover:border-light/10 transition-colors"
			>
				<div class="flex items-center gap-3">
					<span
						class="material-symbols-rounded text-indigo-400"
						style="font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;"
						>handshake</span
					>
					<div>
						<p class="text-body-sm text-white">Sponsors</p>
						<p class="text-[11px] text-light/30">
							Sponsor CRM with tiers, deliverables, and fund
							tracking
						</p>
					</div>
				</div>
				<input
					type="checkbox"
					bind:checked={featureSponsors}
					class="w-4 h-4 rounded accent-primary"
				/>
			</label>

<label
				class="flex items-center justify-between px-3 py-3 rounded-xl bg-dark/30 border border-light/5 cursor-pointer hover:border-light/10 transition-colors"
			>
				<div class="flex items-center gap-3">
					<span
						class="material-symbols-rounded text-blue-400"
						style="font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;"
						>contacts</span
					>
					<div>
						<p class="text-body-sm text-white">Contacts</p>
						<p class="text-[11px] text-light/30">
							Vendor and contact directory per department
						</p>
					</div>
				</div>
				<input
					type="checkbox"
					bind:checked={featureContacts}
					class="w-4 h-4 rounded accent-primary"
				/>
			</label>
		</div>

<div>
			<Button
				size="sm"
				onclick={saveFeatureToggles}
				loading={isSavingFeatures}>Save Features</Button
			>
		</div>
	</div>

{#if isOwner}
		<div
			class="bg-dark/30 border border-error/10 rounded-xl p-5 flex flex-col gap-3"
		>
			<h4 class="font-heading text-body-sm text-error">Danger Zone</h4>
			<p class="font-body text-[11px] text-light/40">
				Permanently delete this organization and all its data.
			</p>
			<div>
				<Button variant="danger" size="sm" onclick={onDelete}
					>Delete Organization</Button
				>
			</div>
		</div>
	{/if}

{#if !isOwner}
		<div
			class="bg-dark/30 border border-light/5 rounded-xl p-5 flex flex-col gap-3"
		>
			<h4 class="font-heading text-body-sm text-white">
				Leave Organization
			</h4>
			<p class="font-body text-[11px] text-light/40">
				Leave this organization. You will need to be re-invited to
				rejoin.
			</p>
			<div>
				<Button variant="secondary" size="sm" onclick={onLeave}
					>Leave {org.name}</Button
				>
			</div>
		</div>
	{/if}
</div>