<div
  class="flex flex-col justify-center max-w-lg p-4 text-sm border rounded-lg md:text-base
            {{if eq . 0}} border-green-500/20 bg-green-500/10
            {{else if eq . 1}} border-lime-300/40 bg-lime-300/10
            {{else if eq . 2}} border-amber-700/40 bg-amber-600/20
            {{else if eq . 3}} border-red-600/40 bg-red-600/20
            {{end}}
            "
>
  <h2 class="flex items-center space-x-2 text-lg font-bold">
    {{if eq . 0}}
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="w-5 h-5 text-green-600 circle-check-filled"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      stroke-width="2"
      stroke="currentColor"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
      <path
        d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
        stroke-width="0"
        fill="currentColor"
      ></path>
    </svg>
    {{else if eq . 1}}
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="w-5 h-5 text-lime-400/70 circle-check"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      stroke-width="2"
      stroke="currentColor"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
      <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
      <path d="M9 12l2 2l4 -4"></path>
    </svg>
    {{else if eq . 2}}
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="w-5 h-5 text-amber-600 alert-triangle-filled"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      stroke-width="2"
      stroke="currentColor"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
      <path
        d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z"
        stroke-width="0"
        fill="currentColor"
      ></path>
    </svg>
    {{else if eq . 3}}
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="w-5 h-5 text-red-600 alert-octagon-filled"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      stroke-width="2"
      stroke="currentColor"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
      <path
        d="M14.897 1a4 4 0 0 1 2.664 1.016l.165 .156l4.1 4.1a4 4 0 0 1 1.168 2.605l.006 .227v5.794a4 4 0 0 1 -1.016 2.664l-.156 .165l-4.1 4.1a4 4 0 0 1 -2.603 1.168l-.227 .006h-5.795a3.999 3.999 0 0 1 -2.664 -1.017l-.165 -.156l-4.1 -4.1a4 4 0 0 1 -1.168 -2.604l-.006 -.227v-5.794a4 4 0 0 1 1.016 -2.664l.156 -.165l4.1 -4.1a4 4 0 0 1 2.605 -1.168l.227 -.006h5.793zm-2.887 14l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -8a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z"
        stroke-width="0"
        fill="currentColor"
      ></path>
    </svg>
    {{end}}

    <span> KYC LEVEL <b>{{.}}</b> </span>
  </h2>

  {{if eq . 0}}
  <p class="mt-2 text-sm">
    The exchange ToS <b class="font-bold">do not mention</b> that it will ever
    request the user for a KYC verification.
  </p>
  {{else if eq . 1}}
  <p class="mt-2 text-sm">
    KYC is <b class="font-bold">not mentioned</b>, but this service
    <b class="font-bold">reserves the right to share data</b> with
    representatives of the authorities, block funds or reject transactions.
  </p>
  {{else if eq . 2}}
  <p class="mt-2 text-sm">
    The exchange
    <b class="font-bold">may request KYC from any user at any time</b>,
    typically triggered by an automated flag system, leading to a temporary
    block of funds.
  </p>
  {{else if eq . 3}}
  <p class="mt-2 text-sm">
    KYC is <b class="font-bold">mandatory to use some features</b>. A non-KYCed
    user can be required to verify their identity at any time or any moment for
    any reason.
  </p>
  {{end}}
</div>
