{# Plan 47 — create-invitation modal.
   State (showCreate, form, loading, createInvite) lives on the Alpine
   root in invites.js. The "owner" role option is only rendered for
   owners / server-admins — that decision is server-side via member_role.
   Chrome (teleport + backdrop + centered card) comes from the shared
   `modal()` macro — see admin/components/ui.html. #}
{% from 'admin/components/ui.html' import input, modal %}
{% call modal('showCreate', 'closeCreate()') %}
    <h3 class="text-[15px] font-semibold text-ink-100 tracking-tight mb-1">Create invitation</h3>
    <p class="text-[11px] text-ink-500 mb-5">You'll get a one-shot URL to share with this person.</p>

    <form @submit.prevent="createInvite()" class="space-y-4">
      <div class="space-y-1.5">
        <label class="block text-[11px] uppercase tracking-wider font-medium text-ink-500">Email<span class="text-red-400 ml-0.5">*</span></label>
        <input
          id="email"
          type="email"
          required
          placeholder="colleague@team.lan"
          x-model="form.email"
          class="w-full px-3 py-2 bg-black border border-white/[0.08] hover:border-white/[0.16] focus:border-cmdop-500 rounded-md text-[13px] text-ink-100 placeholder-ink-600 focus:outline-none focus:ring-1 focus:ring-cmdop-500/30 transition-colors"
        />
        <p class="text-[12px] text-ink-500">
          If this email already has an account, they'll just join this
          fleet — their password stays the same.
        </p>
      </div>

      {{ input("display_name", label="Display name (optional)", placeholder="Alice") }}

      <div class="space-y-1.5">
        <label class="block text-[11px] uppercase tracking-wider font-medium text-ink-500">Role<span class="text-red-400 ml-0.5">*</span></label>
        <select
          id="role"
          x-model="form.role"
          class="w-full px-3 py-2 bg-black border border-white/[0.08] hover:border-white/[0.16] focus:border-cmdop-500 rounded-md text-[13px] text-ink-100 focus:outline-none focus:ring-1 focus:ring-cmdop-500/30 transition-colors"
        >
          <option value="member">Member — can use the fleet</option>
          <option value="admin">Admin — can invite + manage members</option>
          <option value="guest">Guest — read-only</option>
          {% if member_role in ('owner', 'server-admin') %}
          <option value="owner">Owner — full control, can demote you</option>
          {% endif %}
        </select>
      </div>

      <div class="space-y-1.5">
        <label class="block text-[11px] uppercase tracking-wider font-medium text-ink-500">URL expires in</label>
        <select
          id="ttl"
          x-model="form.ttl"
          class="w-full px-3 py-2 bg-black border border-white/[0.08] hover:border-white/[0.16] focus:border-cmdop-500 rounded-md text-[13px] text-ink-100 focus:outline-none focus:ring-1 focus:ring-cmdop-500/30 transition-colors"
        >
          <option value="86400">1 day</option>
          <option value="259200">3 days</option>
          <option value="604800" selected>7 days (recommended)</option>
          <option value="2592000">30 days (maximum)</option>
        </select>
        <p class="text-[12px] text-ink-500">After this, the URL stops working. You can always create another.</p>
      </div>

      <div class="flex justify-end gap-3 pt-2">
        <button
          type="button"
          @click="closeCreate()"
          class="px-3 py-1.5 text-[13px] text-ink-400 hover:text-ink-100"
        >Cancel</button>
        <button
          type="submit"
          :disabled="loading"
          class="px-3 py-1.5 bg-white hover:bg-ink-100 text-black text-[13px] font-medium rounded-md disabled:opacity-50"
        >
          <span x-text="loading ? 'Creating…' : 'Create invitation'"></span>
        </button>
      </div>
    </form>
{% endcall %}