229 lines
17 KiB
HTML
229 lines
17 KiB
HTML
{% extends "base.html" %}
|
|
{% import "macros/ui.html" as ui %}
|
|
|
|
{% block title %}{{ t(key="profile-title", lang=lang | default(value='sk')) }}{% endblock title %}
|
|
|
|
{% macro field(label, value) %}
|
|
<div class="space-y-1.5">
|
|
<label class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ label }}</label>
|
|
{% if value %}
|
|
<p class="text-sm text-on-surface/80 dark:text-on-surface-dark/80">{{ value }}</p>
|
|
{% else %}
|
|
<p class="text-sm italic text-on-surface/50 dark:text-on-surface-dark/50">{{ t(key="profile-not-set", lang=lang | default(value='sk')) }}</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endmacro field %}
|
|
|
|
{% block content %}
|
|
<div class="mx-auto max-w-2xl" x-data="{ editing: {% if error %}true{% else %}false{% endif %} }">
|
|
<h1 class="text-3xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="profile-title", lang=lang | default(value='sk')) }}</h1>
|
|
<p class="mt-2 text-sm text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="profile-intro", lang=lang | default(value='sk')) }}</p>
|
|
|
|
{% if saved %}
|
|
<div class="mt-4 rounded-radius border border-success bg-success/10 px-4 py-3 text-sm text-success" role="status">
|
|
{{ t(key="profile-saved", lang=lang | default(value='sk')) }}
|
|
</div>
|
|
{% endif %}
|
|
{% if error %}
|
|
{{ ui::alert_danger(message=t(key="profile-company-required", lang=lang | default(value='sk')), extra="mt-4") }}
|
|
{% endif %}
|
|
|
|
<!-- read-only view (default) -->
|
|
<div x-show="!editing" class="mt-6 space-y-6">
|
|
<fieldset class="space-y-2 rounded-radius border border-outline bg-surface p-6 dark:border-outline-dark dark:bg-surface-dark-alt">
|
|
<legend class="px-1 text-sm font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="account-type", lang=lang | default(value='sk')) }}</legend>
|
|
<div class="flex items-center gap-2">
|
|
{% if account_type == "company" %}
|
|
{{ ui::badge(label=t(key="account-company", lang=lang | default(value='sk')), variant="primary") }}
|
|
{% else %}
|
|
{{ ui::badge(label=t(key="account-personal", lang=lang | default(value='sk')), variant="neutral") }}
|
|
{% endif %}
|
|
<span class="text-xs text-on-surface/60 dark:text-on-surface-dark/60">{{ t(key="account-type-locked", lang=lang | default(value='sk')) }}</span>
|
|
</div>
|
|
</fieldset>
|
|
|
|
{% if account_type == "company" %}
|
|
<fieldset class="space-y-4 rounded-radius border border-outline bg-surface p-6 dark:border-outline-dark dark:bg-surface-dark-alt">
|
|
<legend class="px-1 text-sm font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="account-company-details", lang=lang | default(value='sk')) }}</legend>
|
|
{{ self::field(label=t(key="company-name", lang=lang | default(value='sk')), value=company_name) }}
|
|
<div class="grid gap-4 sm:grid-cols-3">
|
|
{{ self::field(label=t(key="company-ico", lang=lang | default(value='sk')), value=company_id) }}
|
|
{{ self::field(label=t(key="company-dic", lang=lang | default(value='sk')), value=tax_id) }}
|
|
{{ self::field(label=t(key="company-icdph", lang=lang | default(value='sk')), value=vat_id) }}
|
|
</div>
|
|
</fieldset>
|
|
{% endif %}
|
|
|
|
<fieldset class="space-y-4 rounded-radius border border-outline bg-surface p-6 dark:border-outline-dark dark:bg-surface-dark-alt">
|
|
<legend class="px-1 text-sm font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-contact", lang=lang | default(value='sk')) }}</legend>
|
|
{{ self::field(label=t(key="checkout-name", lang=lang | default(value='sk')), value=name) }}
|
|
{{ self::field(label=t(key="checkout-email", lang=lang | default(value='sk')), value=email) }}
|
|
{% if phone %}
|
|
{% set phone_full = phone_prefix | default(value='') %}
|
|
{% set phone_full = phone_full ~ ' ' ~ phone %}
|
|
{{ self::field(label=t(key="checkout-phone", lang=lang | default(value='sk')), value=phone_full) }}
|
|
{% else %}
|
|
{{ self::field(label=t(key="checkout-phone", lang=lang | default(value='sk')), value='') }}
|
|
{% endif %}
|
|
</fieldset>
|
|
|
|
<fieldset class="space-y-4 rounded-radius border border-outline bg-surface p-6 dark:border-outline-dark dark:bg-surface-dark-alt">
|
|
<legend class="px-1 text-sm font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-shipping", lang=lang | default(value='sk')) }}</legend>
|
|
{{ self::field(label=t(key="checkout-address", lang=lang | default(value='sk')), value=address) }}
|
|
<div class="grid gap-4 sm:grid-cols-3">
|
|
{{ self::field(label=t(key="checkout-city", lang=lang | default(value='sk')), value=city) }}
|
|
{{ self::field(label=t(key="checkout-zip", lang=lang | default(value='sk')), value=zip) }}
|
|
{{ self::field(label=t(key="checkout-country", lang=lang | default(value='sk')), value=country) }}
|
|
</div>
|
|
</fieldset>
|
|
|
|
{{ ui::button(label=t(key="profile-edit", lang=lang | default(value='sk')), type="button", size="px-6 py-2.5 text-sm", attrs='@click="editing = true"') }}
|
|
</div>
|
|
|
|
<!-- edit form -->
|
|
<form x-show="editing" x-cloak method="post" action="/account/profile" hx-boost="false" class="mt-6 space-y-6">
|
|
<!-- account type is fixed at registration and shown read-only -->
|
|
<fieldset class="space-y-2 rounded-radius border border-outline bg-surface p-6 dark:border-outline-dark dark:bg-surface-dark-alt">
|
|
<legend class="px-1 text-sm font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="account-type", lang=lang | default(value='sk')) }}</legend>
|
|
<div class="flex items-center gap-2">
|
|
{% if account_type == "company" %}
|
|
{{ ui::badge(label=t(key="account-company", lang=lang | default(value='sk')), variant="primary") }}
|
|
{% else %}
|
|
{{ ui::badge(label=t(key="account-personal", lang=lang | default(value='sk')), variant="neutral") }}
|
|
{% endif %}
|
|
<span class="text-xs text-on-surface/60 dark:text-on-surface-dark/60">{{ t(key="account-type-locked", lang=lang | default(value='sk')) }}</span>
|
|
</div>
|
|
</fieldset>
|
|
|
|
{% if account_type == "company" %}
|
|
<!-- company billing details (company accounts only) -->
|
|
<fieldset class="space-y-4 rounded-radius border border-outline bg-surface p-6 dark:border-outline-dark dark:bg-surface-dark-alt">
|
|
<legend class="px-1 text-sm font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="account-company-details", lang=lang | default(value='sk')) }}</legend>
|
|
<div class="space-y-1.5">
|
|
<label for="company_name" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="company-name", lang=lang | default(value='sk')) }}{{ ui::req() }}</label>
|
|
{{ ui::input(name="company_name", id="company_name", value=company_name | default(value=''), autocomplete="organization") }}
|
|
</div>
|
|
<div class="grid gap-4 sm:grid-cols-3">
|
|
<div class="space-y-1.5">
|
|
<label for="company_id" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="company-ico", lang=lang | default(value='sk')) }}{{ ui::req() }}</label>
|
|
{{ ui::input(name="company_id", id="company_id", value=company_id | default(value='')) }}
|
|
</div>
|
|
<div class="space-y-1.5">
|
|
<label for="tax_id" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="company-dic", lang=lang | default(value='sk')) }}{{ ui::req() }}</label>
|
|
{{ ui::input(name="tax_id", id="tax_id", value=tax_id | default(value='')) }}
|
|
</div>
|
|
<div class="space-y-1.5">
|
|
<label for="vat_id" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="company-icdph", lang=lang | default(value='sk')) }} <span class="text-on-surface/50 dark:text-on-surface-dark/50">({{ t(key="field-optional", lang=lang | default(value='sk')) }})</span></label>
|
|
{{ ui::input(name="vat_id", id="vat_id", value=vat_id | default(value='')) }}
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
{% endif %}
|
|
|
|
<!-- contact (name/email are managed by the login) -->
|
|
<fieldset class="space-y-4 rounded-radius border border-outline bg-surface p-6 dark:border-outline-dark dark:bg-surface-dark-alt">
|
|
<legend class="px-1 text-sm font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-contact", lang=lang | default(value='sk')) }}</legend>
|
|
<div class="grid gap-4 sm:grid-cols-2">
|
|
<div class="space-y-1.5">
|
|
<label for="first_name" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="profile-first-name", lang=lang | default(value='sk')) }}</label>
|
|
{{ ui::input(name="first_name", id="first_name", value=first_name | default(value=''), autocomplete="given-name") }}
|
|
</div>
|
|
<div class="space-y-1.5">
|
|
<label for="last_name" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="profile-last-name", lang=lang | default(value='sk')) }}</label>
|
|
{{ ui::input(name="last_name", id="last_name", value=last_name | default(value=''), autocomplete="family-name") }}
|
|
</div>
|
|
</div>
|
|
<div class="space-y-1.5">
|
|
<label class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-email", lang=lang | default(value='sk')) }}</label>
|
|
<p class="text-sm text-on-surface/80 dark:text-on-surface-dark/80">{{ email }}</p>
|
|
</div>
|
|
<div class="space-y-1.5">
|
|
<label for="phone" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-phone", lang=lang | default(value='sk')) }}</label>
|
|
<div class="flex gap-2">
|
|
<!-- editable combobox: type freely or pick from the dropdown -->
|
|
<div class="relative w-28 shrink-0" @click.outside="prefixOpen = false"
|
|
x-data="{ prefixOpen: false, prefix: '{{ phone_prefix | default(value='+421') }}', opts: [
|
|
{ v: '+421', l: '🇸🇰 +421' }, { v: '+420', l: '🇨🇿 +420' },
|
|
{ v: '+43', l: '🇦🇹 +43' }, { v: '+49', l: '🇩🇪 +49' },
|
|
{ v: '+48', l: '🇵🇱 +48' }, { v: '+36', l: '🇭🇺 +36' },
|
|
{ v: '+44', l: '🇬🇧 +44' }, { v: '+39', l: '🇮🇹 +39' }, { v: '+33', l: '🇫🇷 +33' }
|
|
], get filtered() { return this.opts.filter(o => !this.prefix || o.v.includes(this.prefix)) } }">
|
|
<input name="phone_prefix" type="text" x-model="prefix" @focus="prefixOpen = true" @input="prefixOpen = true"
|
|
aria-label="{{ t(key='checkout-phone', lang=lang | default(value='sk')) }}" autocomplete="tel-country-code" inputmode="tel"
|
|
class="w-full rounded-radius border border-outline bg-surface py-2 pl-3 pr-7 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
|
|
<button type="button" tabindex="-1" @click="prefixOpen = !prefixOpen"
|
|
class="absolute inset-y-0 right-0 flex w-7 items-center justify-center text-on-surface/60 dark:text-on-surface-dark/60">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
|
|
class="size-4 transition-transform" :class="prefixOpen && 'rotate-180'">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
|
|
</svg>
|
|
</button>
|
|
<ul x-show="prefixOpen" x-cloak x-transition
|
|
class="absolute z-20 mt-1 max-h-56 w-full overflow-auto rounded-radius border border-outline bg-surface p-1 shadow-lg dark:border-outline-dark dark:bg-surface-dark-alt">
|
|
<template x-for="o in filtered" :key="o.v">
|
|
<li><button type="button" @click="prefix = o.v; prefixOpen = false" x-text="o.l"
|
|
class="block w-full rounded-radius px-3 py-1.5 text-left text-sm text-on-surface transition hover:bg-surface-alt dark:text-on-surface-dark dark:hover:bg-surface-dark"></button></li>
|
|
</template>
|
|
</ul>
|
|
</div>
|
|
{{ ui::input(name="phone", id="phone", type="tel", value=phone | default(value=''), autocomplete="tel", placeholder="900 000 000", attrs='inputmode="tel"') }}
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<!-- default shipping address -->
|
|
<fieldset class="space-y-4 rounded-radius border border-outline bg-surface p-6 dark:border-outline-dark dark:bg-surface-dark-alt">
|
|
<legend class="px-1 text-sm font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-shipping", lang=lang | default(value='sk')) }}</legend>
|
|
<div class="space-y-1.5">
|
|
<label for="address" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-address", lang=lang | default(value='sk')) }}</label>
|
|
{{ ui::input(name="address", id="address", value=address | default(value=''), autocomplete="street-address") }}
|
|
</div>
|
|
<div class="grid gap-4 sm:grid-cols-3">
|
|
<div class="space-y-1.5">
|
|
<label for="city" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-city", lang=lang | default(value='sk')) }}</label>
|
|
{{ ui::input(name="city", id="city", value=city | default(value=''), autocomplete="address-level2") }}
|
|
</div>
|
|
<div class="space-y-1.5">
|
|
<label for="zip" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-zip", lang=lang | default(value='sk')) }}</label>
|
|
{{ ui::input(name="zip", id="zip", value=zip | default(value=''), autocomplete="postal-code") }}
|
|
</div>
|
|
<div class="space-y-1.5">
|
|
<label for="country" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-country", lang=lang | default(value='sk')) }}</label>
|
|
<div class="relative" @click.outside="countryOpen = false"
|
|
x-data="{ countryOpen: false, country: '{{ country | default(value='') }}', opts: [
|
|
{ v: '{{ t(key='country-sk', lang=lang | default(value='sk')) }}', l: '🇸🇰 {{ t(key='country-sk', lang=lang | default(value='sk')) }}' },
|
|
{ v: '{{ t(key='country-cz', lang=lang | default(value='sk')) }}', l: '🇨🇿 {{ t(key='country-cz', lang=lang | default(value='sk')) }}' },
|
|
{ v: '{{ t(key='country-at', lang=lang | default(value='sk')) }}', l: '🇦🇹 {{ t(key='country-at', lang=lang | default(value='sk')) }}' },
|
|
{ v: '{{ t(key='country-de', lang=lang | default(value='sk')) }}', l: '🇩🇪 {{ t(key='country-de', lang=lang | default(value='sk')) }}' },
|
|
{ v: '{{ t(key='country-pl', lang=lang | default(value='sk')) }}', l: '🇵🇱 {{ t(key='country-pl', lang=lang | default(value='sk')) }}' },
|
|
{ v: '{{ t(key='country-hu', lang=lang | default(value='sk')) }}', l: '🇭🇺 {{ t(key='country-hu', lang=lang | default(value='sk')) }}' }
|
|
], get filtered() { return this.opts.filter(o => !this.country || o.v.toLowerCase().includes(this.country.toLowerCase())) } }">
|
|
<input id="country" name="country" type="text" x-model="country" @focus="countryOpen = true" @input="countryOpen = true"
|
|
class="w-full rounded-radius border border-outline bg-surface py-2 pl-3 pr-8 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
|
|
<button type="button" tabindex="-1" @click="countryOpen = !countryOpen"
|
|
class="absolute inset-y-0 right-0 flex w-8 items-center justify-center text-on-surface/60 dark:text-on-surface-dark/60">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
|
|
class="size-4 transition-transform" :class="countryOpen && 'rotate-180'">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
|
|
</svg>
|
|
</button>
|
|
<ul x-show="countryOpen" x-cloak x-transition
|
|
class="absolute z-20 mt-1 max-h-56 w-full overflow-auto rounded-radius border border-outline bg-surface p-1 shadow-lg dark:border-outline-dark dark:bg-surface-dark-alt">
|
|
<template x-for="o in filtered" :key="o.v">
|
|
<li><button type="button" @click="country = o.v; countryOpen = false" x-text="o.l"
|
|
class="block w-full rounded-radius px-3 py-1.5 text-left text-sm text-on-surface transition hover:bg-surface-alt dark:text-on-surface-dark dark:hover:bg-surface-dark"></button></li>
|
|
</template>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<div class="flex items-center gap-3">
|
|
{{ ui::button(label=t(key="profile-save", lang=lang | default(value='sk')), type="submit", size="px-6 py-2.5 text-sm") }}
|
|
{{ ui::button(label=t(key="profile-cancel", lang=lang | default(value='sk')), type="button", variant="outline-secondary", size="px-6 py-2.5 text-sm", attrs='@click="editing = false"') }}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{% endblock content %}
|