    <div class="mb-3">
        <div class="btn-group">
        {% if 'point' in geometrytypes %}
            <button type="button" data-tool-name="point" title="{{ "mb.core.sketch.geometrytype.point"|trans }}" class="btn btn-outline-secondary"><i class="icon-draw-point"></i></button>
        {% endif %}
        {% if 'line' in geometrytypes %}
            <button type="button" data-tool-name="line" title="{{ "mb.core.sketch.geometrytype.line"|trans }}" class="btn btn-outline-secondary"><i class="icon-draw-line"></i></button>
        {% endif %}
        {% if 'polygon' in geometrytypes %}
            <button type="button" data-tool-name="polygon" title="{{ "mb.core.sketch.geometrytype.polygon"|trans }}" class="btn btn-outline-secondary"><i class="icon-draw-polygon"></i></button>
        {% endif %}
        {% if 'rectangle' in geometrytypes %}
            <button type="button" data-tool-name="rectangle" title="{{ "mb.core.sketch.geometrytype.rectangle"|trans }}" class="btn btn-outline-secondary"><i class="icon-draw-rectangle"></i></button>
        {% endif %}
        {% if 'circle' in geometrytypes %}
            <button type="button" data-tool-name="circle" title="{{ "mb.core.sketch.geometrytype.circle"|trans }}" class="btn btn-outline-secondary"><i class="icon-draw-circle"></i></button>
        {% endif %}
        </div>
        <button type="button" disabled="disabled" title="{{ "mb.core.sketch.geometry.action.stop_drawing"|trans }}" class="btn btn-outline-secondary -fn-tool-off">
            <i class="fas fa-stop"></i>
        </button>
    </div>
    <div class="mb-3 -js-pallette-container{{- not allow_custom_color and colors | length <= 1 ? ' hidden' : '' -}}">
        <div class="btn-toolbar">
            <div class="btn-group btn-group-sm-square">
                {%- for color in colors -%}
                    <button type="button" class="btn btn-outline-secondary color-select{{- loop.first ? ' active' : '' -}}" data-color="{{ color }}"><i class="color-preview" style="background: {{ color }};">&nbsp;</i></button>
                {%- endfor -%}
            </div>
            {%- if allow_custom_color -%}
            <div class="btn-group btn-group-sm btn-group-sm-square ms-2">
                <button type="button" class="btn btn-outline-secondary color-select custom-color-select" disabled><i class="color-preview">&nbsp;</i></button>
                <button type="button" class="-fn-color-customize btn btn-outline-secondary"><i class="fas fa-caret-down fa-fw"></i></button>
            </div>
            {%- endif -%}
        </div>
    </div>

    <div class="row mb-3">
        <div class="px-3 {{- dialogMode ? ' col-7 col-xs-7' : ' col-12 col-xs-12' -}}">
            <label for="label-text" class="form-label">{{ "mb.core.sketch.inputs.label"|trans}}</label>
            <input name="label-text" type="text" class="form-control" disabled="disabled" placeholder="{{ 'mb.core.viewManager.enter_title' | trans }}...">
        </div>
        {%- if dialogMode -%}
        <div class="col-5 col-xs-5">
            <label for="label-text" class="form-label">{{- 'mb.core.sketch.inputs.radius' | trans -}}</label>
            <div class="input-group">
                <input name="radius" type="text" class="form-control" disabled="disabled">
                <span class="input-group-text">m</span>
            </div>
        </div>
        {%- endif -%}
    </div>
    <table class="table table-striped geometry-table">
        <tr class="geometry-item hidden" data-id="">
            <td class="compact row-marker">
                <i class="fas fa-angles-right fa-fw"></i>
            </td>
            <td class="geometry-name"></td>
            <td class="geometry-actions compact text-nowrap">
                <i class="geometry-zoom fa fas fa-magnifying-glass-plus clickable hover-highlight-effect" title="{{"mb.core.sketch.geometry.action.zoom" | trans }}" tabindex="0"></i>
                <span class="static-popover-wrap -js-edit-content-anchor">
                    <i class="geometry-edit fa fas fa-pencil-alt fa-pencil clickable hover-highlight-effect" title="{{"mb.core.sketch.geometry.action.edit" | trans }}" tabindex="0"></i>
                </span>
                <i class="geometry-remove fa fa-trash-o far fa-trash-alt clickable hover-highlight-effect" title="{{"mb.core.sketch.geometry.action.remove" | trans }}" tabindex="0"></i>
            </td>
        </tr>
    </table>
    <div class="hidden -js-edit-content">
        <div class="popover-body">
            <div class="row mb-3">
                <label for="label-text" class="col-form-label col-5 col-xs-5">{{- 'mb.core.sketch.inputs.label' | trans -}}</label>
                <div class="col-7 col-xs-7"><input type="text" name="label-text" class="form-control"></div>
            </div>
            <div class="row mb-3" data-toolnames="circle">
                <label for="radius" class="col-form-label col-4 col-xs-4">{{- 'mb.core.sketch.inputs.radius' | trans -}}</label>
                <div class="col-8 col-xs-8">
                    <div class="input-group">
                        <input type="text" name="radius" class="form-control">
                        <span class="input-group-text">m</span>
                    </div>
                </div>
            </div>
            <div class="text-nowrap text-end">
                <button type="button" class="btn btn-sm btn-light -fn-close">{{ 'mb.actions.close' | trans }}</button>
            </div>
        </div>
    </div>
