{% trans_default_domain 'admin' %}

<div {{ attributes }}>

    <div class="mx-auto max-w-2xl space-y-16 sm:space-y-20 lg:mx-0 lg:max-w-none">
        <div>
            <h2 class="text-base font-semibold leading-7 text-gray-900">Stammdaten</h2>
            <p class="mt-1 text-sm leading-6 text-gray-500">Die Stammdaten werden zu Ihrem Profil auf der Webseite veröffentlicht.</p>

            <dl class="mt-6 space-y-6 divide-y divide-gray-200 border-t border-gray-300 text-sm leading-6">

                {% for property in ['name', 'phone', 'fax', 'mobile', 'email', 'website', 'street', 'postalCode', 'city', 'text'] %}
                    <div class="pt-6 sm:flex">
                        <dt class="font-medium text-gray-900 sm:w-64 sm:flex-none sm:pr-6">{{ "hosts.label.#{property}"|trans }}</dt>
                        <dd class="mt-1 flex justify-between gap-x-6 sm:mt-0 sm:flex-auto">

                            {% if property == isEditing %}
                                <form class="flex items-center space-x-2 w-full">
                                    {% set error = this.getError("dto.#{property}") %}

                                    <div class="flex-1">
                                        <label for="{{ "host_#{property}" }}"
                                               class="sr-only">{{ "hosts.label.#{property}"|trans }}</label>

                                        {% if 'text' == property %}
                                            <textarea class="py-1" data-model="{{ "dto.#{property}" }}"
                                                      id="{{ "host_#{property}" }}"></textarea>
                                        {% else %}
                                            <input type="text" class="py-1" data-model="{{ "dto.#{property}" }}"
                                                   autofocus id="{{ "host_#{property}" }}"/>
                                        {% endif %}

                                        {% if error %}
                                            <p class="mt-2 text-sm text-red-600">{{ error.message }}</p>
                                        {% endif %}
                                    </div>

                                    <twig:Admin:Button variant="primary" size="sm" type="submit" data-action="live#action:prevent" data-live-action-param="save">Speichern</twig:Admin:Button>

                                </form>

                            {% else %}

                                <div class="text-gray-900">{{ attribute(dto, property) }}</div>

                                <button class="font-semibold text-primary-600 hover:text-primary-500"
                                        data-action="live#action"
                                        data-live-action-param="edit"
                                        data-live-property-param="{{ property }}"
                                >
                                    Bearbeiten
                                </button>

                            {% endif %}

                        </dd>
                    </div>
                {% endfor %}

                <div class="pt-6 sm:flex">
                    <dt class="font-medium text-gray-900 sm:w-64 sm:flex-none sm:pr-6">{{ "hosts.label.logo"|trans }}</dt>
                    <dd class="mt-1 flex justify-between gap-x-6 sm:mt-0 sm:flex-auto">

                        {% if uploadLogo %}
                            <form class="flex items-center space-x-2 w-full">
                                {% set error = this.getError("logo") %}

                                <div class="flex-1">
                                    <label for="logo" class="sr-only">{{ "hosts.label.logo"|trans }}</label>

                                    <input type="file" id="logo" name="logo"/>

                                    {% if error %}
                                        <p class="mt-2 text-sm text-red-600">{{ error.message }}</p>
                                    {% endif %}
                                </div>

                                <twig:Admin:Button variant="primary" size="sm" type="submit" data-action="live#action" data-live-action-param="files(logo)|upload">Speichern</twig:Admin:Button>

                            </form>

                        {% else %}

                            {% if host.logo %}
                                {{ contao_figure(host.logo | to_filesystem_item, picture_config({
                                    width: 200,
                                    height: 80,
                                    resizeMode: 'box',
                                    densities: '1x, 2x'
                                })) }}
                            {% else %}

                                <div class="flex">
                                    <div class="flex-shrink-0">
                                        <span class="block h-5 w-5 text-yellow-600 dark:text-yellow-300"><twig:ux:icon name="ph:warning" /></span>
                                    </div>
                                    <p class="ml-2 text-sm leading-5 text-yellow-700 dark:text-yellow-200">
                                        Es ist kein Logo vorhanden.
                                    </p>
                                </div>

                            {% endif %}

                            <button class="font-semibold text-primary-600 hover:text-primary-500"
                                    data-action="live#action"
                                    data-live-action-param="showUploadLogo"
                            >
                                Bearbeiten
                            </button>

                        {% endif %}

                    </dd>
                </div>

            </dl>
        </div>

        <div>
            <h2 class="text-base font-semibold leading-7 text-gray-900">Team-Mitglieder</h2>
            <p class="mt-1 text-sm leading-6 text-gray-500">Alle Team-Mitglieder haben Zugriff auf alle Ferienpass-Angebote. Wenn Sie viele Zugänge benötigen, fragen Sie nach, ob wir Ihren Account in Sparten aufteilen können.</p>

            <ul role="list" class="mt-6 divide-y divide-gray-200 border-t border-gray-300 text-sm leading-6">
                {% for user in host.users %}
                    <li class="py-6 leading-5">
                        <span class="font-medium text-gray-900">{{ user.name }}</span><br>
                        <span class="text-gray-500">{{ user.email }}</span>
                    </li>
                {% endfor %}
            </ul>

            {% if inviteConfirmation %}
                <twig:Cms:Alert type="confirm" class="mb-6 shadow border border-green-700/30" message="{{ inviteConfirmation }}"/>
            {% endif %}

            <div class="flex border-t border-gray-200 pt-6">

                {% if addMember %}

                    {% set error = this.getError("inviteeEmail") %}

                    <div class="flex items-center space-x-2">
                        <div>
                            <label for="invitee_email" class="sr-only">E-Mail-Adresse</label>
                            <div class="relative">
                                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                    <twig:ux:icon name="ph:envelope" class="h-5 w-5 text-gray-400" aria-hidden="true" />
                                </div>
                                <input type="email" data-model="inviteeEmail" id="invitee_email"
                                       class="py-1.5 pl-10 placeholder:text-gray-400" placeholder="you@example.com">
                            </div>

                            {% if error %}
                                <p class="mt-2 text-sm text-red-600">{{ error.message }}</p>
                            {% endif %}
                        </div>

                        <twig:Admin:Button variant="primary" type="submit" data-action="live#action:prevent" data-live-action-param="invite">Einladung versenden</twig:Admin:Button>
                    </div>

                {% else %}

                    <button type="button"
                            data-action="live#action"
                            data-live-action-param="showAddMember"
                            class="text-sm font-semibold leading-6 text-primary-600 hover:text-primary-500">
                        <span aria-hidden="true">+</span> Team-Mitglied ergänzen
                    </button>

                {% endif %}

            </div>
        </div>

    </div>

</div>
