{%load static%}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
</head>

<body class="font-poppinsLight">
  <div class="flex flex-col justify-center items-center gap-5">
    <p class="text-secondosiblue text-xl uppercase">Knowledge Base</p>

    <div class="w-full">
      <p class="text-secondosiblue">Statuses</p>
      <div class="w-full flex flex-col gap-1">
        <div class="flex justify-start items-center gap-2">
          <div class="w-[10px] h-[10px] rounded-full bg-gray-400 shadow-sm"></div>
          <p class="text-gray-500">Initialized</p>
        </div>

        <div class="flex justify-start items-center gap-2">
          <div class="w-[10px] h-[10px] rounded-full bg-orange-500 shadow-sm"></div>
          <p class="text-gray-500">In Progress</p>
        </div>

        <div class="flex justify-start items-center gap-2">
          <div class="w-[10px] h-[10px] rounded-full bg-yellow-500 shadow-sm"></div>
          <p class="text-gray-500">Pending</p>
        </div>

        <div class="flex justify-start items-center gap-2">
          <div class="w-[10px] h-[10px] rounded-full bg-green-700 shadow-sm"></div>
          <p class="text-gray-500">Completed</p>
        </div>

        <div class="flex justify-start items-center gap-2">
          <div class="w-[10px] h-[10px] rounded-full bg-red-500 shadow-sm"></div>
          <p class="text-gray-500">Cancelled</p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>