{{#hasRightMapForm}}
    <form role="form" class="form-horizontal">

        <div class="row">
            <div class="col-xs-6 col-sm-3">
                <div class="form-group">
                    <label for="{{iconSelectId}}" class="col-sm-4 control-label">Icon</label>
                    <div class="col-sm-8">
                        <select name="icon" id="{{iconSelectId}}" class="form-control pf-form-icon-field {{select2Class}}">
                            {{#icon}}
                            <option value="{{class}}" {{#mapIcon}}{{class}}{{/mapIcon}}>{{{unicode}}}</option>
                            {{/icon}}
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-sm-9">
                <div class="form-group">
                    <label for="{{nameInputId}}" class="col-sm-2 control-label">Name</label>
                    <div class="col-sm-10">
                        <input name="name" type="text" class="form-control" id="{{nameInputId}}" value="{{mapName}}" placeholder="Map name" data-error="Name required" data-minlength="3" data-minlength-error="Min. of 3 characters" required>
                        <span class="note help-block with-errors">Choose a meaningful name</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-6 col-sm-6">
                <div class="form-group">
                    <label for="{{scopeSelectId}}" class="col-sm-2 control-label">Scope</label>
                    <div class="col-sm-10">
                        <select name="scopeId" id="{{scopeSelectId}}" class="form-control {{select2Class}}">
                            {{#scope}}
                            <option value="{{id}}" {{#mapScopeId}}{{id}}{{/mapScopeId}}>{{label}}</option>
                            {{/scope}}
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-sm-6">
                <div class="form-group">
                    <label for="{{typeSelectId}}" class="col-sm-2 control-label">Type</label>
                    <div class="col-sm-10">
                        <select name="typeId" id="{{typeSelectId}}" class="form-control {{select2Class}}">
                            {{#type}}
                            <option value="{{id}}" {{#mapTypeId}}{{id}}{{/mapTypeId}}>{{label}}</option>
                            {{/type}}
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <input type="hidden" name="id" value="{{mapId}}" />


        <div class="{{formInfoContainerClass}} alert alert-info" style="display: none;">
            <span class="txt-color txt-color-information">Info</span>
            <small> (important non-critical information)</small>
        </div>

        <div class="{{formWarningContainerClass}} alert alert-warning" style="display: none;">
            <span class="txt-color txt-color-warning">Warning</span>
            <small> (important non-critical information)</small>
        </div>

        <div class="{{formErrorContainerClass}} alert alert-danger" style="display: none;">
            <span class="txt-color txt-color-danger">Error</span>
            <small> (important non-critical information)</small>
        </div>
    </form>
{{/hasRightMapForm}}
{{^hasRightMapForm}}
    <div class="alert alert-info">
        <span class="txt-color txt-color-info">Restricted</span>
        <small>You don´t have the required roles.</small>
    </div>
{{/hasRightMapForm}}