<section class="tab scrollable isometric-tab-content {{tab.cssClass}}"data-tab="isometric" data-group="sheet">
  {{!-- Tab content here --}}
  <div class="isometric-config-tab-content">
    <section>
        <!-- Enable Isometric -->
        <div class="form-group">
            <label for="{{rootId}}-isometric-perspective-enable-isometrics">{{localize 'isometric-perspective.scene_enableIsometric'}}</label>
            <input id="{{rootId}}-isometric-perspective-enable-isometrics" type="checkbox" name="flags.isometric-perspective.isometricEnabled" {{checked document.flags.isometric-perspective.isometricEnabled}}/>
        </div>
        
        <!-- Transform Background -->
        <div class="form-group">
            <label for="{{rootId}}-isometric-perspective-isometrics-background-transfrom" >{{localize 'isometric-perspective.scene_transform_name'}}</label>
            <input id="{{rootId}}-isometric-perspective-isometrics-background-transfrom" type="checkbox" name="flags.isometric-perspective.isometricBackground" {{checked document.flags.isometric-perspective.isometricBackground}}/>
        </div>
        <p class="hint">{{localize 'isometric-perspective.scene_transform_hint'}}</p>

        <hr>

        <!-- Scale Control -->
        <div class="form-group">
            <label for="isometric-perspective-isometrics-scale" >{{localize 'isometric-perspective.scene_scale_name'}}</label>
            <div class="form-fields">
                <range-picker id="{{rootId}}-isometric-perspective-isometrics-scale" name="flags.isometric-perspective.isometricScale" value="{{document.flags.isometric-perspective.isometricScale}}" min="0.5" max="3" step="0.01"></range-picker>
            </div>
            <p class="hint">{{localize 'isometric-perspective.scene_scale_hint_1'}} <i class="fas fa-ruler"></i> {{localize 'isometric-perspective.scene_scale_hint_2'}}</p>
        </div>
    </section>

    <!-- Projection Type Dropdown -->
    <div class="form-group">
        <label>{{localize 'isometric-perspective.scene_dropdown_name'}}</label>
        <div class="form-fields">
        <select id="{{rootId}}-isometric-perspective-projection-type" name="flags.isometric-perspective.projectionType">
            {{#each projectionTypes}}
                <option value="{{this}}" {{#if (eq this ../document.flags.isometric-perspective.projectionType)}}selected{{/if}}>{{this}}</option>
            {{/each}}
            </select>
        </div>
        <p class="hint">{{localize 'isometric-perspective.scene_dropdown_hint'}}</p>          
    </div>

    <div class="form-group custom-projection-container hidden">
        <label>{{localize 'isometric-perspective.custom_projection_name'}}</label>
        <div class="form-fields">
            <input
                type="text" 
                name="flags.isometric-perspective.customProjection" 
                placeholder="0, 0, 0, 0, 0, 0, 0" 
                disabled
            >
        </div>
        <p class="hint">{{localize 'isometric-perspective.custom_projection_hint'}}  <a href='https://github.com/arlosmolten/isometric-perspective/wiki/2.-Advanced-Features#2-custom-isometric-projection'>Manual</a> &  <a href='https://arlosmolten.github.io/isometric-perspective/'>Website</a></p>
    </div>
  </div>
</section>