{{ 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 ( string .Params.compatibility | default "99" ) }}
            <td style="width: 100px;">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 }}
      {{ $testcase := . }}
      {{ $rating := index $siteCompatibility ( string $testcase.compatibility | default "0" ) }}
      <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" $testcase.date }}</td>
                <td><a href="https://community.citra-emu.org/u/{{ $testcase.owner }}/summary">{{ $testcase.author }}</a></td>
                <td>{{ $testcase.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 }}

  {{ if (where (readDir "/static/savefiles") "Name" .File.BaseFileName) }}
    <div class="row">
      <div class="col-md-12">
        <h2>Savefiles</h2>
        <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>
      </div>
    </div>
  {{ end }}

  {{ if (where (readDir "/static/images/screenshots0") "Name" .File.BaseFileName) }}
    <div class="row">
      <div class="col-md-12">
        <h2>Screenshots</h2>
        {{ $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 }}
      </div>
    </div>
  {{ end }}

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