{% extends 'base.html.twig' %}

{% block title %}{{ parent() }}{% endblock %}

{% block body %}
    Total Color Count: {{ colorCount }}<br>
    Current Color Number: <span id="currentOffsetDisplay">1</span><br>
    <form id="nextColorDataForm">
        <input type="hidden" id="previousID" name="previousID" value="0">
    </form>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        $(document).ready(function () {
            var currentOffset = 1;

            function processNextColor() {
                $.ajax({
                    type: 'POST',
                    url: '{{ path('super_admin_process_next_color') }}',
                    data: $('#nextColorDataForm').serialize(),
                    dataType: 'json',
                    encode: true,
                })
                    .done(function (data) {
                        if (data.success) {
                            $('#previousID').val(data.previous_id);
                            currentOffset++;
                            $('#currentOffsetDisplay').html(currentOffset);
                            processNextColor();
                        }
                    });
            }

            processNextColor();
        });
    </script>
{% endblock %}