<div class="card">
    <div class="card-header <%=panelCss%>">
        <h3 class="DescartesUIPanelTitle card-title"><%=requiredParamsFielset%></h3>
    </div>
    <div class="card-body">
        <div class="form-group row">
            <label class="DescartesUILabel col-sm-4 col-form-label"><%=titleInput%></label>
            <div class="col-sm-8">
                <input name="title" type="text" class="DescartesUIInput form-control" required="true" value="<%=title%>">
            </div>
        </div>
        <div class="form-group row">
            <label class="DescartesUILabel col-sm-4 col-form-label"><%=layernameInput%></label>
            <div class="col-sm-8">
                <input name="layerName" type="text" class="DescartesUIInput form-control" required="true" value="<%=layerName%>">
            </div>
        </div>
        <div class="form-group row">
            <label class="DescartesUILabel col-sm-4 col-form-label"><%=serverInput%></label>
            <div class="col-sm-8">
                <input name="urlserver" type="text" class="DescartesUIInput form-control" required="true" value="<%=urlserver%>">
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header <%=panelCss%>">
        <h3 class="DescartesUIPanelTitle card-title"><%=optionalParamsFielset%></h3>
    </div>
    <div class="card-body">
        <div class="form-group row">
            <label class="DescartesUILabel col-sm-4 col-form-label"><%=typeInput%></label>
            <div class="col-sm-8">
                <p class="DescartesUIText form-control-static"><%=type%></p>
            </div>
        </div>
        <div class="form-group row">
            <label class="DescartesUILabel col-sm-4 col-form-label"><%=versionInput%></label>
            <div class="col-sm-8">
                <input name="version" type="text" class="DescartesUIInput form-control" value="<%=version%>">
            </div>
        </div>
        <div class="form-group row">
            <label class="DescartesUILabel col-sm-4 col-form-label"><%=stylesInput%></label>
            <div class="col-sm-8">
                <input name="styles" type="text" class="DescartesUIInput form-control" value="<%=styles%>">
            </div>
        </div>
        <div class="form-group row">
            <label class="DescartesUILabel col-sm-4 col-form-label"><%=formatInput%></label>
            <div class="col-sm-8">
                <select class="DescartesUISelect form-control" name="format">
                    <%
                        _.each(formats,function(aFormat) {
                            var out = '<option value="';
                            out += aFormat.value;
                            out += '"';
                            if(format===aFormat.value) {
                                out += 'selected';
                            }
                            out += '>';
                            out += aFormat.text;
                            out += '</option>';
                            print(out);
                        });
                    %>
                </select>
            </div>
        </div>
        <div class="form-group row">
            <label class="DescartesUILabel col-sm-4 col-form-label"><%=legendInput%></label>
            <div class="col-sm-8">
                <input name="legend" type="text" class="DescartesUIInput form-control" value="<%=legend%>">
            </div>
        </div>
        <div class="form-group row">
            <label class="DescartesUILabel col-sm-4 col-form-label"><%=metadataUrlInput%></label>
            <div class="col-sm-8">
                <input name="metadataURL" type="text" class="DescartesUIInput form-control" value="<%=metadataURL%>">
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header <%=panelCss%>">
        <h3 class="DescartesUIPanelTitle card-title"><%=optionsFielset%></h3>
    </div>
    <div class="card-body">
        <div class="form-group row">
            <label class="DescartesUILabel col-sm-4 col-form-label"><%=queryableInput%></label>
            <div class="col-sm-8">
                <label class="checkbox-inline">
                    <input type="hidden" name="queryable" value="false"/>
                    <input type="checkbox" name="queryable" value="true" <%if(queryable==true){print('checked');}%>>&nbsp;
                </label>
            </div>
        </div>
        <div class="form-group row">
            <label class="DescartesUILabel col-sm-4 col-form-label"><%=sheetableInput%></label>
            <div class="col-sm-8">
                <label class="checkbox-inline">
                    <input type="hidden" name="sheetable" value="false" />
                    <input type="checkbox" name="sheetable" value="true" <%if(sheetable==true){print('checked');}%>>&nbsp;
                </label>
            </div>
        </div>
        <div class="form-group row">
            <label class="DescartesUILabel col-sm-4 col-form-label"><%=maxScaleInput%></label>
            <div class="col-sm-8">
                <input name="maxScale" type="text" class="DescartesUIInput form-control" value="<%=maxScale%>">
            </div>
        </div>
        <div class="form-group row">
            <label class="DescartesUILabel col-sm-4 col-form-label"><%=minScaleInput%></label>
            <div class="col-sm-8">
                <input name="minScale" type="text" class="DescartesUIInput form-control" value="<%=minScale%>">
            </div>
        </div>
    </div>
</div>