{{ define "main" }}
<div class="row">
    <div
        class="col-xs-12 col-sm-12 col-md-4 col-lg-4 last-xs last-sm first-md first-lg sidebar"
    >
        {{ if .Params.toc }}
        <article>
            <header>Содержание</header>
            <aside>{{ .TableOfContents }}</aside>
        </article>
        {{ end }}
        <article>
            <header>Навигатор</header>
            {{ partial "menu.html" (dict "menuID" "sections" "page" .) }}
        </article>
    </div>
    <div class="h-entry col-xs-12 col-sm-12 col-md-8 col-lg-8">
        <article>
            <header>
                <div class="row between-xs">
                    <span class="p-name"> {{ .Title }} </span>
                </div>
            </header>
            <div id="pico-container">
                <!-- <div class="buttons">
                    <button
                        id="pico-up"
                        style="grid-area: up"
                        onclick="PicoPress(3, 0)"
                    >
                        &uArr;
                    </button>
                    <button
                        id="pico-down"
                        style="grid-area: down"
                        onclick="PicoPress(3, 0)"
                    >
                        &dArr;
                    </button>
                    <button
                        id="pico-left"
                        style="grid-area: left"
                        onclick="PicoPress(3, 0)"
                    >
                        &lArr;
                    </button>
                    <button
                        id="pico-right"
                        style="grid-area: right"
                        onclick="PicoPress(3, 0)"
                    >
                        &rArr;
                    </button>
                    <button
                        id="pico-a"
                        style="grid-area: a"
                        onclick="PicoPress(3, 0)"
                    >
                        A
                    </button>
                    <button
                        id="pico-b"
                        style="grid-area: b"
                        onclick="PicoPress(3, 0)"
                    >
                        B
                    </button>
                    <div class="square_hack"></div>
                </div> -->
            </div>
            <h2>Управление</h2>
            <h3>Игрок 1</h3>
            <img src="/img/p8_lf.png" />&larr;&nbsp;
            <img src="/img/p8_rt.png" />&rarr;&nbsp;
            <img src="/img/p8_up.png" />&uarr;&nbsp;
            <img src="/img/p8_dw.png" />&darr;&nbsp;
            <img src="/img/p8_x.png" />Z C&nbsp;
            <img src="/img/p8_o.png" />X V&nbsp;
            <h3>Игрок 2</h3>
            <img src="/img/p8_lf.png" /> S&nbsp;
            <img src="/img/p8_rt.png" /> F&nbsp;
            <img src="/img/p8_up.png" /> E&nbsp;
            <img src="/img/p8_dw.png" /> D&nbsp;
            <img src="/img/p8_x.png" />Q W&nbsp;
            <img src="/img/p8_o.png" />TAB&nbsp;
            <h3>Пауза</h3>
            P/Enter
            <footer>
                <div class="row between-xs">
                    <a href="{{ .Params.Game }}">Скачать</a>
                </div>
            </footer>
        </article>
        {{ if .Params.comments }} {{ partial "comments.html" . }} {{ end }}
    </div>
</div>

<script src="/js/picoplayer.js"></script>
<script src="/js/pico8.js"></script>

<script>
    document.addEventListener("DOMContentLoaded", function (event) {
        PicoPlayer("pico-container", "{{.Params.Game}}");
    });
</script>
{{ end }}