<html> <!-- vasl-templates:id {{SNIPPET_ID}} -->

<head>
<meta charset="utf-8">
<style>
{{CSS:common}}
.note { font-size: 90% ; font-style: italic ; color: #808080 ; white-space: nowrap ; }
.capability { white-space: nowrap ; }
.capability .brewup { color: #a04010 ; }
.comment { font-size: 96% ; font-style: italic ; color: #404040 ; white-space: nowrap ; }
.comment .split-mg-red { color: #a04010 ; }
</style>
</head>

{# NOTE: We set a narrow width to stop lots of notes making us very wide. #}
<table style="
  {%if OB_VO_WIDTH%} width: {{OB_VO_WIDTH}} ; {%else%} width: 1px ; {%endif%}
">

<tr>
    <td colspan="2" style="
      background: {{OB_COLOR}} ;
      border-bottom: 1px solid {{OB_COLOR_2}} ;
      padding: 2px 5px ;
      font-size: 105% ; font-weight: bold ;
      white-space: nowrap ;
    ">
        {# CSS "white-space:nowrap" doesn't always work in VASSAL, we need to use <nobr> and &nbsp; here :-/ #}
        <nobr>{{INCLUDE:player_flag_large}}{{PLAYER_NAME|nbsp}}&nbsp;{{VO_TYPES}}</nobr>

{%for vo in OB_VO%}

{% if vo.index == 0 %}
    <tr>
    {% set PADDING_TOP = 2 %}
{%else%}
    <tr style="border-top:1px dotted #e0e0e0;">
    {% set PADDING_TOP = 5 %}
{%endif%}

{% if vo.name_len <= MAX_VO_NAME_LEN %}
{# NOTE: If the vehicle/ordnance name is short, put the capabilities to the right of it. #}
        <td valign="top" style="padding:{{PADDING_TOP}} 5px 2px 5px;">
            {{INCLUDE:ob_vo.name}} <br>
            {{INCLUDE:ob_vo.image}}
        {% set MAX_CAPABILITIES = 4 %}
{%else%}
{# NOTE: If the vehicle/ordnance name is long, put it on its own line, and the capabilities underneath. #}
        <td colspan="2" valign="top" style="padding:{{PADDING_TOP}} 5px 0 5px;">
            {{INCLUDE:ob_vo.name}}
    <tr>
        <td valign="top" style="padding:0 5px 2px 5px;">
            {{INCLUDE:ob_vo.image}}
        {% set MAX_CAPABILITIES = 3 %}
{%endif%}

{% if vo.small_piece %}
    {% set MAX_CAPABILITIES = MAX_CAPABILITIES - 1 %}
{%endif%}

{% if vo.capabilities_len > MAX_CAPABILITIES or !vo.image %}
{# NOTE: If there are a lot of capabilities, tuck the note number & notes under the image. #}
{# But if there is no image, we always do this, and squeeze them in to the left of the capabilities. #}
            <div class="note" style="margin-top:5px;">
                {{INCLUDE:ob_vo.notes}}
            </div>
{%endif%}

        <td valign="top" style="padding:5px 5px 2px 5px;">
            {%for cap in vo.capabilities%} <div class="capability"> {{cap}} </div> {%endfor%}
            {%for cmnt in vo.comments%} <div class="comment"> {{cmnt}} </div> {%endfor%}

{% if vo.capabilities_len <= MAX_CAPABILITIES and vo.image %}
{# NOTE: If there are only a few capabilities, let the note number & notes spread full-width. #}
{# But if there is no image, we never do this (see above). #}
    <tr>
        <td class="note" valign="top" colspan="2" style="padding:2px 5px;">
            {{INCLUDE:ob_vo.notes}}
{%endif%}

{%endfor%}

</table>

</html>
