@ -1,7 +1,46 @@ 
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					< script  setup >  
					 
					 
					 
					< script  setup >  
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					import  InputError  from  '@/Components/InputError.vue' ;  
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					import  TextInput  from  '@/Components/TextInput.vue' ;  
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					import  Layout  from  '@/Layouts/Layout.vue' ;  
					 
					 
					 
					import  Layout  from  '@/Layouts/Layout.vue' ;  
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					import  {  Head  }  from  '@inertiajs/vue3' ;  
					 
					 
					 
					import  {  Head ,  useForm  }  from  '@inertiajs/vue3' ;  
				
			 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					import  {  ref  }  from  'vue' ;  
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					
 
					 
					 
					 
					
 
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					const  props  =  defineProps ( {  
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					    server :  {   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					        type :  Object ,   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					        required :  true   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					    }   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					} ) ;  
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					
 
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					const  isFocus  =  ref ( false ) ;  
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					const  form  =  useForm ( ) ;  
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					const  editForm  =  useForm ( {  name :  props . server . name  } ) ;  
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					
 
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					const  start  =  ( uuid )  =>  {  
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					  form . post ( route ( "servers.start" ,  uuid ) ) ;   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					}   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					
 
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					const  stop  =  ( uuid )  =>  {  
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					  form . post ( route ( "servers.stop" ,  uuid ) ) ;   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					}   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					
 
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					const  del  =  ( uuid )  =>  {  
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					  if ( prompt ( "Entrer le nom du server en confirmation." )  ==  props . server . name )  form . delete ( route ( "servers.destroy" ,  uuid ) ) ;   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					}  
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					
 
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					const  pub  =  ( uuid )  =>  {  
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					  if ( props . server . public )  form . post ( route ( "servers.public" ,  uuid ) ) ;   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					  else  if  ( prompt ( "Entrer le nom du server en confirmation." )  ==  props . server . name )  form . post ( route ( "servers.public" ,  uuid ) ) ;   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					}  
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					
 
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					const  edit  =  ( )  =>  {  
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					  console . log ( editForm . name ) ;   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					  editForm . post ( route ( "servers.update" ,  props . server . uuid ) ) ;   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					}  
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					
 
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					const  copie  =  ( )  =>  {  
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					  navigator . clipboard . writeText ( 'hosting.anulax.ch:'  +  props . server . ports [ 0 ] ) . then ( ( )  =>  alert ( "lien de connection copié!" ) )   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					}  
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					
 
					 
					 
					 
					
 
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					< / script >  
					 
					 
					 
					< / script >  
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					
 
					 
					 
					 
					
 
				
			 
			
		
	
	
		
		
			
				
					
						
						
						
							
								 
							 
						
					 
					 
					@ -11,7 +50,7 @@ import { Head } from '@inertiajs/vue3'; 
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					      <!--  En - tête  -- >   
					 
					 
					 
					      <!--  En - tête  -- >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					  < header  class = "my-10 text-center" >   
					 
					 
					 
					  < header  class = "my-10 text-center" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					    < h1  class = "text-4xl font-bold flex items-center justify-center gap-2 fade-in" >   
					 
					 
					 
					    < h1  class = "text-4xl font-bold flex items-center justify-center gap-2 fade-in" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					      Dashboard  -  Détails  du  Serveur   
					 
					 
					 
					      Dashboard  du  Serveur   
				
			 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 
					 
					 
					    < / h1 >   
					 
					 
					 
					    < / h1 >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					    < p  class = "text-gray-300 mt-4 fade-in" >   
					 
					 
					 
					    < p  class = "text-gray-300 mt-4 fade-in" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					      Gérez  et  visualisez  les  informations  clés  de  votre  serveur  en  un  coup  d ' œil .   
					 
					 
					 
					      Gérez  et  visualisez  les  informations  clés  de  votre  serveur  en  un  coup  d ' œil .   
				
			 
			
		
	
	
		
		
			
				
					
						
						
						
							
								 
							 
						
					 
					 
					@ -19,32 +58,36 @@ import { Head } from '@inertiajs/vue3'; 
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					  < / header >   
					 
					 
					 
					  < / header >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					
 
					 
					 
					 
					
 
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					  <!--  Cartes  d ' information  -- >   
					 
					 
					 
					  <!--  Cartes  d ' information  -- >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					  < main  class = "max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 mb-10  slide-up" >   
					 
					 
					 
					  < main  class = "max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 mb-6  slide-up" >   
				
			 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 
					 
					 
					    <!--  Carte  :  Informations  Générales  -- >   
					 
					 
					 
					    <!--  Carte  :  Informations  Générales  -- >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					    < div  class = "bg-gray-800 rounded-lg shadow-lg p-6" >   
					 
					 
					 
					    < div  class = "bg-gray-800 rounded-lg shadow-lg p-6" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					      < h2  class = "text-2xl font-semibold border-b border-gray-700 pb-2 mb-4 flex items-center gap-2" >   
					 
					 
					 
					      < h2  class = "text-2xl font-semibold border-b border-gray-700 pb-2 mb-4 flex items-center gap-2" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					        < img  src = "/icons/server-icon.svg"  alt = "Général"  class = "w-6 h-6 rotate-on-hover glow-on-hover  invert" >   
					 
					 
					 
					        < img  src = "/icons/server-icon.svg"  alt = "Général"  class = "w-6 h-6 rotate-on-hover invert" >   
				
			 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 
					 
					 
					        Informations  Générales   
					 
					 
					 
					        Informations  Générales   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					      < / h2 >   
					 
					 
					 
					      < / h2 >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					      < div  class = "space-y-3 text-sm" >   
					 
					 
					 
					      < div  class = "space-y-3 text-sm" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					        < div  class = "flex justify-between" >   
					 
					 
					 
					        < div  class = "flex justify-between" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					          < span  class = "font-medium" > Nom < / span >   
					 
					 
					 
					          < span  class = "font-medium" > Nom < / span >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					          < span  class = "text-green-400 font-bold" > Mon  Serveur  Minecraft < / span >   
					 
					 
					 
					          < span  class = "text-green-400 font-bold" > { {  props . server . name  } } < / span >   
				
			 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 
					 
					 
					        < / div >   
					 
					 
					 
					        < / div >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					        < div  class = "flex justify-between" >   
					 
					 
					 
					        < div  class = "flex justify-between" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					          < span  class = "font-medium" > Type  de  jeu < / span >   
					 
					 
					 
					          < span  class = "font-medium" > Type  de  jeu < / span >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					          < span > Minecraft < / span >   
					 
					 
					 
					          < span > { {  props . server . service . name  } } < / span >   
				
			 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					        < / div >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					        < div  class = "flex justify-between" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					          < span  class = "font-medium" > Public < / span >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					          < span > { {  props . server . public  ?  "Oui"  :  "Non"  } } < / span >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					        < / div >   
					 
					 
					 
					        < / div >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					        < div  class = "flex flex-col gap-2" >   
					 
					 
					 
					        < div  class = "flex flex-col gap-2" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					          < div  class = "flex justify-between items-center mb-1" >   
					 
					 
					 
					          < div  class = "flex justify-between items-center mb-1" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					            < div  class = "flex items-center gap-2" >   
					 
					 
					 
					            < div  class = "flex items-center gap-2" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					              < span  class = "font-medium" > Lien  d ' accès < / span >   
					 
					 
					 
					              < span  class = "font-medium" > Lien  de  connection  < / span >   
				
			 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 
					 
					 
					            < / div >   
					 
					 
					 
					            < / div >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					            < div  class = "flex items-center gap-2" >   
					 
					 
					 
					            < div  class = "flex items-center gap-2" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					              < a  href = "http://hosting.anulax.ch:25005"   class = "text-green-400 hover:underline" >   
					 
					 
					 
					              < p   class = "text-green-400 hover:underline" >   
				
			 
			
				
				
			
		
	
		
		
			
				
					
					 
					 
					 
					                hosting . anulax . ch : 25005   
					 
					 
					 
					                { {  props . server . ports . length  &&  props . server . status . id  <  3  ?  "hosting.anulax.ch:"  +  props . server . ports [ 0 ]  :  "Indisponible"  } }   
				
			 
			
				
				
			
		
	
		
		
			
				
					
					 
					 
					 
					              < / a >   
					 
					 
					 
					              < / p >   
				
			 
			
				
				
			
		
	
		
		
			
				
					
					 
					 
					 
					              < button  class = "bg-blue-500 hover:bg-blue-600 text-white font-bold p-1 rounded-lg shadow-lg glow-on-hover flex items-center" >   
					 
					 
					 
					              < button  v-show ="props.server.ports.length && props.server.status.id < 3" @click="copie" class= "bg-blue-500 hover:bg-blue-600 text-white font-bold p-1 rounded-lg shadow-lg glow-on-hover flex items-center">   
				
			 
			
				
				
			
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
			
				
					
					 
					 
					 
					                < img  src = "/icons/copy-icon.svg"  alt = "Copier"  class = "w-5 h-5 invert" >   
					 
					 
					 
					                < img  src = "/icons/copy-icon.svg"  alt = "Copier"  class = "w-5 h-5 invert" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					              < / button >   
					 
					 
					 
					              < / button >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					            < / div >   
					 
					 
					 
					            < / div >   
				
			 
			
		
	
	
		
		
			
				
					
						
						
						
							
								 
							 
						
					 
					 
					@ -57,57 +100,56 @@ import { Head } from '@inertiajs/vue3'; 
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					    <!--  Carte  :  Activité  -- >   
					 
					 
					 
					    <!--  Carte  :  Activité  -- >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					    < div  class = "bg-gray-800 rounded-lg shadow-lg p-6" >   
					 
					 
					 
					    < div  class = "bg-gray-800 rounded-lg shadow-lg p-6" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					      < h2  class = "text-2xl font-semibold border-b border-gray-700 pb-2 mb-4 flex items-center gap-2" >   
					 
					 
					 
					      < h2  class = "text-2xl font-semibold border-b border-gray-700 pb-2 mb-4 flex items-center gap-2" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					        < img  src = "/icons/stats-icon.svg"  alt = "Activité"  class = "w-6 h-6 rotate-on-hover glow-on-hover invert" >   
					 
					 
					 
					        < img  src = "/icons/stats-icon.svg"  alt = "Activité"  class = "w-6 h-6 rotate-on-hover invert" > Activité   
				
			 
			
				
				
			
		
	
		
		
			
				
					
					 
					 
					 
					        Activité   
					 
					 
					 
					 
				
			 
			
		
	
		
		
	
		
		
			
				
					
					 
					 
					 
					      < / h2 >   
					 
					 
					 
					      < / h2 >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					      < div  class = "space-y-3 text-sm mb-4" >   
					 
					 
					 
					      < div  class = "space-y-3 text-sm mb-4" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					        < div  class = "flex justify-between" >   
					 
					 
					 
					        < div  class = "flex justify-between" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					          < span  class = "font-medium" > Statut < / span >   
					 
					 
					 
					          < span  class = "font-medium" > Statut < / span >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					          < span  class = "text-green-400 font-bold" > Running < / span >   
					 
					 
					 
					          < span  class = "text-green-400 font-bold" > { {  props . server . status . title  } } < / span >   
				
			 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 
					 
					 
					        < / div >   
					 
					 
					 
					        < / div >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					        < div  class = "flex justify-between" >   
					 
					 
					 
					        < div  class = "flex justify-between" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					          < span  class = "font-medium" > Dernier  lancement  :  < / span >   
					 
					 
					 
					          < span  class = "font-medium" > Dernier  lancement < / span >   
				
			 
			
				
				
			
		
	
		
		
			
				
					
					 
					 
					 
					          < span  class = "text-green-400 font-bold" > 2024 - 02 - 15  10 : 00 < / span >   
					 
					 
					 
					          < span  class = "text-green-400 font-bold" > { {  props . server . start  ?  props . server . start  :  "Aucun"  } } < / span >   
				
			 
			
				
				
			
		
	
		
		
	
		
		
	
		
		
			
				
					
					 
					 
					 
					        < / div >   
					 
					 
					 
					        < / div >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					        < div  class = "flex justify-between" >   
					 
					 
					 
					        < div  class = "flex justify-between" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					          < span  class = "font-medium" > Dernier  arrêt  : < / span >   
					 
					 
					 
					          < span  class = "font-medium" > Dernier  arrêt  < / span >   
				
			 
			
				
				
			
		
	
		
		
			
				
					
					 
					 
					 
					          < span  class = "text-red-400 font-bold" > 2024 - 02 - 15  09 : 00 < / span >   
					 
					 
					 
					          < span  class = "text-red-400 font-bold" > { {  props . server . end  ?  props . server . end  :  "Aucun"  } } < / span >   
				
			 
			
				
				
			
		
	
		
		
	
		
		
	
		
		
			
				
					
					 
					 
					 
					        < / div >   
					 
					 
					 
					        < / div >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					      < / div >   
					 
					 
					 
					      < / div >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					      < div  class = "flex gap-3" >   
					 
					 
					 
					      < div  class = "flex gap-3" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					        < a  href = "#"  class = "bg-green-500 hover:bg-green-600 text-white font-bold p-2 rounded-lg shadow-lg glow-on-hover flex items-center gap-2" >   
					 
					 
					 
					        < div  @click ="start(props.server.uuid)"  v-if ="props.server.status.id >= 3" class= "bg-green-500 hover:bg-green-600 text-white font-bold p-2 rounded-lg shadow-lg glow-on-hover flex items-center gap-2">   
				
			 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 
					 
					 
					          < img  src = "/icons/start-icon.svg"  alt = "Start"  class = "w-5 h-5 invert" >   
					 
					 
					 
					          < img  src = "/icons/start-icon.svg"  alt = "Start"  class = "w-5 h-5 invert" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					        < / a >   
					 
					 
					 
					        < / div >   
				
			 
			
				
				
			
		
	
		
		
			
				
					
					 
					 
					 
					        < a  href = "#"   class = "bg-red-500 hover:bg-red-600 text-white font-bold p-2 rounded-lg shadow-lg glow-on-hover flex items-center gap-2" >   
					 
					 
					 
					        < div  @click ="stop(props.server.uuid)"  v -else   class = "bg-red-500 hover:bg-red-600 text-white font-bold p-2 rounded-lg shadow-lg glow-on-hover flex items-center gap-2" >   
				
			 
			
				
				
			
		
	
		
		
	
		
		
	
		
		
			
				
					
					 
					 
					 
					          < img  src = "/icons/stop-icon.svg"  alt = "Stop"  class = "w-5 h-5 invert" >   
					 
					 
					 
					          < img  src = "/icons/stop-icon.svg"  alt = "Stop"  class = "w-5 h-5 invert" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					        < / a >   
					 
					 
					 
					        < / div >   
				
			 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 
					 
					 
					      < / div >   
					 
					 
					 
					      < / div >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					    < / div >   
					 
					 
					 
					    < / div >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					      
					 
					 
					 
					      
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					    <!--  Carte  :  Hardware  -- >   
					 
					 
					 
					    <!--  Carte  :  Hardware  -- >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					    < div  class = "bg-gray-800 rounded-lg shadow-lg p-6" >   
					 
					 
					 
					    < div  class = "bg-gray-800 rounded-lg shadow-lg p-6" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					      < h2  class = "text-2xl font-semibold border-b border-gray-700 pb-2 mb-4 flex items-center gap-2" >   
					 
					 
					 
					      < h2  class = "text-2xl font-semibold border-b border-gray-700 pb-2 mb-4 flex items-center gap-2" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					        < img  src = "/icons/hardware-icon.svg"  alt = "Hardware"  class = "w-6 h-6 rotate-on-hover glow-on-hover  invert" >   
					 
					 
					 
					        < img  src = "/icons/hardware-icon.svg"  alt = "Hardware"  class = "w-6 h-6 rotate-on-hover invert" >   
				
			 
			
				
				
			
		
	
		
		
			
				
					
					 
					 
					 
					        Hardware   
					 
					 
					 
					        Hardware ( fake )   
				
			 
			
				
				
			
		
	
		
		
	
		
		
	
		
		
			
				
					
					 
					 
					 
					      < / h2 >   
					 
					 
					 
					      < / h2 >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					      < div  class = "space-y-3 text-sm" >   
					 
					 
					 
					      < div  class = "space-y-3 text-sm" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					        < div  class = "flex justify-between" >   
					 
					 
					 
					        < div  class = "flex justify-between" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					          < span  class = "font-medium" > CPU  :  < / span >   
					 
					 
					 
					          < span  class = "font-medium" > CPUs  < / span >   
				
			 
			
				
				
			
		
	
		
		
			
				
					
					 
					 
					 
					          < span > Intel  Xeon  E5 < / span >   
					 
					 
					 
					          < span > 1 < / span >   
				
			 
			
				
				
			
		
	
		
		
	
		
		
	
		
		
			
				
					
					 
					 
					 
					        < / div >   
					 
					 
					 
					        < / div >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					        < div  class = "flex justify-between" >   
					 
					 
					 
					        < div  class = "flex justify-between" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					          < span  class = "font-medium" > RAM  : < / span >   
					 
					 
					 
					          < span  class = "font-medium" > Memory < / span >   
				
			 
			
				
				
			
		
	
		
		
			
				
					
					 
					 
					 
					          < span > 16 GB < / span >   
					 
					 
					 
					          < span > 4 GB < / span >   
				
			 
			
				
				
			
		
	
		
		
	
		
		
	
		
		
			
				
					
					 
					 
					 
					        < / div >   
					 
					 
					 
					        < / div >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					        < div  class = "flex justify-between" >   
					 
					 
					 
					        < div  class = "flex justify-between" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					          < span  class = "font-medium" > Stockage  :  < / span >   
					 
					 
					 
					          < span  class = "font-medium" > Stockage < / span >   
				
			 
			
				
				
			
		
	
		
		
			
				
					
					 
					 
					 
					          < span > 10 GB  SSD  < / span >   
					 
					 
					 
					          < span > 10 GB < / span >   
				
			 
			
				
				
			
		
	
		
		
	
		
		
	
		
		
			
				
					
					 
					 
					 
					        < / div >   
					 
					 
					 
					        < / div >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					      < / div >   
					 
					 
					 
					      < / div >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					    < / div >   
					 
					 
					 
					    < / div >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					  < / main >   
					 
					 
					 
					  < / main >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					  <!--  Section  Actions  en  haut  -- >   
					 
					 
					 
					  <!--  Section  Actions  en  haut  -- >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					  < section  class = "max-w-6xl mx-auto mb-6  fade-in" >   
					 
					 
					 
					  < section  class = "max-w-6xl mx-auto mb-10  fade-in" >   
				
			 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 
					 
					 
					    < div  class = "flex justify-between items-center bg-gray-800 p-4 rounded-lg shadow-lg" >   
					 
					 
					 
					    < div  class = "flex justify-between items-center bg-gray-800 p-4 rounded-lg shadow-lg" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					      < div  class = "flex gap-3" >   
					 
					 
					 
					      < div  class = "flex gap-3" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					        < button  class = "bg-blue-500 hover:bg-blue-600 text-white font-bold p-2 rounded-lg shadow-lg glow-on-hover flex items-center" >   
					 
					 
					 
					        < button  class = "bg-blue-500 hover:bg-blue-600 text-white font-bold p-2 rounded-lg shadow-lg glow-on-hover flex items-center" >   
				
			 
			
		
	
	
		
		
			
				
					
						
						
						
							
								 
							 
						
					 
					 
					@ -115,16 +157,28 @@ import { Head } from '@inertiajs/vue3'; 
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					        < / button >   
					 
					 
					 
					        < / button >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					      < / div >   
					 
					 
					 
					      < / div >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					      <!--  Actions  de  gestion  -- >   
					 
					 
					 
					      <!--  Actions  de  gestion  -- >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					      < div  class = "flex gap-3" >   
					 
					 
					 
					      < div  class = "flex gap-3 items-center" >   
				
			 
			
				
				
			
		
	
		
		
			
				
					
					 
					 
					 
					        < a  href = "#"  class = "bg-blue-500 hover:bg-blue-600 text-white font-bold p-2 rounded-lg shadow-lg glow-on-hover flex items-center gap-2" >   
					 
					 
					 
					        < form  v-show ="isFocus" @submit.prevent="edit" >   
				
			 
			
				
				
			
		
	
		
		
	
		
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					          < TextInput   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					           v - model = "editForm.name"   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					           type = "text"   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					           class = "w-full px-3 py-1 rounded bg-gray-700 text-white"   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					          / >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					          < button  type = "submit" > < / button >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					          < InputError  :message ="form.errors.name"  class = "text-left mt-1" > < / InputError >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					        < / form >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					        < button  @ click = "isFocus = !isFocus"  class = "bg-blue-500 hover:bg-blue-600 text-white font-bold p-2 rounded-lg shadow-lg glow-on-hover flex items-center gap-2" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					          < img  src = "/icons/edit-icon.svg"  alt = "Edit"  class = "w-5 h-5 invert" >   
					 
					 
					 
					          < img  src = "/icons/edit-icon.svg"  alt = "Edit"  class = "w-5 h-5 invert" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					        < / a >   
					 
					 
					 
					        < / button >   
				
			 
			
				
				
			
		
	
		
		
			
				
					
					 
					 
					 
					        < button  class = "bg-red-500 hover:bg-red-600 text-white font-bold p-2 rounded-lg shadow-lg glow-on-hover flex items-center" >   
					 
					 
					 
					        < button  v-if ="props.server.public" @click="pub(props.server.uuid)" class="bg-blue-500 hover:bg-blue-600 text-white font-bold p-2 rounded-lg shadow-lg glow-on-hover flex items-center" >   
				
			 
			
				
				
			
		
	
		
		
	
		
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					          < img  src = "/icons/lock.svg"  alt = "Rendre Privé"  class = "w-5 h-5 invert" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					        < / button >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					 
					 
					 
					 
					        < button  v -else  @click ="pub(props.server.uuid)"  class = "bg-red-500 hover:bg-red-600 text-white font-bold p-2 rounded-lg shadow-lg glow-on-hover flex items-center" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					          < img  src = "/icons/public-icon.svg"  alt = "Rendre public"  class = "w-5 h-5 invert" >   
					 
					 
					 
					          < img  src = "/icons/public-icon.svg"  alt = "Rendre public"  class = "w-5 h-5 invert" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					        < / button >   
					 
					 
					 
					        < / button >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					        < a  href = "#"  class = "bg-red-500 hover:bg-red-600 text-white font-bold p-2 rounded-lg shadow-lg glow-on-hover flex items-center gap-2" >   
					 
					 
					 
					        < button  @click ="del(props.server.uuid) "  class = "bg-red-500 hover:bg-red-600 text-white font-bold p-2 rounded-lg shadow-lg glow-on-hover flex items-center gap-2" >   
				
			 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 
					 
					 
					          < img  src = "/icons/delete-icon.svg"  alt = "Delete"  class = "w-5 h-5 invert" >   
					 
					 
					 
					          < img  src = "/icons/delete-icon.svg"  alt = "Delete"  class = "w-5 h-5 invert" >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					        < / a >   
					 
					 
					 
					        < / button >   
				
			 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 
					 
					 
					      < / div >   
					 
					 
					 
					      < / div >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					    < / div >   
					 
					 
					 
					    < / div >   
				
			 
			
		
	
		
		
			
				
					
					 
					 
					 
					  < / section >   
					 
					 
					 
					  < / section >