{{ define "header" }}
<div class="container">
    <div class="section pb-xs">
        <h1 class="title">Game Compatibility List</h1>
        <p class="content">
            The compatibility list contains all the games we tested, sorted by how well they work on the emulator.
        </p>
        <table class="table is-fullwidth">
            <tbody>
                {{ range .Site.Data.compatibility }}
                <tr>
                    <td>
                        <div class="is-square" style="background-color: {{ .color }}"></div> {{ .name }}
                    </td>
                    <td>{{ .description }}</td>
                </tr>
                {{ end }}
            </tbody>
        </table>

        <!-- <div id="highchart-container" style="height: 100px; margin: 0 auto"></div> -->
    </div>
</div>
{{ end }}

{{ define "main" }}
<div class="section pt-xs">
    <table class="table is-fullwidth">
        <thead>
            <tr>
                <th>Game Title</th>
                <th>Compatibility</th>
                <th>Date Tested</th>
            </tr>
        </thead>
        <tbody class="is-size-7">
            {{ range .Pages }}
            {{ $rating := index .Site.Data.compatibility .Params.compatibility }}
            <tr data-key="{{ .Params.section_id }}">
                <td data-title="{{ .Params.title }}">
                    <a href="{{ .Permalink }}">{{ .Params.title }}</a>
                </td>
                <td data-compatibility="{{ $rating.key }}">
                    <div class="is-square" style="background-color: {{ $rating.color }}"></div> <span>{{ $rating.name }}</span>
                </td>
                <td data-timestamp="{{ .Params.testcase_date }}">
					{{ if .Params.testcase_date }}
					<span>{{ dateFormat "January 2, 2006" .Params.testcase_date }}</span>
					{{ else }}
					<span></span>
					{{ end }}
                </td>
            </tr>
            {{ end }}
        </tbody>
    </table>
</div>
{{ end }}

{{ define "scripts" }}
{{ end }}