{% macro base(number) -%}
src={% if state.bases[number] %}"/static/img/base_filled.png" alt="{{state.bases[number]}}"{% else %}"/static/img/base_empty.png"{% endif %}
{%- endmacro %}
{% macro out(number) -%}
{% if number <= state.outs %}/static/img/out_out.png{% else %}/static/img/out_in.png{% endif %}
{%- endmacro %}
<div class="header">
    <div class="inning">Inning: {% if state.display_top_of_inning == true %}🔼{% else %}🔽{% endif %} {{ state.display_inning | escape }}/{{ state.max_innings | escape }}</div>
    <div class="title">{{ state.title  | escape }}</div>
    <div class="weather">{{ state.weather_emoji | escape }} {{ state.weather_text  | escape }}</div>
</div>
<div class="body">
    <div class="teams">
        <div class="team">
            <div class="team_name">{{ state.away_name | escape }}</div>
            <div class="score">{{ state.away_score }}</div>
        </div>
        <div class="team">
            <div class="team_name">{{ state.home_name | escape }}</div>
            <div class="score">{{ state.home_score }}</div>
        </div>
    </div>
    <div class="info">
        <div class="field">
            <img class="base base_2" {{ base(2) }}/>
            <div style="display: flex;">
                <img class="base base_3" {{ base(3) }}/>
                <img class="base base_1" {{ base(1) }}/>
            </div>
        </div>
        <div class="outs">
            <div class="outs_title">OUTS</div>
            <div class="outs_count">
                <img class="out" src="{{ out(1) }}"/>
                <img class="out" src="{{ out(2) }}"/>
            </div>
        </div>
    </div>
    <div class="players">
        <div class="player_type">PITCHER</div>
        <div class="player_name pitcher_name">{{ state.pitcher | escape }}</div>
        <div class="player_type">BATTER</div>
        <div class="player_name batter_name">{{ state.batter | escape }}</div>
    </div>
    <div class="update">
        <div class="update_emoji">{{ state.update_emoji | escape }}</div>
        <div class="update_text">{{ state.update_text | escape }}</div>
    </div>
</div>
<div class="footer">
    <div class="batting">{% if state.display_top_of_inning == true %}{{ state.away_name | escape }}{% else %}{{ state.home_name | escape }}{% endif %} batting.</div>
    <div class="leagueoruser">{{ state.leagueoruser | escape }} (<a href="/game?timestamp={{ timestamp }}">share</a>)</div>
</div>