{% load static %}
<link rel="stylesheet" type="text/css" media="screen" href="{% static 'bloonsa_game/css/levelinfo.css' %}"/>
<div id="current_level_container" class="wide left">
    <div id="level-info-box" class="invisible">
        <div id="level-info-left">
            <div id="level-title">
                <span id="level-name">The volcano complex</span>
                <span> </span>
                <span id="level-id">(19291)</span>
            </div>
            <div id="level-author">
                <span id="level-author-pre">by </span>
                <span id="level-author-name">SkibidiAmogus</span>
                <span> </span>
                <span id="level-author-id">(1121)</span>
            </div>

            <div id=level-stars>
                {% for i in '0123456789' %}
                    <object data="{% static 'bloonsa_game/img/levelinfo/star.svg' %}"
                            class="level-star-img filter-softblue"
                            id="level-star{{i}}"
                            type="image/svg+xml"></object>
                {% endfor %}
            </div>

            <div id="level-stats">
                <div id="level-wins">
                    <object data="{% static 'bloonsa_game/img/levelinfo/wins.svg' %}"
                            class="level-wins-img filter-orange"
                            type="image/svg+xml"></object>
                    <span id="level-wins-number">7</span>
                    <span> </span>
                    <span id="level-wins-percentage">(2.87%)</span>
                </div>
                <div id="level-plays">
                    <object data="{% static 'bloonsa_game/img/levelinfo/plays.svg' %}"
                            class="level-plays-img filter-grey"
                            type="image/svg+xml"></object>
                    <span id="level-plays-number">242</span>
                </div>
                <div id="level-glitches">
                    <object data="{% static 'bloonsa_game/img/levelinfo/dart.svg' %}"
                            class="level-glitches-img filter-orange"
                            type="image/svg+xml"></object>
                    <span id="level-glitch-number">1</span>
                </div>
            </div>
        </div>
        <div id="level-info-right">
            <div id="level-pb">
                <div id="level-pb-text">Personal best</div>
                <div id="level-pb-pops">
                    <object data="{% static 'bloonsa_game/img/levelinfo/bloon.svg' %}"
                            class="level-pops-img filter-red"
                            type="image/svg+xml"></object>
                    <span id="level-pb-pops-number">126</span>
                    <span id="level-pb-pops-separator"> / </span>
                    <span id="level-target">120</span>
                </div>
                <div id="level-pb-darts">
                    <object data="{% static 'bloonsa_game/img/levelinfo/dart.svg' %}"
                            class="level-darts-img filter-black"
                            id="level-pb-darts-img"></object>
                    <span id="level-pb-darts-number">2</span>
                    <span> </span>
                    <span id="level-pb-darts-glitch">+1</span>
                </div>
            </div>
        </div>
    </div>
</div>