@if (estadoCaso === 'Finalizado') {
  <section class="relative isolate overflow-hidden bg-white px-6 py-24 sm:py-32 lg:px-8">
    <div class="absolute inset-0 -z-10 bg-[radial-gradient(45rem_50rem_at_top,theme(colors.indigo.100),white)] opacity-20"></div>
    <div class="absolute inset-y-0 right-1/2 -z-10 mr-16 w-[200%] origin-bottom-left skew-x-[-30deg] bg-white shadow-xl shadow-indigo-600/10 ring-1 ring-indigo-50 sm:mr-28 lg:mr-0 xl:mr-16 xl:origin-center"></div>
    <div class="mx-auto max-w-2xl lg:max-w-4xl">
     
      <div class="flex justify-center items-center">
        <img src="/assets/img/logodatatronica.png" alt="">
      </div>

      <figure class="mt-10">
        <blockquote class="text-center text-xl font-semibold leading-8 text-gray-900 sm:text-2xl sm:leading-9">
          <p>Estimado Cliente,</p>
          <p>Le informamos que la etapa ha sido concluida. Agradecemos sinceramente la oportunidad de haber colaborado con usted en este proceso.</p>
        </blockquote>
        <figcaption class="mt-10">
          <!-- <img class="mx-auto h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> -->
          <div class="mt-4 flex items-center justify-center space-x-3 text-base">
            <div class="font-semibold text-gray-900">Saludos Cordiales</div>
            <svg viewBox="0 0 2 2" width="3" height="3" aria-hidden="true" class="fill-gray-900">
              <circle cx="1" cy="1" r="1" />
            </svg>
            <div class="text-gray-600">Datatronica</div>
          </div>
        </figcaption>
      </figure>
    </div>
  </section>

  
  
}

@else {
  <div class="overflow-auto p-16 max-sm:px-4">
    <div class="grid grid-cols-6 mb-5">
      <div class="col-span-6 text-center mb-8">
        <img src="/assets/img/logodatatronica.png" alt="">
      </div>
  
      <div class="col-span-6">
        <div id="alert-additional-content-5"
          class="p-4  border border-gray-300 rounded-lg bg-gray-50 dark:border-gray-600 dark:bg-gray-800" role="alert">
          <div class="flex items-center">
            <svg class="flex-shrink-0 w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
              fill="currentColor" viewBox="0 0 20 20">
              <path
                d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
            </svg>
            <span class="sr-only">Info</span>
            <h3 class="text-lg font-medium">DESARROLLO</h3>
          </div>
          <div class="mt-2 mb-4 text-sm">
            <p>En esta sección se muestran toda las descripciones del Equipo de desarrollo</p>
          </div>
  
          <div class="flow-root">
            <dl class="-my-3 divide-y divide-gray-100 text-sm">
  
              <div class="grid grid-cols-1 gap-1 py-3 even:bg-gray-50 sm:grid-cols-3 sm:gap-4">
                <dt class="font-medium text-gray-900">Descripcion del Servicio</dt>
                <pre class=" text-gray-700 sm:col-span-2  text-balance break-words whitespace-pre-wrap overflow-x-auto "> {{desarrollo.descripcion}} </pre>
              </div>
             
              <div class="grid grid-cols-1 gap-1 py-3 even:bg-gray-50 sm:grid-cols-3 sm:gap-4">
                <dt class="font-medium text-gray-900">¿Se utlizo los repuestos?</dt>
                <pre class=" text-gray-700 sm:col-span-2  text-balance break-words whitespace-pre-wrap overflow-x-auto "> {{descripcionRepuestos}} </pre>
                <dt class="font-medium text-gray-900"></dt>
                <pre class=" text-gray-700 sm:col-span-2  text-balance break-words whitespace-pre-wrap overflow-x-auto "> {{observaciones}} </pre>
              </div>
  
  
  
  
  
  
            </dl>
          </div>
        </div>
  
      </div>
  
    </div>
  
    <div class="grid grid-cols-2 ">
  
      <div id="alert-additional-content-1"
        class="col-span-2 p-4 mb-4 text-blue-800 border border-blue-300 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400 dark:border-blue-800"
        role="alert">
        <div class="flex items-center">
          <svg class="flex-shrink-0 w-4 h-4 me-2 dark:text-gray-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
            fill="currentColor" viewBox="0 0 20 20">
            <path
              d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
          </svg>
          <span class="sr-only">Info</span>
          <h3 class="text-lg font-medium text-gray-800 dark:text-gray-300">ARCHIVOS MEDIA </h3>
        </div>
        <div class="mt-2 mb-4 text-sm text-gray-800 dark:text-gray-300">
          <p>En esta sección se muestran las imágenes y videos.</p>
        </div>
  
        <div class="grid grid-cols-6 gap-4 p-4">
          @for (dato of imagenes; track dato.id) {
          <div class="col-span-2 max-sm:col-span-6">
            <img class="h-64 w-96 rounded-lg object-cover" [src]="urlMedia + dato.rutaFoto" alt="">
          </div>
          }
        </div>
        <div class="grid grid-cols-6 gap-4 p-4">
          @for (dato2 of videos; track dato2.id) {
          <div class="col-span-2 max-sm:col-span-6 video-container">
            <video orien class="h-64 w-96 rounded-lg object-contain" [src]="urlMedia + dato2.rutaVideo" alt=""
              class="w-full" controls></video>
          </div>
          }
        </div>
      </div>
    </div>
  </div>
}