<!--
  ~ SPDX-FileCopyrightText: 2024 UL Research Institutes
  ~ SPDX-License-Identifier: Apache-2.0
-->

<!-- Headline -->
<div class="text-5xl font-bold text-center mb-4">${headline}</div>
<!-- Ammo Bar -->
<div class="w-full flex flex-col gap-0 mb-4 jp-col-5 jp-all-columns">
  <!-- Ammo Blob Container -->
  <div
    class="flex flex-col md:flex-row lg:flex-nowrap justify-center items-start gap-2 bg-gray-300 relative px-2"
  >
    <!-- Ammo Blob -->
    <div
      class="flex flex-col justify-start items-start min-w-24 w-[50ch] max-w-[50ch] p-2"
    >
      <span class="text-md font-semibold">System</span>
      <span
        class="text-xl font-bold text-[#050895] text-wrap [overflow-wrap:anywhere]"
        >${system_title}</span
      >
      <span class="text-md line-clamp-5 text-wrap [overflow-wrap:anywhere]">
        ${system_summary}
      </span>
    </div>
    <!-- End Ammo Blob -->
    <!-- Ammo Blob -->
    <div
      class="flex flex-col justify-start items-start min-w-24 w-[50ch] max-w-[50ch] p-2"
    >
      <span class="text-md font-semibold">Result</span>
      <span
        class="text-xl font-bold text-[#050895] text-wrap [overflow-wrap:anywhere]"
        >${summary_phrase}</span
      >
      <span class="text-md line-clamp-5 text-wrap [overflow-wrap:anywhere]">
        ${summary_text}
      </span>
    </div>
    <!-- End Ammo Blob -->
    <!-- Ammo Blob -->
    <div
      class="flex flex-col justify-start items-start min-w-24 w-[50ch] max-w-[50ch] p-2"
    >
      <span class="text-md font-semibold">Use Case</span>
      <span
        class="text-xl font-bold text-[#050895] text-wrap [overflow-wrap:anywhere]"
        >${usecase_title}</span
      >
      <span class="text-md line-clamp-5 text-wrap [overflow-wrap:anywhere]">
        ${usecase_summary}
      </span>
    </div>
    <!-- End Ammo Blob -->
  </div>
  <!-- End Ammo Blob Container -->
  <!-- Berries Container -->
  <div
    class="flex flex-col md:flex-row justify-center align-center md:align-top gap-1 md:gap-4 bg-blue-300 md:bg-transparent"
  >
    <!-- Berry -->
    <div
      class="w-full px-2 py-2 md:py-0 md:w-fit md:rounded-bl-md md:rounded-br-md bg-blue-300 flex justify-start md:justify-center gap-1"
    >
      <span class="text-md font-bold w-[6ch] md:w-fit text-end">Author</span>
      <span class="text-md text-gray-500">|</span>
      <span class="text-md text-nowrap text-ellipsis">${author}</span>
    </div>
    <!-- End Berry -->
    <div class="w-full md:hidden px-10">
      <div class="w-full h-[1px] bg-gray-500/10 rounded-lg"></div>
    </div>
    <!-- Berry -->
    <div
      class="w-full px-2 py-2 md:py-0 md:px-2 md:w-fit md:rounded-bl-md md:rounded-br-md bg-blue-300 flex justify-start md:justify-center gap-1"
    >
      <span class="text-md font-bold w-[6ch] md:w-fit text-end">Date</span>
      <span class="text-md text-gray-500">|</span>
      <span class="text-md text-nowrap text-ellipsis" id="date_berry"
        >${date}</span
      >
    </div>
    <!-- End Berry -->
  </div>
  <!-- End Berries Container -->
</div>
<!-- End Ammo Bar -->
