<div class="card">
    <div class="row no-gutters">
        <div class="col-auto">
            <img src="{{game.screenshot.url}}" class="img-fluid" alt="Screenshot of {{game.name}}">
        </div>
        <div class="col">
            <div class="card-block px-2">
                <h4 class="card-title">{{game.name}}</h4>
                <p class="card-text">{{game.description|truncatechars:220}}</p>
                <a href="{{game.get_absolute_url}}" class="btn btn-primary">More</a>
                <a href="{{game.rom_file.url}}" class="btn btn-alert">Download</a>
            </div>
        </div>
    </div>
    <div class="card-footer w-100 text-muted">
        <a href="{{game.game_system.get_absolute_url}}">
            <span class="system-badge badge badge-success {{game.game_system.retropie_slug}}">{{game.game_system.name|upper}}</span>
        </a>

        <div id="genre-badges" style="float:right">
        {% for genre in game.genre.all %}
        <a href="{{genre.get_absolute_url}}">
            <span class="badge">{{genre.name}}</span>
        </a>
        {% endfor %}
        </div>
    </div>
</div>
<br />
