{{- $pageRel := .RelPermalink }}
{{- $cp := where .Site.RegularPages  ".Params.categories" "intersect" site.Params.cyoa -}}
{{- $np := where $cp ".Params.prev" "intersect" (slice $pageRel ) }}


{{if or (isset .Params "prev") $np }}
<div class="bg-white br3 mb3 pa4 gray">
<h1 class="f3 near-black">Choose Your Own Adventure<h1>
    <p class="f6 lh-copy nodrop">Follow <span style="color:white;background-color:#00ff00">(P)layer</span>, <span style="background-color:#ff0000;color:white">(GM)Game Master</span>, or <span style="background-color:#ffff00">(T)echnical</span> thread.</p>
<h2 class="pl1 f4">Advance</h2>
<ul class="pa0">
{{ range $np }}
   <li class="list pa0">
     <a href="{{ .RelPermalink }}" class="link f5 grow no-underline ph3 pv0 mb2 dib black sans-serif">
      {{if and (in .Params.categories "Player") (in $.Params.categories "Player")}}<img src="/images/PF.svg" alt="Player Forward" height="16px">{{end}}
      {{if and (in .Params.categories "Game Master") (in $.Params.categories "Game Master")}}<img src="/images/GMF.svg" alt="Game Master Forward" height="16px"> {{end}}
      {{if and (in .Params.categories "Technical") (in $.Params.categories "Technical")}}<img src="/images/TF.svg" alt="Technical Forward" height="16px"> {{end}}
       {{- .LinkTitle -}}
     </a>
   </li>
{{end}}
</ul>
<h2 class="pl1 f4">Retreat</h2>
<ul class="pa0">
{{ range .Params.prev }}
{{ with $.GetPage .}}
   <li class="list pv0 mv0">
     <a href="{{ .RelPermalink }}" class="link f5 grow no-underline ph3 pv0 mb2 dib black sans-serif">
      {{if and (in .Params.categories "Player") (in $.Params.categories "Player") }}<img src="/images/PB.svg" alt="Player Back" height="16px">{{end}}
      {{if and (in .Params.categories "Game Master") (in $.Params.categories "Game Master")}}<img src="/images/GMB.svg" alt="Game Master Back" height="16px"> {{end}}
      {{if and (in .Params.categories "Technical") (in $.Params.categories "Technical")}}<img src="/images/TB.svg" alt="Technical Back" height="16px"> {{end}}
       {{- .LinkTitle -}}
     </a>
   </li>
{{end}}
{{end}}
</ul>
</div>
{{end}}