{{ define "main" }}
  {{ $BaseURL := .Site.BaseURL }}
  {{ $gameName := .File.BaseFileName }}
  {{- $type := index .Site.Data.gameTypes (.Params.game_type | default "3ds") }}

  <div class="alert alert-warning">
    <div class="row">
      <div class="col-md-2">
        <strong>Read First!</strong>
      </div>
      <div class="col-md-10">
        The below game article is based on user submitted content.<br>
        See a mistake? Want to contribute?
        <a href="https://github.com/citra-emu/citra-games-wiki/wiki/{{ .File.BaseFileName }}/_edit/">Edit this game article on Github</a>
      </div>
    </div>
  </div>

  {{- if eq .Params.incomplete true }}
    <div class="alert alert-danger">
      <div class="row">
        <div class="col-md-2">
          <strong>Notice</strong>
        </div>
        <div class="col-md-10">
          <p>This page is considered <b>INCOMPLETE</b> due to any one of the following reasons:</p>
          <ul>
            <li>Missing screenshots</li>
            <li>Missing/insufficient wiki article</li>
            <li>Unverified game compatibility rating</li>
          </ul>
          <p>The information below may not accurately represent your experience with Citra.</p>
          <p>Pages that are left incomplete may be subject for removal.</p>
        </div>
      </div>
    </div>
  {{ end }}

	<h1>{{ .Title }}</h1>
  <div class="row">
    <div class="col-md-5">
        {{ if (fileExists (print "static/images/game/boxart/" .File.BaseFileName ".png")) }}
          <div class="boxart">
              <img src="/images/game/boxart/{{ .File.BaseFileName }}.png" />
          </div>  
        {{ end }}
    </div>
    <div class="col-md-7">
      <!-- Metadata information -->
      <table class="table table-responsive table-striped table-bordered">
        <tbody>
          <tr>
            {{- $rating := index .Site.Data.compatibility .Params.compatibility }}
            <td style="width: 120px;">Rating</td>
            <td><b><div class="square-icon" style="background-color: {{ $rating.color }}"></div> {{ $rating.name }}</b><br />{{ $rating.description }}</td>
          </tr>
          <tr>
            <td>Type</td>
            <td>
              <img src="{{ .Site.BaseURL }}/images/game/types/{{ $type.key }}.png" title="{{ $type.name }}" />
              {{- if eq $type.key "3ds" }}
              {{- else if eq $type.key "vc" }}
                {{- $vcSystem := index .Site.Data.vcSystems .Params.vc_system }}
                {{ $vcSystem.name }}
              {{- else }}
                {{ $type.name }}
              {{ end }}
            </td>
          </tr>
          <tr>
            <td>Game Icon</td>
            <td>
                {{ if (fileExists (print "static/images/game/icons/" .File.BaseFileName ".png")) }}
                  <img src="/images/game/icons/{{ .File.BaseFileName }}.png" />
                {{ end }}
            </td>
          </tr>
          <tr>
            <td>Title IDs</td>
            <td>
              {{ range .Params.releases }}
                <div><img src="{{ $BaseURL }}/images/regions/{{ .region }}.png" /> {{ .id }}</div>
              {{ end }}
            </td>
          </tr>
          <tr>
            <td>System Files Required?</td>
            <td>{{ if eq .Params.needs_system_files true }}Yes{{ else if eq .Params.needs_system_files false }}No{{ else }}N/A{{ end }}</td>
          </tr>
          <tr>
            <td>Shared Font Required?</td>
            <td>{{ if eq .Params.needs_shared_font true }}Yes{{ else if eq .Params.needs_shared_font false }}No{{ else }}N/A{{ end }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <p>{{ .Params.Description }}</p>

	{{ .Content }}

  <!-- Compatibility -->
  {{ if isset .Params "testcases" }}
  <div class="row">
    <div class="col-md-12">
      <h2>Compatibility</h2>
      <table class="table table-responsive table-striped">
        <thead>
          <tr>
            <th class="advanced-view">ID</th>
            <th>Build Date</th>
            <th>Tested By</th>
            <th>Hardware</th>
            <th>Citra Version</th>
            <th>Rating</th>
          </tr>
        </thead>
        <tbody>
          {{ $siteCompatibility := .Site.Data.compatibility }}
          {{ range .Params.testcases }}
            {{- $rating := index $siteCompatibility .compatibility }}
                    <tr>
                      <td class="advanced-view">{{ if isset . "id" }} {{ .id }} {{ end }}</td>
                      <td>{{ if isset . "buildDate" }} {{ dateFormat "01/2/2006" .buildDate }} {{ end }}</td>
                      <td><a href="https://community.citra-emu.org/u/{{ .author }}/summary">{{ .author }}</a> <small>on {{ dateFormat "01/02/2006" .date }}</small></td>
                      <td>{{ .cpu }}<br />{{ .gpu }}<br />{{ .os }}</td>
                      <td>{{ if isset . "buildName" }}{{ .buildName }} Build<br />{{ end }}{{ .version }}</td>
                      <td><b><div class="square-icon" style="background-color: {{ $rating.color }}"></div> {{ $rating.name }}</b></td>
                    </tr>
          {{ end }}
    </tbody>
  </table>
  </div>
  </div>
  {{ end }}

  <!-- Github Issues -->
  <div class="row">
    <div class="col-md-12">
      <h2>Known Issues</h2>
      {{- if gt (len .Params.issues) 0 }}
      <table class="table table-responsive table-striped">
        <thead>
          <tr>
            <th>Title</th>
            <th>Created</th>
            <th>Last Updated</th>
          </tr>
        </thead>
        <tbody>
          {{- range .Params.issues }}
          <tr>
            <td><a href="https://github.com/citra-emu/citra/issues/{{ .id }}">{{ .title }}</a></td>
            <td>{{ dateFormat "January 2, 2006" .created_at }}</td>
            <td>{{ dateFormat "January 2, 2006" .updated_at }}</td>
          </tr>
          {{- end }}
        </tbody>
      </table>
      {{- else }}
        <p>No issues have been reported for this game.</p>
      {{- end }}
    </div>
  </div>

  <!-- Savefiles -->
  <div class="row">
    <div class="col-md-12">
      <h2>Savefiles</h2>
      {{ if (where (readDir "/static/savefiles") "Name" .File.BaseFileName) }}
      <table class="table table-responsive table-striped">
        <thead>
          <tr>
            <th>Name</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
          {{ range .Params.savefiles }}
            <tr>
              <td><a href="/savefiles/{{ $gameName }}/{{ .basename }}.zip">{{ .title }}</a></td>
              <td>{{ .description }}</td>
            </tr>
          {{ end }}
        </tbody>
      </table>
      {{ else }}
      <p>No savefiles have been uploaded for this game.</p>
      {{ end }}
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <h2>Screenshots</h2>
      {{ if (where (readDir "/static/images/screenshots0") "Name" .File.BaseFileName) }}
        {{ $files := readDir (printf "/static/images/screenshots0/%s/" .File.BaseFileName) }}
        {{ range $index, $element := $files }}
          <div class="popup-gallery col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="/images/screenshots0/{{ $gameName }}/{{ .Name }}">
              <img class="img-responsive nearest-neighbor" src="/images/screenshots0/{{ $gameName }}/{{ .Name }}">
            </a>
          </div>
        {{ end }}
      {{ else }}
        <p>No screenshots have been uploaded for this game.</p>
      {{ end }}
    </div>
  </div>
{{ end }}

{{ define "scripts" }}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js" integrity="sha256-P93G0oq6PBPWTP1IR8Mz/0jHHUpaWL0aBJTKauisG7Q=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" integrity="sha256-PZLhE6wwMbg4AB3d35ZdBF9HD/dI/y4RazA3iRDurss=" crossorigin="anonymous" />

  <script type="text/javascript">
    $(document).ready(function() {
      $('.popup-gallery').magnificPopup({
        delegate: 'a',
        type: 'image',
        tLoading: 'Loading image #%curr%...',
        mainClass: 'mfp-img-mobile',
        gallery: {
          enabled: true,
          navigateByImgClick: true,
          preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
        },
        image: {
          tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
          titleSrc: function(item) {
            return item.el.attr('title');
          }
        }
      });
    });
  </script>
{{ end }}