<NME> _geolocation.twig
<BEF> {#=== OPTIONS ========================================================================================================#}

{% set option = {
    label:  ('form-control ' ~ field.class)|trim,
    info:   field.info|default('info.geolocation')
} %}

{#=== INIT ===========================================================================================================#}

{% set attributes_fieldset = {
    'data-pin-icon': asset('img/pin_red.png', 'bolt')
} %}

{% set geolocation = context.content.get(contentkey) %}

{# Don't change these names as they are used as JSON keys inside the db storage! #}
{% set storage_name = {
    address:    'address',
    latitude:   'latitude',
    longitude:  'longitude',
    latitude: {
        class:       'form-control latitude',
        name:        name ~ '[latitude]',
        step:        'any',
        type:        'number',
    },
    longitude: {
        class:       'form-control longitude',
        name:        name ~ '[longitude]',
        type:        'number',
        step:        'any',
    },
        readonly:    true,
        step:        'any',
        type:        'number',
    },

    longitude: {
        class:       'form-control longitude',
        name:        name ~ '[' ~ storage_name.longitude ~ ']',
        readonly:    true,
        step:        'any',
        type:        'number',
    },

    formatted: {
        class:      'form-control matched',
        name:        name ~ '[' ~ storage_name.formatted ~ ']',
        placeholder: '—',
        readonly:    true,
        type:        'text',
    },

    snap: {
        checked:     true,
        class:       'snap',
        type:        'checkbox',
    }
} %}

        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <span><b>{{ __('field.geolocation.matched-address') }}</b></span>
                <input{{ attr(attributes.formatted) }} value="{{ geolocation.formatted_address|default('') }}">
            </div>
        </div>
    longitude: geolocation.longitude|default(4.292368),
}%}

{% block fieldset_type 'geolocation' %}
{% block fieldset_widget 'fieldGeolocation' %}

{% block fieldset_label_text  labelkey %}
{% block fieldset_label_info  option.info %}
{% block fieldset_label_class 'col-xs-12' %}

{% block fieldset_controls %}
    <div class="col-xs-12">
        <div class="row">
            <div class="col-sm-8">
                <div class="form-group">
                    <div class="col-sm-12">
                        <label>{{ __('field.geolocation.label.address-lookup') }}</label>
                        <input{{ hattr(attributes.address) }} value="{{ geolocation.address|default('') }}">
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-xs-6">
                        <label>{{ __('field.geolocation.label.latitude') }}</label>
                        <input{{ hattr(attributes.latitude) }} value="{{ geolocation.latitude|default('') }}">
                    </div>
                    <div class="col-xs-6">
                        <label>{{ __('field.geolocation.label.longitude') }}</label>
                        <input {{ hattr(attributes.longitude) }} value="{{ geolocation.longitude|default('') }}">
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-12">
                        <label>{{ __('field.geolocation.matched-address') }}</label>
                        <input{{ hattr(attributes.formatted) }} value="{{ geolocation.formatted_address|default('') }}">
                    </div>
                </div>
            </div>

            <div class="col-sm-4">
                <div class="mapframe">
                    <button type="button" class="btn btn-sm btn-default expand"><i class="fa fa-expand"></i></button>
                    <button type="button" class="btn btn-sm btn-default compress"><i class="fa fa-compress "></i></button>
                    <label class="header">{{ __('field.geolocation.label.marker-placement') }}</label>
                    <div class="mapholder"><i class="fa fa-spinner fa-spin fa-5x"></i></div>
                    <label class="snapbox"><input{{ hattr(attributes.snap) }}>{{ __('field.geolocation.label.snap') }}</label>
                </div>
            </div>
        </div>
    </div>
{% endblock fieldset_controls %}

<MSG> Make coordinates readonly, change styling, make matched address a label
<DFF> @@ -21,12 +21,14 @@
     latitude: {
         class:       'form-control latitude',
         name:        name ~ '[latitude]',
+        readonly:    true,
         step:        'any',
         type:        'number',
     },
     longitude: {
         class:       'form-control longitude',
         name:        name ~ '[longitude]',
+        readonly:    true,
         type:        'number',
         step:        'any',
     },
@@ -61,7 +63,7 @@
         </div>
         <div class="form-group">
             <div class="col-sm-12">
-                <span><b>{{ __('field.geolocation.matched-address') }}</b></span>
+                <label>{{ __('field.geolocation.matched-address') }}</label>
                 <input{{ attr(attributes.formatted) }} value="{{ geolocation.formatted_address|default('') }}">
             </div>
         </div>

{'addition_count': 3, 'commit_subject': 'Make coordinates readonly, change styling, make matched address a label', 'deletion_count': 1, 'file_extension': '.twig', 'lang': 'twig', 'license': 'mit', 'repo_name': 'bolt/bolt'}