{{define "nineGridDialog"}}
{{/* 九宫格弹窗：后台位置 2（nineGridList），在年龄确认、弹窗广告之后弹出 */}}
{{if .appConfig.NineGridList}}
<link rel="stylesheet" href="/static/css/nineGridDialog.css?v=1" />
<div class="nine-grid-mask" id="nineGridDialog" data-nine-grid hidden>
  <div class="nine-grid-panel" role="dialog" aria-modal="true" aria-label="推荐应用">
    <div class="nine-grid-list">
      {{range $ad := .appConfig.NineGridList}}
      <a
        class="nine-grid-item"
        {{if $ad.Link}}href="{{$ad.Link}}" target="_blank" rel="sponsored nofollow noopener noreferrer"{{else}}aria-disabled="true"{{end}}
        data-nine-grid-item
        data-creative-id="{{$ad.ID}}"
        {{if $ad.CanReportClick}}data-ads-id="{{$ad.AdsID}}" data-ads-location="{{$ad.Location}}"{{end}}
        hidden
      >
        <img class="nine-grid-icon" src="/static/images/placeholder.png?v=2" data-nine-grid-src="{{$ad.Images}}" alt="{{$ad.Title}}" title="{{$ad.Title}}" decoding="async" />
        <span class="nine-grid-name">{{if $ad.Title}}{{$ad.Title}}{{else}}推荐应用{{end}}</span>
      </a>
      {{end}}
    </div>
    <button class="nine-grid-close" type="button" data-nine-grid-close aria-label="关闭">
      <svg viewBox="0 0 36 36" width="36" height="36" aria-hidden="true"><circle cx="18" cy="18" r="16" fill="none" stroke="#fff" stroke-width="2"/><path d="M12.5 12.5l11 11M23.5 12.5l-11 11" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>
    </button>
  </div>
</div>
<script defer src="/static/js/pages/nineGridDialog.js?v=1"></script>
{{end}}
{{end}}