{% extends "_base.html.twig" %}

{% block type %}{% endblock %}

{% block inline_value %}
<input type="hidden" id="{{ var.id }}_value_bytes" value="{{ var.data }}" />
<span id="{{ var.id }}_size">{{ var.sizeUnit|number_format(2) }}</span>

<select style="margin-bottom: 0px; height: 21px; width: 70px;" onchange="updateSize(this)">
    {% for item in var.units %}
    <option value="{{ item }}"{% if item == var.unit %} selected="selected"{% endif %}>{{ item }}</option>
    {% endfor %}
</select>

<script>

    var sizes = {
    {% for unit, size in var.sizes %}
        {{ unit }}: {{ size }},
    {% endfor %}
    };

    function updateSize(select) {
        var newValue = document.getElementById('{{ var.id }}_value_bytes').value;

        document.getElementById('{{ var.id }}_size').innerHTML = (document.getElementById('{{ var.id }}_value_bytes').value / sizes[select.value]).toFixed(2);
    }
</script>
{% endblock %}