{{ define "main" }}
  {{ $BaseURL := .Site.BaseURL }}
  {{ $gameName := .File.BaseFileName }}

  <div class="alert alert-info">
    <div class="row">
      <div class="col-md-2">
        <strong>Reminder!</strong>
      </div>
      <div class="col-md-10">
        <p>Citra is currently in very early stages of development. Games usually run less than full-speed even on the best computers. Expect bugs and glitches to appear in most games. Many features found in more mature emulators are still in the works.</p>
      </div>
    </div>
  </div>

  <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>

	<h1>{{ .Title }}</h1>
  <div class="row" style="padding-bottom: 16px;">
    <div class="col-md-5">
      <img class="center-block img-responsive compatibility-boxart" style="padding-top: 6px;" src="{{ .Site.BaseURL }}images/game/boxart/{{ .Params.Banner | default (print .File.BaseFileName ".png") }}" />
    </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;">Status</td>
            <td><b><div class="square-icon" style="background-color: {{ $rating.color }}"></div> {{ $rating.name }}</b><br />{{ $rating.description }}</td>
          </tr>
          <tr>
            <td>Game Icon</td>
            <td><img class="img-responsive" src="{{ .Site.BaseURL }}images/game/icons/{{ .File.BaseFileName }}.png" /></td>
          </tr>
          <tr>
            <td>Title IDs</td>
            <td>
              {{ range .Params.releases }}
                <div><img src="{{ $BaseURL }}images/regions/{{ .region }}.png" /> {{ .title }}</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" }}
    {{ $siteCompatibility := .Site.Data.compatibility }}
    {{ range .Params.testcases }}
      {{- $rating := index $siteCompatibility .compatibility }}
      <div class="row">
        <div class="col-md-12">
          <h2>Compatibility</h2>
          <table class="table table-responsive table-striped">
            <thead>
              <tr>
                <th>Date</th>
                <th>Tested By</th>
                <th>Citra Version</th>
                <th>Rating</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>{{ dateFormat "January 2, 2006" .date }}</td>
                <td><a href="https://community.citra-emu.org/u/{{ .author }}/summary">{{ .author }}</a></td>
                <td>{{ .version }}</td>
                <td><b><div class="square-icon" style="background-color: {{ $rating.color }}"></div> {{ $rating.name }}</b></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    {{ end }}
  {{ end }}

  <!-- Github Issues -->
  <div class="row">
    <div class="col-md-12">
      <h2>Known Issues</h2>
      {{- if isset .Params "issues" }}
      <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>
            <th><a href="https://github.com/citra-emu/citra/issues/{{ .number }}">{{ .title }}</a></th>
            <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>
            <th>Uploaded By</th>
            <th>Date</th>
          </tr>
        </thead>
        <tbody>
          {{ range .Params.savefiles }}
            <tr>
              <td><a href="/savefiles/{{ $gameName }}/{{ .filename }}">{{ .title }}</a></td>
              <td>{{ .description }}</td>
              <td><a href="https://community.citra-emu.org/u/{{ .author }}/summary">{{ .author }}</a></td>
              <td>{{ dateFormat "January 2, 2006" .date }}</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 }}