wizarr/app/templates/admin/user_modal.html

<div class="relative modal-container"
     aria-labelledby="modal-title"
     role="dialog"
     aria-modal="true">
  <div class="fixed inset-0 modal-backdrop transition-opacity"></div>
  <div class="fixed inset-0 z-10 overflow-y-auto">
    <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
      <div class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl dark:bg-gray-800">
        <div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4 dark:bg-gray-800">
          <div class="flex justify-between items-center pb-3">
            <h2 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
              {{ _("Edit expiry") }} – {{ user.username or user.email }}
            </h2>
            <button type="button"
                    class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
                    onclick="document.getElementById('modal').classList.add('hidden')">
              <svg class="w-3 h-3"
                   aria-hidden="true"
                   xmlns="http://www.w3.org/2000/svg"
                   fill="none"
                   viewBox="0 0 14 14">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
              </svg>
              <span class="sr-only">Close modal</span>
            </button>
          </div>
          {% if user.identity_id and related_users and related_users|length > 1 %}
            <!-- Multi-server user management -->
            <div class="mb-6">
              <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">{{ _("Server-specific Expiry Management") }}</h3>
              <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                {{ _("This user exists on multiple servers. You can set different expiry dates for each server.") }}
              </p>
              <div class="space-y-4">
                {% for related_user in related_users %}
                  <div class="border border-gray-200 dark:border-gray-600 rounded-lg p-4">
                    <div class="flex items-center justify-between mb-3">
                      <div class="flex items-center">
                        {% if related_user.server %}
                          {{ related_user.server.server_type|server_name_tag(related_user.server.name) }}
                        {% else %}
                          {{ 'local'|server_type_tag }}
                        {% endif %}
                      </div>
                      <span class="text-xs text-gray-500 dark:text-gray-400">ID: {{ related_user.id }}</span>
                    </div>
                    <form hx-post="{{ url_for('admin.user_detail', db_id=related_user.id) }}"
                          class="flex items-end gap-3">
                      <div class="flex-1">
                        <label for="expires_{{ related_user.id }}"
                               class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                          {{ _("Expiry date") }}
                        </label>
                        <input id="expires_{{ related_user.id }}"
                               name="expires"
                               type="datetime-local"
                               value="{{ related_user.expires|default('', true) and related_user.expires.strftime('%Y-%m-%dT%H:%M') or '' }}"
                               class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary focus:border-primary block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white">
                      </div>
                      <button type="submit"
                              class="inline-flex items-center px-3 py-2.5 text-sm font-medium text-white bg-primary rounded-lg hover:bg-primary_hover focus:ring-4 focus:outline-none focus:ring-primary_focus dark:bg-primary dark:hover:bg-primary_hover dark:focus:ring-primary_focus">
                        {{ _("Update") }}
                      </button>
                    </form>
                    <div class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                      {% if related_user.expires %}
                        {{ _("Current expiry") }}: {{ related_user.expires|human_date }}
                      {% else %}
                        {{ _("No expiry set") }}
                      {% endif %}
                    </div>
                  </div>
                {% endfor %}
              </div>
              <!-- Global Notes section for multi-server users -->
              <div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-600">
                <h4 class="text-sm font-medium text-gray-900 dark:text-white mb-2">{{ _("Notes") }}</h4>
                <form hx-post="{{ url_for('admin.user_detail', db_id=user.id) }}"
                      class="space-y-3">
                  <div>
                    <textarea id="notes"
                              name="notes"
                              rows="3"
                              placeholder="{{ _('Add notes about this user...') }}"
                              class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary focus:border-primary block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white">{{ user.notes|default('', true) }}</textarea>
                  </div>
                  <div class="flex justify-end">
                    <button type="submit"
                            class="inline-flex items-center px-3 py-2 text-sm font-medium text-white bg-primary rounded-lg hover:bg-primary_hover focus:ring-4 focus:outline-none focus:ring-primary_focus dark:bg-primary dark:hover:bg-primary_hover dark:focus:ring-primary_focus">
                      {{ _("Update Notes") }}
                    </button>
                  </div>
                </form>
              </div>
            </div>
          {% else %}
            <!-- Single server user management -->
            <form hx-post="{{ url_for('admin.user_detail', db_id=user.id) }}"
                  class="space-y-4 md:space-y-6">
              <div>
                <label for="expires"
                       class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                  {{ _("Expiry date (leave blank for never)") }}
                </label>
                <input id="expires"
                       name="expires"
                       type="datetime-local"
                       value="{{ user.expires|default('', true) and user.expires.strftime('%Y-%m-%dT%H:%M') or '' }}"
                       class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary focus:border-primary block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white">
              </div>
              <div>
                <label for="notes"
                       class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ _("Notes") }}</label>
                <textarea id="notes"
                          name="notes"
                          rows="3"
                          placeholder="{{ _('Add notes about this user...') }}"
                          class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary focus:border-primary block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white">{{ user.notes|default('', true) }}</textarea>
              </div>
              <div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6 dark:bg-gray-800">
                <button type="submit"
                        class="inline-flex w-full justify-center rounded-md bg-primary px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-primary_hover sm:ml-3 sm:w-auto">
                  {{ _("Save") }}
                </button>
                <button type="button"
                        class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
                        onclick="document.getElementById('modal').classList.add('hidden')">{{ _("Cancel") }}</button>
              </div>
            </form>
          {% endif %}
          {% if invitation %}
            <!-- Additional invitation context -->
            <div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-600">
              <h4 class="text-sm font-medium text-gray-900 dark:text-white mb-2">{{ _("Invitation Details") }}</h4>
              <div class="text-xs text-gray-500 dark:text-gray-400 space-y-1">
                <div>
                  {{ _("Code") }}: <span class="font-mono">{{ invitation.code }}</span>
                </div>
                {% if invitation.duration %}<div>{{ _("Duration") }}: {{ invitation.duration }} {{ _("days") }}</div>{% endif %}
                {% if invitation.expires %}<div>{{ _("Invitation expires") }}: {{ invitation.expires|human_date }}</div>{% endif %}
              </div>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>