{{define "squarePromo"}}
{{$ads := .Ads}}
{{if $ads}}
<link rel="stylesheet" href="/static/css/squarePromo.css?v=1" />
<section
  class="square-promo{{if .PCOnly}} square-promo--pc-only{{end}}"
  aria-label="{{if .Label}}{{.Label}}{{else}}推广应用{{end}}"
  data-square-promo
>
  <div class="square-promo__track">
    <div class="square-promo__group">
      {{range $ad := $ads}}
      <a
        class="square-promo__item"
        {{if $ad.Link}}href="{{$ad.Link}}"
        target="_blank"
        rel="sponsored nofollow noopener noreferrer"
        {{else}}aria-disabled="true"
        {{end}}
        data-creative-id="{{$ad.ID}}"
        {{if $ad.ClickTrackable}}data-ads-id="{{$ad.ClickID}}" data-ads-location="{{$ad.Location}}"{{end}}
      >
        <span class="square-promo__cover">
          <img
            class="lazy"
            src="/static/images/placeholder.png?v=2"
            data-src="{{$ad.Images}}"
            alt="{{$ad.Title}}"
            title="{{$ad.Title}}"
          />
        </span>
        <span class="square-promo__title">{{$ad.Title}}</span>
      </a>
      {{end}}
    </div>
  </div>
</section>
<script>
  (function () {
    if (document.querySelector("script[data-square-promo-js]")) return;
    var s = document.createElement("script");
    s.src = "/static/js/squarePromo.js?v=1";
    s.defer = true;
    s.setAttribute("data-square-promo-js", "1");
    document.head.appendChild(s);
  })();
</script>
{{end}}
{{end}}