{{ $url := .Site.BaseURL }}

<nav class="sidebar col-xs-6 col-sm-4 col-md-3 sidebar-offcanvas">
  <div class="sidebar-content sidebar-scrolling">
    <h1 class="sidebar-heading"><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
    {{ range .Site.Params.sidebarAbout }}
      <p class="sidebar-p">{{ . | safeHTML }}</p>
    {{ end }}

    {{ if and (isset .Params "image") .Params.image }}
      <div class="sidebar-game-info">
        <div class="sidebar-header">&nbsp;&nbsp;
          {{ with .Params.game_name }}
            <span>Game: {{ . }}</span>
          {{ else }}
            <span>{{ .Title }}</span>
          {{ end }}
        </div>

        <p style="position: relative;">
        <img src="{{ $url }}{{ .Params.image }}" alt="game cover image" class="img-responsive img-inactive" style="border: 1px solid black"/>
        {{ with .Params.imageActive }}
          <img src="{{ $url }}{{ . }}" alt="game cover image active" class="img-responsive img-active" style="border: 1px solid black"/>
        {{ end }}

        {{ with .Params.game_platform }}
          <img src="{{ $url }}img/{{ . }}.png" alt="{{ . }}" class="sidebar-game-platform img-responsive"/>
        {{ end }}
        <br/>

        {{ with .Params.game_genre }}
          &nbsp;Genre: {{ . }}<br/>
        {{ end }}
        {{ with .Params.game_release_year }}
          &nbsp;Release year: {{ . }}<br/>
        {{ end }}
        {{ with .Params.game_developer }}
          &nbsp;Developer: <a href="https://en.wikipedia.org/wiki/{{ . }}" target="_blank" class="external">{{ . }}</a><br/>
        {{ end }}
        {{ with .Params.howlongtobeat_id }}
          &nbsp;<a href="https://howlongtobeat.com/game?id={{ . }}" target="_blank" class="external">How long to beat</a>
        {{ end }}
        {{ with .Params.howlongtobeat_hrs }}
          : <code>{{ . }}</code> hours<br/>
        {{ end }}
        </p>
      </div>
    {{ end }}

    <!-- ripped from BB's minimal theme -->
    {{ $related := first 4 (where (where .Site.Pages.ByDate.Reverse ".Params.tags" "intersect" .Params.tags) "Permalink" "!=" .Permalink) }}

    {{ if $related }}

      <div class="sidebar-header">
        <span>Related Articles</span>
        <img src="/img/gob_purse.gif" alt="related articles" />
      </div>

        <ul class="sidebar-menu">
        {{ range $related }}
          <li>
            <a href="{{ .RelPermalink }}">{{ .Title }}</a>&nbsp;
            <span class="sidebar-date">
              <i class='fa fa-calendar'></i>&nbsp;
              {{ .Date.Format "01/2006" }}
              <br/>
              {{ if isset .Params "Description" }}
                {{ .Description }}
              {{ else }}
                {{ .Summary }}
              {{ end }}
            </span>
          </li>
        {{ end }}
      </ul>
      <hr/>

    {{ end }}

    <div class="sidebar-header">
      <span>Latest Articles</span>
      <img src="/img/gob_letter.gif" alt="latest articles" />
    </div>
    {{ with .Site.GetPage "section" "articles" }}
    <ul class="sidebar-menu">
      {{ range first 5 .Data.Pages.ByDate.Reverse }}
          <li>
            <a href="{{ .RelPermalink }}">{{ .Title }}</a>&nbsp;
            <span class="sidebar-date">
              <i class='fa fa-calendar'></i>&nbsp;
              {{ .Date.Format "01/2006" }}
              <br/>
              {{ if isset .Params "Description" }}
                {{ .Description }}
              {{ else }}
                {{ .Summary }}
              {{ end }}
            </span>
          </li>
      {{ end }}
    </ul>
    {{ end }}

    <div class="sidebar-header">
      <span>Looking For More?</span>
      <img src="/img/gob_waypoint.gif" alt="More information" />
    </div>
    <ul class="sidebar-menu">
      {{ range .Site.Params.navlinks }}
        <li><a href="{{ $url }}{{ .url }}">{{ .name }}</a></li>
      {{ end }}
    </ul>


    <div class="copyright">
      <p class="credit">
        {{ with .Site.Params.copyright }}
          {{ . | safeHTML }}
        {{ end }}
      </p>
    </div>
  </div>
</nav>