|
|
|
|
@@ -3,8 +3,19 @@
|
|
|
|
|
|
|
|
|
|
{% 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">
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
@@ -17,7 +28,60 @@
|
|
|
|
|
{{ ui::alert_danger(message=t(key="profile-company-required", lang=lang | default(value='sk')), extra="mt-4") }}
|
|
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
|
<form method="post" action="/account/profile" hx-boost="false" class="mt-6 space-y-6">
|
|
|
|
|
<!-- 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>
|
|
|
|
|
@@ -59,9 +123,15 @@
|
|
|
|
|
<!-- 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="space-y-1.5">
|
|
|
|
|
<label class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-name", lang=lang | default(value='sk')) }}</label>
|
|
|
|
|
<p class="text-sm text-on-surface/80 dark:text-on-surface-dark/80">{{ name }}</p>
|
|
|
|
|
<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>
|
|
|
|
|
@@ -149,7 +219,10 @@
|
|
|
|
|
</div>
|
|
|
|
|
</fieldset>
|
|
|
|
|
|
|
|
|
|
{{ ui::button(label=t(key="profile-save", lang=lang | default(value='sk')), type="submit", size="px-6 py-2.5 text-sm") }}
|
|
|
|
|
<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 %}
|
|
|
|
|
|