{{define "content"}}
<h1 class="my-4">{{.Software.Title}}</h1>

<div class="row">
    {{if .WebPlayableRelease}}
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-header">
                <h3>Play</h3>
            </div>
            <div class="card-body">
                <div class="ratio ratio-4x3" style="max-width: 960px; margin: 0 auto;">
                    <iframe id="gameFrame" src="/play/{{.Software.Name}}/{{.WebPlayableRelease.Version}}/content/index.html"
                        frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
            <div class="card-footer">
                <div class="btn-group d-flex justify-content-center" role="group" aria-label="Game controls">
                    <button id="fullscreenButton" class="btn btn-secondary btn-sm">Fullscreen</button>
                </div>
            </div>
        </div>
    </div>
    {{end}}
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-header">
                <h3>Overview</h3>
            </div>
            <div class="card-body">
                <table class="table table-bordered">
                    <tbody>
                        <tr>
                            <th scope="row" style="width: 30%;">Title</th>
                            <td>{{.Software.Title}}</td>
                        </tr>
                        <tr>
                            <th scope="row">Author</th>
                            <td>{{.Software.Author}}</td>
                        </tr>
                        <tr>
                            <th scope="row">Description</th>
                            <td>{{.Software.Desc}}</td>
                        </tr>
                        <tr>
                            <th scope="row">Version</th>
                            <td>{{.LatestRelease.Version}}</td>
                        </tr>
                        <tr>
                            <th scope="row">License</th>
                            <td>{{.Software.License}}</td>
                        </tr>
                        <tr>
                            <th scope="row">Website</th>
                            <td><a href="{{.Software.Site}}" target="_blank">{{.Software.Site}}</a></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="card-footer">
                <div class="btn-group d-flex justify-content-end" role="group" aria-label="Operations">
                    <a href="/download/{{.Software.Name}}/source" class="btn btn-primary btn-sm">Source</a>
                    <a href="/download/{{.Software.Name}}/cartridge" class="btn btn-primary btn-sm">Cartridge</a>
                </div>
            </div>
        </div>
    </div>
</div>

<h3>Releases</h3>
<div class="row">
    {{range .Releases}}
    <div class="col-12 mb-4">
        <div class="card h-100">
            <div class="card-body">
                <h5 class="card-title">Version: {{.Version}}</h5>
                <p class="card-subtitle mb-2 text-muted">Released At: {{.CreatedAt.Format "2006-01-02 15:04:05"}}</p>
            </div>
            <div class="card-footer">
                <div class="btn-group d-flex justify-content-center" role="group" aria-label="Operations">
                    {{if .HTMLFolderPath}}
                    <a href="/play/{{$.Software.Name}}/{{.Version}}" class="btn btn-primary btn-sm">Play</a>
                    {{end}}
                    <a href="/download/{{$.Software.Name}}/{{.Version}}/source"
                        class="btn btn-primary btn-sm">Source</a>
                    <a href="/download/{{$.Software.Name}}/{{.Version}}/cartridge"
                        class="btn btn-primary btn-sm">Cartridge</a>
                </div>
            </div>
        </div>
    </div>
    {{end}}
</div>
{{end}}