<template>
  <div
    class="flex p-4 mb-4 text-sm gap-4 items-start text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400"
    role="alert"
  >
    <exclamation-triangle-icon class="size-6 text-red-600" />
    <span class="sr-only">Danger</span>
    <div>
      <span class="font-medium">{{ $t("requirements_met") }}</span>
      <ul class="mt-1.5 list-disc list-inside">
        <li>{{ $t("invalid_api_key") }}</li>
        <li>{{ $t("connection_error") }}</li>
        <li>
          {{ $t("request_timeout") }}
        </li>
      </ul>
    </div>
  </div>
</template>
