<section class="p-2 mt-8 mb-2">
  <!-- Pending Approval Notice -->
  {{if .Service.Pending}}
    <div class="flex justify-center items-center my-4 font-bold text-md md:text-md">
      <div class="flex justify-center items-center">
        <a href="#" target="_blank" class="flex justify-center items-center px-2 py-1 m-1 space-x-2 text-center text-yellow-500 rounded border border-yellow-600 transition duration-300 bg-zinc-900 hover:border-yellow-600 hover:text-yellow-600">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-yellow-600 tabler-alert" 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>
            <circle cx="12" cy="12" r="9"></circle>
            <line x1="12" y1="8" x2="12" y2="12"></line>
            <line x1="12" y1="16" x2="12.01" y2="16"></line>
          </svg>
          <span>Pending approval</span>
        </a>
      </div>
    </div>
  {{end}}

  <!-- Service Header -->
  <div class="flex justify-center items-center space-x-4">
    <img class="rounded-full size-10 md:size-14 bg-white/25" src="/api/g/picture/{{.Service.ID}}" alt="" />
    <span class="flex justify-center items-center capitalize">
      <span class="text-xl font-bold md:text-2xl">{{.Service.Name}}</span>
      {{if .Service.Verified}}
        <a  aria-label="Verified" data-balloon-pos="up" href="/about#verification">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 ml-1 {{if .Service.Verified}}text-blue-400/80{{else}} text-white/20 {{end}} 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>
        </a>
      {{end}}
    </span>
  </div>

  <!-- Links -->
  <div class="flex justify-center items-center mt-4 text-sm font-bold md:text-md">
    <div class="flex flex-wrap justify-center items-center space-x-2">
      {{if ne (len .Service.Urls) 0}}
        <div class="inline-flex">
          <a href="{{randomElem .Service.Urls}}{{.Service.Referral}}" target="_blank" 
             class="flex justify-center items-center px-2 py-1 space-x-1 text-center text-gray-300 
                    {{if ne .Service.Referral ""}}rounded-l{{else}}rounded{{end}} 
                    border border-gray-600 transition duration-300 bg-zinc-900 hover:border-lime-600 hover:text-lime-600">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 tabler-world-www" 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="M19.5 7a9 9 0 0 0 -7.5 -4a8.991 8.991 0 0 0 -7.484 4"></path>
              <path d="M11.5 3a16.989 16.989 0 0 0 -1.826 4"></path>
              <path d="M12.5 3a16.989 16.989 0 0 1 1.828 4"></path>
              <path d="M19.5 17a9 9 0 0 1 -7.5 4a8.991 8.991 0 0 1 -7.484 -4"></path>
              <path d="M11.5 21a16.989 16.989 0 0 1 -1.826 -4"></path>
              <path d="M12.5 21a16.989 16.989 0 0 0 1.828 -4"></path>
              <path d="M2 10l1 4l1.5 -4l1.5 4l1 -4"></path>
              <path d="M17 10l1 4l1.5 -4l1.5 4l1 -4"></path>
              <path d="M9.5 10l1 4l1.5 -4l1.5 4l1 -4"></path>
            </svg>
            <span>Website</span>
          </a>
  
          {{if ne .Service.Referral ""}}
            <a aria-label="No Referral" data-balloon-pos="up" href="{{randomElem .Service.Urls}}" class="flex justify-center items-center px-1 py-1 text-center text-gray-300 rounded-r border border-gray-600 transition duration-300 md:px-2 bg-zinc-900 hover:border-lime-600 hover:text-lime-600">
              <svg xmlns="http://www.w3.org/2000/svg" class="size-4 link-off" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <path d="M9 15l3 -3m2 -2l1 -1" />
                <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
                <path d="M3 3l18 18" />
                <path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
              </svg>
            </a>
          {{end}} 
        </div>
      {{end}}

      {{if ne (len .Service.OnionUrls) 0}}
        <div class="inline-flex">
          <a href="{{randomElem .Service.OnionUrls}}{{.Service.Referral}}" target="_blank" 
             class="flex justify-center items-center px-2 py-1 space-x-1 text-center text-purple-600 
             {{if ne .Service.Referral ""}}rounded-l{{else}}rounded{{end}} 
             border border-purple-900 transition duration-300 bg-zinc-900 hover:border-lime-600 hover:text-lime-600">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 tabler-target" 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-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
              <path d="M12 12m-5 0a5 5 0 1 0 10 0a5 5 0 1 0 -10 0"></path>
              <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
            </svg>
            
            {{if eq (len .Service.Urls) 0}}
              <span>Tor Only</span>
            {{else}}
              <span>Tor</span>
            {{end}}

            {{if ne .Service.Referral ""}}
            <a aria-label="No Referral" data-balloon-pos="up" href="{{randomElem .Service.OnionUrls}}" class="flex justify-center items-center px-1 py-1 text-center text-purple-600 rounded-r border border-purple-900 transition duration-300 md:px-2 bg-zinc-900 hover:border-lime-600 hover:text-lime-600">
              <svg xmlns="http://www.w3.org/2000/svg" class="size-4 link-off" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <path d="M9 15l3 -3m2 -2l1 -1" />
                <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
                <path d="M3 3l18 18" />
                <path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
              </svg>
            </a>
          {{end}} 
          </a>
        </div>
      {{end}}

      {{if ne (len .Service.TosUrls) 0}}
        <a href="{{index .Service.TosUrls 0}}" target="_blank" class="flex justify-center items-center px-2 py-1 m-1 space-x-2 text-center text-gray-300 rounded border border-gray-600 transition duration-300 bg-zinc-900 hover:border-lime-600 hover:text-lime-600">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 tabler-report-search" 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="M8 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h5.697"></path>
            <path d="M18 12v-5a2 2 0 0 0 -2 -2h-2"></path>
            <path d="M8 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path>
            <path d="M8 11h4"></path>
            <path d="M8 15h3"></path>
            <path d="M16.5 17.5m-2.5 0a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0"></path>
            <path d="M18.5 19.5l2.5 2.5"></path>
          </svg>
          <span>ToS</span>
        </a>
      {{end}} 
      
      <a  aria-label="Discuss service" data-balloon-pos="up" href="#discuss" class="hidden justify-center items-center px-2 py-1 m-1 space-x-2 text-center text-sky-400 rounded border border-sky-700 transition duration-300 md:flex bg-zinc-900 hover:border-lime-600 hover:text-lime-600">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 messages" 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="M21 14l-3 -3h-7a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1h9a1 1 0 0 1 1 1v10"></path>
          <path d="M14 15v2a1 1 0 0 1 -1 1h-7l-3 3v-10a1 1 0 0 1 1 -1h2"></path>
        </svg>
      </a>
    </div>
  </div>

  <!-- Usage Guide Button -->
  <!--<div class="flex flex-col justify-center items-center my-1 text-sm">
        <a href="https://example.com" target="_blank" class="flex justify-center items-center px-2 py-1 m-1 space-x-2 max-w-xs text-center text-lime-400 rounded border border-lime-700 transition duration-300 bg-zinc-900 hover:border-lime-600 hover:text-lime-600">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 compass" 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="M8 16l2 -6l6 -2l-2 6l-6 2"></path>
                <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
                <path d="M12 3l0 2"></path>
                <path d="M12 19l0 2"></path>
                <path d="M3 12l2 0"></path>
                <path d="M19 12l2 0"></path>
             </svg>
             <span>Usage Guide</span>
        </a>
    </div>-->

  <!-- Icons -->
  <div class="flex justify-center items-center mt-2 mb-4">
    <a href="/about#icons" class="max-w-md text-xs"> {{partial "partials/service_icons" .Service}} </a>
  </div>

  <!-- Description -->
  <div class="flex justify-center items-center mt-4">
    <p class="p-4 max-w-lg text-sm rounded-lg border md:text-base border-white/20 bg-gray-500/10">{{if ne .Service.Description ""}} {{.Service.Description | safe}} {{else}} This {{.Service.Type}} does not have a description. {{end}}</p>
  </div>
</section>

<!-- KYC Level -->
<section class="flex justify-center items-center px-2 mb-2">{{partial "partials/kyc_level" .Service.KycLevel}}</section>

<!-- Attributes -->
<section class="flex flex-col justify-center items-center p-4">
  {{if .Attributes}}
  <div class="grid grid-cols-1 auto-cols-max gap-2 md:grid-cols-2">{{range .Attributes}} {{partial "partials/attribute_line" .}} {{end}}</div>
  {{end}} {{if .Service.Comments}}
  <div class="my-2 space-y-1.5 max-w-lg">
    {{range .Service.Comments}}
    <p class="block px-3 py-1.5 text-sm font-bold text-center rounded-lg border transition duration-300 border-white/30 bg-white/10 hover:bg-white/20 hover:border-white">* {{.}}</p>
    {{end}}
  </div>
  {{end}}

  <span class="mt-6 text-xs text-white/20"> (updated {{humanizePbTimeString .Service.Updated}}) </span>
</section>

<div class="my-2 w-full border-t-2 border-opacity-50 border-dashed border-t-lime-400/10"></div>

<!-- ToS Checker -->
<section class="flex flex-col justify-center items-center p-4" id="tos">
  <a href="/about#tos-checker" class="text-xl font-bold">
    <svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-4 h-4 calendar-cog" 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 21h-6a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v5"></path>
      <path d="M16 3v4"></path>
      <path d="M8 3v4"></path>
      <path d="M4 11h16"></path>
      <path d="M19.001 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
      <path d="M19.001 15.5v1.5"></path>
      <path d="M19.001 21v1.5"></path>
      <path d="M22.032 17.25l-1.299 .75"></path>
      <path d="M17.27 20l-1.3 .75"></path>
      <path d="M15.97 17.25l1.3 .75"></path>
      <path d="M20.733 20l1.3 .75"></path>
    </svg>
    <span>ToS Review</span>
    <span class="text-xs text-white/30">?</span>
  </a>
  <p class="max-w-sm text-xs text-center text-gray-500 text-opacity-75">Automated, ai-driven monthly ToS reviews.</p>
  <p class="mt-1 max-w-sm text-xs text-center text-gray-600 text-opacity-75">Last Check: {{ dateString .Service.LastTosReview }}</p>

  {{if .Service.TosReviews}}
  <div class="max-w-lg">
    {{if eq 0 (len .Service.TosReviews)}}
    <p class="mt-2 max-w-md font-bold text-center text-amber-400 text-opacity-75 text-md">Not ToS reviews for this service (yet).</p>
    {{else if eq (len .Service.TosUrls) 0}}
    <p class="mt-2 max-w-md font-bold text-center text-amber-400 text-opacity-75 text-md">This service has no ToS.</p>
    {{else}} {{range .Service.TosReviews}} {{if .Warning}} {{partial "partials/tos_check" .}} {{end}} {{end}}
    <details class="py-2">
      <summary class="mt-2 max-w-md text-lg font-bold text-center text-blue-400 text-opacity-75 cursor-pointer">Show non-conflictive ToS reviews</summary>
      {{range .Service.TosReviews}} {{if ne .Warning true}} {{partial "partials/tos_check" .}} {{end}} {{end}}
    </details>
    {{end}}
  </div>
  {{else}}
  <p class="mt-2 max-w-md font-bold text-center text-amber-400 text-opacity-75 text-md">Not ToS reviews for this service (yet).</p>
  {{end}}
</section>

<div class="my-2 w-full border-t-2 border-opacity-50 border-dashed border-t-lime-400/10"></div>

<!-- Comments -->
<section class="flex flex-col justify-center items-center p-4 mb-16" id="discuss">
  <a href="/about#nostr-comments" target="_blank" class="text-xl font-bold">
    <svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-4 h-4 messages" 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="M21 14l-3 -3h-7a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1h9a1 1 0 0 1 1 1v10"></path>
      <path d="M14 15v2a1 1 0 0 1 -1 1h-7l-3 3v-10a1 1 0 0 1 1 -1h2"></path>
    </svg>
    <span>Nostr Comments</span>
    <span class="text-xs text-white/30">?</span>
  </a>
  <h2 class="text-xl font-bold"></h2>
  <p class="pb-4 mt-1 max-w-sm text-xs text-center text-gray-500 text-opacity-75">Beware of fake reviews and accounts. Verify user profiles and conduct your own research.</p>
  <!-- div with the ID disgus where you would like to display the comments & form -->
  <div id="disgus" class="w-full max-w-xl">
    <noscript>
      <p class="font-bold text-center text-yellow-300">
        You must have JavaScript enabled to see and use comments. It just will load a 200kb script to interact with Nostr. The source code is available
        <a target="_blank" class="underline" href="https://github.com/carlitoplatanito/disgus">here</a>.
      </p>
    </noscript>
  </div>
</section>

<!-- this can go at the end of the body -->
<script type="module" src="/static/disgus/index.js" async></script>
