{% form_theme form with app_form_themes() only %}

<div {{ attributes }}>
    {{ form_start(form, {
        attr: {
            class: 'mt-5 grid gap-4',
            'data-model': 'on(input)|*',
            'data-action': 'live#action:prevent',
            'data-live-action-param': 'submitLogin',
            novalidate: 'true'
        }
    }) }}
        <div class="grid gap-2">
            {{ form_label(form.email, null, {'label_attr': {'class': 'text-sm font-medium text-label'}}) }}
            {{ form_widget(form.email, {'attr': {
                class: 'h-12 bg-surface px-5 text-foreground placeholder:text-foreground-subtle ring-1 ring-inset ring-input-border focus:ring-1 focus:ring-inset focus:ring-accent'
            }}) }}
            <div class="text-sm text-error-foreground">{{ form_errors(form.email) }}</div>
        </div>
        <div class="grid gap-2">
            {{ form_label(form.password, null, {'label_attr': {'class': 'text-sm font-medium text-label'}}) }}
            {{ form_widget(form.password, {'attr': {
                class: 'h-12 bg-surface px-5 text-foreground placeholder:text-foreground-subtle ring-1 ring-inset ring-input-border focus:ring-1 focus:ring-inset focus:ring-accent'
            }}) }}
            <div class="text-sm text-error-foreground">{{ form_errors(form.password) }}</div>
        </div>
        <div class="flex flex-wrap items-center justify-between gap-3 pt-1 text-sm text-foreground-muted">
            <label class="inline-flex items-center gap-2">
                {{ form_widget(form.rememberMe, {'attr': {'class': 'border-control-border text-accent focus:ring-0'}}) }}
                <span>{{ form.rememberMe.vars.label|trans({}, form.rememberMe.vars.translation_domain) }}</span>
            </label>
            <a href="{{ path('app_forgot_password') }}" class="underline decoration-transparent underline-offset-4 transition hover:decoration-current">{{ 'security.login.forgot_password'|trans }}</a>
        </div>
        <button
            type="submit"
            title="{{ 'security.login.submit'|trans }}"
            class="mt-2 inline-flex min-h-12 items-center justify-center bg-foreground px-6 text-sm font-medium uppercase tracking-button text-on-foreground transition hover:bg-accent disabled:cursor-not-allowed disabled:bg-disabled"
        >
            {{ 'security.login.submit'|trans }}
        </button>
        <div class="hidden">{{ form_rest(form) }}</div>
    {{ form_end(form) }}
</div>
