{% extends '@EasyAdmin/page/content.html.twig' %}
{% block head_javascript %}
    {{ parent() }}
    <script type="module" src="{{ asset('admin/js/map_calculator.js') }}"></script>
{% endblock %}

{% block content_title 'Price Calculator' %}
{% block main %}
    {% form_theme form '@EasyAdmin/symfony-form-themes/bootstrap_5_layout.html.twig' %}
    {% form_theme form.areas 'admin/map_calculator/themes/areas.html.twig' %}
<div class="configurator_container row ">
    <div class="col-6" id="mapHolder">
        <div id="map" class="h-100"></div>
    </div>
    <div class="controls col-6">
        {{ form_start(form) }}
        {{ form_widget(form.areas, {'attr':{'class':'form_areas', 'data-index':form.areas.children|length}}) }}

        <button type="button" class="btn btn-link add_item_link" data-collection-holder-class="form_areas">
            <i class="fa fa-plus pr-1"></i>
            New area
        </button>
        <div>
            {{ form_row(form.save) }}
            {{ form_end(form) }}
            <div style="display: none">
                <button type="button" class="btn btn-danger field-collection-delete-button" title="Remove the item"
                        onclick="this.closest('.entryContainer').remove(); return false;">
                    <span class="fa fa-times"></span>

                </button>
            </div>
            <br>
        </div>

    </div>
    <script
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDMLRhyOMIQBCui_M4YDZsV7it6Y1vv56c&callback=initMap&v=weekly&libraries=geometry"
            defer
    ></script>
</div>
    {% endblock %}