{{/* service_card.html */}}
<a href="/service/{{.Name}}" class="w-full max-w-md">
  <div class="flex flex-col justify-between p-4 bg-gray-700 bg-opacity-30 rounded-lg border border-transparent shadow-lg backdrop-blur-md transition duration-500 hover:border-lime-600/70">
    <div>
      <div class="flex items-center">
        <img src="/api/g/picture/{{.ID}}" alt="{{.Name}} logo" class="mr-4 w-12 h-12 rounded-full bg-white/10" />
        <div class="flex flex-col justify-center items-center">
          <div class="text-lg font-bold text-white md:text-xl">
            <div class="flex justify-between items-center">
              <span class="flex justify-center items-center capitalize">
                {{if .Verified}}
                <svg xmlns="http://www.w3.org/2000/svg" class="mr-1 w-5 h-5 text-blue-400/80 discount-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="M12.01 2.011a3.2 3.2 0 0 1 2.113 .797l.154 .145l.698 .698a1.2 1.2 0 0 0 .71 .341l.135 .008h1a3.2 3.2 0 0 1 3.195 3.018l.005 .182v1c0 .27 .092 .533 .258 .743l.09 .1l.697 .698a3.2 3.2 0 0 1 .147 4.382l-.145 .154l-.698 .698a1.2 1.2 0 0 0 -.341 .71l-.008 .135v1a3.2 3.2 0 0 1 -3.018 3.195l-.182 .005h-1a1.2 1.2 0 0 0 -.743 .258l-.1 .09l-.698 .697a3.2 3.2 0 0 1 -4.382 .147l-.154 -.145l-.698 -.698a1.2 1.2 0 0 0 -.71 -.341l-.135 -.008h-1a3.2 3.2 0 0 1 -3.195 -3.018l-.005 -.182v-1a1.2 1.2 0 0 0 -.258 -.743l-.09 -.1l-.697 -.698a3.2 3.2 0 0 1 -.147 -4.382l.145 -.154l.698 -.698a1.2 1.2 0 0 0 .341 -.71l.008 -.135v-1l.005 -.182a3.2 3.2 0 0 1 3.013 -3.013l.182 -.005h1a1.2 1.2 0 0 0 .743 -.258l.1 -.09l.698 -.697a3.2 3.2 0 0 1 2.269 -.944zm3.697 7.282a1 1 0 0 0 -1.414 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
                    stroke-width="0"
                    fill="currentColor"
                  ></path>
                </svg>
                {{end}} {{.Name}}
              </span>

              {{if isNew .Created}}
              <span class="px-1 py-1 text-xs font-bold uppercase rounded border border-white/30 bg-white/20 text-white/70"> NEW </span>
              {{end}}
              <span
                class="px-2 py-1 text-xs font-bold uppercase border rounded 
                            {{if ge .Score 10}}
                            bg-green-900 border-green-800
                            {{else if gt .Score 8}}
                            bg-green-800 border-green-700
                            {{else if gt .Score 7}}
                            bg-lime-900 border-lime-800
                            {{else if gt .Score 6}}
                            bg-lime-700/80 border-lime-600/80
                            {{else if gt .Score 5}}
                            bg-yellow-800 border-yellow-700
                            {{else if eq .Score 5}}
                            bg-orange-900 border-orange-800
                            {{else}}
                            bg-red-900 border-red-800
                            {{end}}
                            text-white/70"
              >
                {{.Score}}
              </span>
            </div>
            <span class="block pr-1 mt-2 text-xs font-normal text-opacity-60 text-white/60">{{shortText .Description | safe}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-4">
      <div class="flex justify-center items-center text-xs">
        {{if eq .Type "exchange"}}
        <span class="px-2 py-1 mr-1 text-xs font-bold uppercase rounded border text-white/70 bg-zinc-900 border-zinc-700"> {{.Type}} </span>
        {{else}}
        <span class="px-2 py-1 mr-1 text-xs font-bold uppercase rounded border text-white/70 bg-zinc-900 border-zinc-700"> {{.Category}} </span>
        {{end}} {{partial "partials/service_icons" .}}
      </div>
    </div>
  </div>
</a>
