{% extends "_market/_layouts/main" %}

{% set title = 'My Details'|t('market') %}

{% set breadcrumbs = [
    {
        url: url('market/settings'),
        label: 'Settings'|t('market')
    },
    {
        url: url('market/settings/details'),
        label: title
    }
] %}

{% block main %}
    {% set user = user ?? currentUser %}

    <div class="py-6">
        {% include '_market/settings/_nav.html' %}

        <form method="post" class="mt-6">
            {{ csrfInput() }}
            {{ actionInput('users/save-user') }}
            {{ hiddenInput('userId', user.id) }}

            {{ hiddenInput('successMessage', 'Details updated.'|hash) }}
            {{ hiddenInput('failMessage', 'Couldn’t update details.'|hash) }}

            <div x-data="{
                     existingEmail: '{{ currentUser.email }}',
                     newEmail: '{{ user.email }}',
                 }"
                 class="shadow rounded-md overflow-hidden"
            >
                <div class="bg-white py-6 px-4 sm:p-6">
                    <div>
                        <h2 class="text-lg leading-6 font-medium text-gray-900">Update your details</h2>
                        <p class="mt-1 text-sm text-gray-500">You can change your name or update the email address that you sign in with.</p>
                    </div>

                    <div class="mt-6 grid grid-cols-4 gap-6">

                        {# First name #}
                        {% set firstNameErrors = user.getErrors('firstName') %}
                        <div class="col-span-4 sm:col-span-2">
                            <label for="firstName" class="block text-sm font-medium text-gray-700">First name</label>
                            <div class="mt-1 relative rounded-md shadow-sm">
                                <input type="text"
                                       id="firstName"
                                       name="firstName"
                                       value="{{ user.firstName }}"
                                       class="block w-full shadow-sm sm:text-sm rounded-md {{ firstNameErrors ? 'pr-10 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500' : 'border-gray-300 focus:ring-action-500 focus:border-action-500' }}"
                                >
                                {% if firstNameErrors %}
                                    <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                        {# Heroicon name: solid/exclamation-circle #}
                                        <svg class="h-5 w-5 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                        </svg>
                                    </div>
                                {% endif %}
                            </div>
                            {% for error in firstNameErrors %}
                                <p class="mt-2 text-sm text-red-600">{{ error }}</p>
                            {% endfor %}
                        </div>

                        {# Last name #}
                        {% set lastNameErrors = user.getErrors('lastName') %}
                        <div class="col-span-4 sm:col-span-2">
                            <label for="lastName" class="block text-sm font-medium text-gray-700">Last name</label>
                            <div class="mt-1 relative rounded-md shadow-sm">
                                <input type="text"
                                       id="lastName"
                                       name="lastName"
                                       value="{{ user.lastName }}"
                                       class="block w-full shadow-sm sm:text-sm rounded-md {{ lastNameErrors ? 'pr-10 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500' : 'border-gray-300 focus:ring-action-500 focus:border-action-500' }}"
                                >
                                {% if lastNameErrors %}
                                    <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                        {# Heroicon name: solid/exclamation-circle #}
                                        <svg class="h-5 w-5 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                        </svg>
                                    </div>
                                {% endif %}
                            </div>
                            {% for error in lastNameErrors %}
                                <p class="mt-2 text-sm text-red-600">{{ error }}</p>
                            {% endfor %}
                        </div>

                        {# Email #}
                        {% set emailErrors = user.getErrors('email') %}
                        <div class="col-span-4 sm:col-span-2">
                            <label for="email" class="block text-sm font-medium text-gray-700">Email address</label>
                            <template x-if="newEmail !== existingEmail">
                                <input x-ref="emailInput"
                                       type="hidden"
                                       name="email"
                                       value="{{ user.email }}"
                                >
                            </template>
                            <div class="mt-1 relative rounded-md shadow-sm">
                                <input type="email"
                                       id="email"
                                       x-model="newEmail"
                                       x-on:keyup="$refs.emailInput.value = newEmail"
                                       value="{{ user.email }}"
                                       class="block w-full shadow-sm sm:text-sm rounded-md {{ emailErrors ? 'pr-10 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500' : 'border-gray-300 focus:ring-action-500 focus:border-action-500' }}"
                                >
                                {% if emailErrors %}
                                    <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                        {# Heroicon name: solid/exclamation-circle #}
                                        <svg class="h-5 w-5 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                        </svg>
                                    </div>
                                {% endif %}
                            </div>
                            {% for error in emailErrors %}
                                <p class="mt-2 text-sm text-red-600">{{ error }}</p>
                            {% endfor %}
                        </div>


                        {# Password #}
                        {% set passwordErrors = user.getErrors('currentPassword') %}
                        <div x-show="newEmail !== existingEmail"
                             x-cloak
                             class="col-span-4 sm:col-span-2"
                        >
                            <label for="currentPassword" class="block text-sm font-medium text-gray-700">Password</label>
                            <div class="mt-1 relative rounded-md shadow-sm">
                                <input type="password"
                                       id="currentPassword"
                                       name="currentPassword"
                                       class="block w-full shadow-sm sm:text-sm rounded-md {{ passwordErrors ? 'pr-10 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500' : 'border-gray-300 focus:ring-action-500 focus:border-action-500' }}"
                                >
                                {% if passwordErrors %}
                                    <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                        {# Heroicon name: solid/exclamation-circle #}
                                        <svg class="h-5 w-5 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                        </svg>
                                    </div>
                                {% endif %}
                            </div>
                            {% for error in passwordErrors %}
                                <p class="mt-2 text-sm text-red-600">{{ error }}</p>
                            {% endfor %}
                        </div>

                    </div>
                </div>
                <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
                    <button type="submit"
                            class="px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-action-600 hover:bg-action-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-action-500"
                    >
                        Save
                    </button>
                </div>
            </div>
        </form>

    </div>
{% endblock %}