export const GrantDrawer = (
  { user, allApps }: { user: any; allApps: any[] },
) => {
  return (
    <div style="margin-top: 1rem; padding: 1.25rem; background: var(--surface-muted); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);">
      <h4 style="margin: 0 0 0.75rem 0; font-size: 0.95rem; color: var(--text-primary);">
        Assign / Update Application Access
      </h4>
      <form
        id="grantAccessForm"
        onsubmit={`handleGrantAccess(event, '${user.id}')`}
        style="display: flex; gap: 0.8rem; align-items: flex-end; flex-wrap: wrap;"
      >
        <div style="flex: 2; min-width: 200px;">
          <label style="display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.3rem; color: var(--text-secondary);">
            Application
          </label>
          <select
            id="grantAppId"
            onchange="updateRoleOptions()"
            required
            style="width: 100%;"
          >
            {allApps.map((app) => (
              <option value={app.id}>
                {app.name} ({app.spiffe_id})
              </option>
            ))}
          </select>
        </div>

        <div style="flex: 1; min-width: 140px;">
          <label style="display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.3rem; color: var(--text-secondary);">
            Assigned Role
          </label>
          <select
            id="grantRole"
            required
            style="width: 100%;"
          >
            {/* Dynamically populated */}
          </select>
        </div>

        <button
          type="submit"
          class="btn-primary"
          style="min-height: 44px;"
        >
          Save Grant
        </button>
      </form>
    </div>
  );
};