<style>

#peertube {

  display: flex;
  flex-wrap: wrap;
  flex-direction: row;



  article {
    margin: 2px;
    flex: 1 1 300px;


    .cartouche {
      display: flex;
      align-items: center;
      justify-content: left;
      flex-wrap: wrap;
      width: 100%;
    }
    .cartouche > a {
      flex: 0 0 100px;
    }
    .cartouche > p {
      flex: 1 1 100px;
      font-size: 1em;
      font-weight: bold;
      text-transform: uppercase;
    }



  }
  h2 {
    font-size: 12em;
/*    text-transform: uppercase;*/
    line-height: 1em;
    flex: 1 1 100%;
  }
    p {

    flex: 1 1 100%;
    line-height: 1em;

    strong {
        font-size: 1.5em;
      }
    }

  @media screen and (max-width: 1024px) {
    h2 {
      font-size: 8em;
    }
    p {
      font-size: 1em;
    }
  }

  .peertubes {
    display: flex;
    align-items: end;
    padding: 20px;
    justify-content: center;
    flex: 1 1 300px;
    min-height: 300px;
    background-size: cover;
    background-position: center center;
    linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)),


  }
  .peertubes:hover {
    background-size: cover;
    background-position: center center;
    linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(117, 19, 93, 0)),
  }

 .section-headers {
   padding: 80px;

   flex: 1 1 300px;


  }
}

</style>
{{ $data := dict }}
{{ $url := "https://v.basspistol.org/api/v1/videos?isLocal=true&count=100" }}

<section id="peertube">

<article class="section-headers">
  <h2>BassTube</h2>
  <p><strong>Videos from the deepweb.</strong>
  <br />Decentralized, peer-to-peer, for the people!
  </p>
</article>





{{ with try (resources.GetRemote $url) }}
  {{ with .Err }}
    {{ errorf "%s" . }}
  {{ else with .Value }}
    {{ $data = .Content | transform.Unmarshal }}
  {{ else }}
    {{ errorf "Unable to get remote resource %q" $url }}
  {{ end }}
{{ end }}

{{ with $data.data }}
{{ range . | shuffle | last 5 }}


  <article class="peertubes" style="background-image:linear-gradient(to bottom, rgba(128, 0, 128, 1), rgba(128, 0, 128, .75)),url(https://v.basspistol.org{{ .previewPath }})">
    <div class="cartouche">
      <a href="{{ .url }}" target="_blank">
        <svg
          width="75"
          height="75"
          version="1.1"
          viewBox="0 0 57.679166 57.67917"
          id="svg2"
          xml:space="preserve"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:svg="http://www.w3.org/2000/svg"><defs
            id="defs2"><clipPath
              clipPathUnits="userSpaceOnUse"
              id="clipPath2"><path
                d="M 58.028369,28.839501 A 28.839999,28.839999 0 0 1 29.188368,57.6795 28.839999,28.839999 0 0 1 0.34836804,28.839501 28.839999,28.839999 0 0 1 29.188368,-4.9957302e-4 28.839999,28.839999 0 0 1 58.028369,28.839501 Z"
                fill="purple"
                stroke-width="4.83809"
                style="stroke-linecap:round;stroke-linejoin:round;paint-order:markers stroke fill"
                id="path3" /></clipPath><filter
              style="color-interpolation-filters:sRGB"
              id="filter25"
              x="-0.64945344"
              y="-0.51138139"
              width="2.2988969"
              height="2.0227628"><feFlood
                result="flood"
                in="SourceGraphic"
                flood-opacity="1.000000"
                flood-color="rgb(0,0,0)"
                id="feFlood24" /><feGaussianBlur
                result="blur"
                in="SourceGraphic"
                stdDeviation="3.300000"
                id="feGaussianBlur24" /><feOffset
                result="offset"
                in="blur"
                dx="0.000000"
                dy="0.000000"
                id="feOffset24" /><feComposite
                result="comp1"
                operator="in"
                in="flood"
                in2="offset"
                id="feComposite24" /><feComposite
                result="comp2"
                operator="over"
                in="SourceGraphic"
                in2="comp1"
                id="feComposite25" /></filter></defs><image
            width="58.376736"
            height="57.679001"
            preserveAspectRatio="none"
            {{ range .account.avatars | last 1 }}
            {{ if .fileUrl }}xlink:href="{{ .fileUrl }}"{{ else }}xlink:href="https://v.basspistol.org/client/assets/images/logo.svg"{{ end }}
            {{ end }}

            id="image1"
            x="0"
            y="0"
            clip-path="url(#clipPath2)"
            transform="matrix(0.9999855,0,0,1.0000029,-0.34836299,0)" /><path
            d="m 23.067499,19.43 14.82,9.4106 -14.82,9.4105 z"
            fill="orange"
            stroke="none"
            stroke-width="3.4098"
            style="fill:orange;fill-opacity:1;stroke:orange;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:stroke fill markers;filter:url(#filter25)"
            id="path2" />
        </svg>
      </a>
      <div>
      <p>{{ .name }}</p>
      <p>{{ .account.displayName }}</p>
</div>
    </div>
  </article>

{{ end }}
<!--   <pre>{{ debug.Dump $data }}</pre>-->
{{ end }}

</section>
