<svg 
    id="{{ id }}"
    class="absolute chart"
    x-data="{ resizing: false }"
    x-init="
    window.addEventListener('resize', () => {
        resizing = true;
    });
    "
    x-show="!resizing"
    viewBox="0 0 {{ width }} {{ height }}" 
    xmlns="http://www.w3.org/2000/svg" 
    width="{{ width }}" 
    height="{{ height }}"
    {% if swap_oob %}
        hx-swap-oob="true"
    {% endif %}
    >

    <style>
        .small {
            font-size: 10px;
        }
    </style>

    {% if title %}
    <text 
    class="title"
    x="{{ width_half }}" 
    y="27" 
    text-anchor="middle"
    >
        {{ title }}
    </text>
    {% endif %}

    {{ x_axis|safe }}
    {{ y_axis|safe }}

    {% for bar in bars %}
        <rect 
        class="bar"
        x="{{ bar.x }}" 
        y="{{ bar.y }}" 
        width="{{ bar.width }}" 
        height="{{ bar.height|add:'-1' }}" 
        rx="5" 
        ry="5"
        >
        </rect>
        
    {% endfor %}
</svg>

<div class="flex flex-col items-center spinner-container">
    <svg class="h-full absolute" viewBox="0 0 100 100">
        <circle class="spinner" cx="50" cy="50" r="30" stroke-width="2" stroke-linecap="round" pathLength="100" stroke="hsl(0, 49%, 41%)" fill="transparent" />
    </svg>
</div>