{% macro base(number) -%}
{% if state.bases[number] %}/static/img/base_filled.png{% 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 }}/{{ state.max_innings }}</div>
    <div class="weather">{{ state.weather_emoji }} {{ state.weather_text }}</div>
</div>
<div class="body">
    <div class="teams">
        <div class="team">
            <div class="team_name">{{ state.away_name }}</div>
            <div class="score">{{ state.away_score }}</div>
        </div>
        <div class="team">
            <div class="team_name">{{ state.home_name }}</div>
            <div class="score">{{ state.home_score }}</div>
        </div>
    </div>
    <div class="info">
        <div class="field">
            <img class="base base_2" src="{{ base(2) }}"/>
            <div style="display: flex;">
                <img class="base base_3" src="{{ base(3) }}"/>
                <img class="base base_1" src="{{ 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 pitcher">
            <div class="player_type">Pitcher:</div>
            <div class="player_name pitcher_name">{{ state.pitcher }}</div>
        </div>
        <div class="player batter">
            <div class="player_type">Batter:</div>
            <div class="player_name batter_name">{{ state.batter }}</div>
        </div>
    </div>
    <div class="update">
        <div class="update_emoji">{{ state.update_emoji }}</div>
        <div class="update_text">{{ state.update_text }}</div>
    </div>
</div>
<div class="footer">
    <div class="batting">{% if state.display_top_of_inning == true %}{{ state.away_name }}{% else %}{{ state.home_name }}{% endif %} batting.</div>
    <div class="leagueoruser">{{ state.leagueoruser }}</div>
</div>