@if(isLoading()){
<div class="spinner">
  <span class="loading loading-spinner loading-xl"></span>
  <p>Chargement ...</p>
</div>
}
@if(!isLoading() && nasaPOTD()){
  @if(nasaPOTD()?.media_type=="image"){
  <div class="hero bg-base-200 min-h-screen">
    <div class="hero-content flex-col lg:flex-col">
      <img src={{nasaPOTD()?.url}} class="max-w-mid rounded-lg shadow-2xl" alt="{{nasaPOTD()?.explanation}}" />
      <div>
        <h1 class="text-5xl font-bold">{{nasaPOTD()?.title}}</h1>
        <p class="text-2x2 font-semibold">{{nasaPOTD()?.copyright}}</p>
        <p class="py-6">
          {{nasaPOTD()?.explanation}}
        </p>
      </div>
    </div>
  </div>
  }
  @if(nasaPOTD()?.media_type==="video"){
    <div class="videocontainer flex justify-center w-full mt-20">
      <video class="rounded-md" controls>
      <source src="{{nasaPOTD()!.url}}" type="video/mp4">
      </video>
  </div>
  }

}
@if(!isLoading() && !nasaPOTD()){
<p>Impossible de charger la vidéo.</p>
}