<div id="pgui-view-grid">
    {include file="page_header.tpl" pageTitle=$Grid.Columns.game_short_caption->getDisplayValue($Renderer)}

    <div class="form-horizontal">

        <div class="game_recap" data-without-modal="true">
            <strong class="game_date">{$Grid.Columns.game_date->getDisplayValue($Renderer)}</strong>

            {if $Grid.Columns.recap->getValue()}
                &nbsp;<a href="{$Grid.Columns.recap->getValue()}" data-url="{$Grid.Columns.recap->getValue()}" class="pgui-field-embedded-video game_recap_watch" data-thumb="false"><span class="icon-play"></span> Watch recap</a>
            {/if}

            <div class="clearfix"></div>
        </div>

        <div class="game_container">

            <div class="game_court">

                <div class="game_court_center">
                    <div class="game_court_center_circle-big"></div>
                    <div class="game_court_center_circle-small"></div>
                    <div class="game_court_center_lines-top"></div>
                    <div class="game_court_center_lines-bottom"></div>
                </div>

                <div class="game_court_home_circle-left"></div>
                <div class="game_court_home_circle-right"></div>
                <div class="game_court_home_lines"></div>
                <div class="game_court_home_3point"></div>

                <div class="game_court_away_circle-left"></div>
                <div class="game_court_away_circle-right"></div>
                <div class="game_court_away_lines"></div>
                <div class="game_court_away_3point"></div>

            </div>

            <div class="game_result">

                <div class="game_result_away_score{if $Grid.Columns.home_team_score->getDisplayValue($Renderer) < $Grid.Columns.away_team_score->getDisplayValue($Renderer)} win-score{/if}">{$Grid.Columns.away_team_score->getDisplayValue($Renderer)}</div>

                <div class="game_result_away_logo">
                    <img src="nba_images/teams/{$Grid.Columns.away_team_short_caption->getDisplayValue($Renderer)}.svg"
                         alt="{$Grid.Columns.away_team_short_caption->getDisplayValue($Renderer)}"
                         title="{$Grid.Columns.away_team_caption->getDisplayValue($Renderer)}"
                         class="team_logo">
                </div>

                <div class="game_result_center"></div>

                <div class="game_result_home_logo">
                    <img src="nba_images/teams/{$Grid.Columns.home_team_short_caption->getDisplayValue($Renderer)}.svg"
                         alt="{$Grid.Columns.home_team_short_caption->getDisplayValue($Renderer)}"
                         title="{$Grid.Columns.home_team_caption->getDisplayValue($Renderer)}"
                         class="team_logo">
                </div>

                <div class="game_result_home_score{if $Grid.Columns.home_team_score->getDisplayValue($Renderer) > $Grid.Columns.away_team_score->getDisplayValue($Renderer)} win-score{/if}">{$Grid.Columns.home_team_score->getDisplayValue($Renderer)}</div>

            </div>

            <div class="game_panel">

                <div class="game_channel">
                    <img src="{$Grid.Columns.channel_logo->getDisplayValue($Renderer)}"
                         alt="{$Grid.Columns.channel_short_caption->getDisplayValue($Renderer)}"
                         class="channel_logo">
                </div>

                <div class="game_teams">
                    <div class="game_teams_away nba_away_team">
                        <p>{$Grid.Columns.away_team_short_caption->getDisplayValue($Renderer)}</p>
                        <img src="nba_images/teams/{$Grid.Columns.away_team_short_caption->getDisplayValue($Renderer)}.svg"
                             alt="{$Grid.Columns.away_team_short_caption->getDisplayValue($Renderer)}"
                             title="{$Grid.Columns.away_team_caption->getDisplayValue($Renderer)}"
                             class="team_logo">
                    </div>
                    <div class="game_teams_home nba_home_team">
                        <p>{$Grid.Columns.home_team_short_caption->getDisplayValue($Renderer)}</p>
                        <img src="nba_images/teams/{$Grid.Columns.home_team_short_caption->getDisplayValue($Renderer)}.svg"
                             alt="{$Grid.Columns.home_team_short_caption->getDisplayValue($Renderer)}"
                             title="{$Grid.Columns.home_team_caption->getDisplayValue($Renderer)}"
                             class="team_logo">
                    </div>
                </div>

                <div class="game_quarters">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            {foreach from=$quarters item=quarter}
                                <th>{$quarter.quarter_caption}</th>
                            {/foreach}
                        </tr>
                        <tr>
                            {foreach from=$quarters item=quarter}
                                <td class="score">{$quarter.away_team_score}</td>
                            {/foreach}
                        </tr>
                        <tr>
                            <td class="bar" colspan="{$quarters|@count}"></td>
                        </tr>
                        <tr>
                            {foreach from=$quarters item=quarter}
                                <td class="score">{$quarter.home_team_score}</td>
                            {/foreach}
                        </tr>
                    </table>
                </div>

                <div class="game_tail_away">
                </div>

                <div class="game_tail_home">
                </div>

            </div>
        </div>
    </div>

    {include file="forms/actions_view.tpl" top=false isHorizontal=$Grid.FormLayout->isHorizontal()}

</div>