<div id="boat-legend" style="
    position: fixed;
    bottom: 120px; right: 10px; width: 210px;
    color: white;
    background-color: rgba(0, 0, 0, 0.5); z-index:9999; font-size:10px;
    border:1px solid white;
    border-radius: 5px;
    padding: 2px 3px;
">
    <h6>Distance / Speed / Avg</h6>
    {% for name in names %}
    <div class="boat-entry" data-index="{{ loop.index0 }}" style="display:flex; justify-content: space-between;">
        <span style="width:150px; display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
            <span style='color:{{ colors[loop.index0 % colors|length] }};'>&#9679;</span> {{ name }}
        </span>
        <span class="distance" style="width:55px; text-align:right;">0 nm</span>
        <span class="speed" style="width:40px; text-align:right;">0 kt</span>
        <span class="avg-speed" style="width:40px; text-align:right;">0 kt</span>
    </div>
    {% endfor %}
</div>
