<script type="text/x-handlebars-template" data-name="toolbar">
    <div class="row">
        <div class="col-xs-4">
        </div>
        <div class="mapsvg-toolbar-title col-xs-4">
            Directory
        </div>
        <div class="col-xs-4">
        </div>
    </div>
</script>

<script type="text/x-handlebars-template" data-name="main">

    <form class="form-horizontal mapsvg-view-padding">

        <div class="form-group">
            <label class="col-sm-3 control-label">Directory</label>
            <div class="col-sm-9">
                <input type="checkbox" name="menu[on]" class="mapsvg-onoff" {{#if menu.on}}checked{{/if}} data-live="change"/>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">Templates</label>
            <div class="col-sm-9">
                <a href="#" class="mapsvg-template-link" data-template="directoryItem">Directory item template</a><br />
                CSS class: <a href="#tab_css" class="mapsvg-tab-link">.mapsvg-directory-item</a>

            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">Data source</label>
            <div class="col-sm-9">
                <div class="btn-group" data-toggle="buttons" id="mapsvg-directory-data-source">
                    <label class="btn btn-default {{#ifeq menu.source 'regions'}}active{{/ifeq}}">
                        <input type="radio" name="menu[source]" value="regions"  {{#ifeq menu.source 'regions'}}checked{{/ifeq}} data-live="change"/>
                        Regions
                    </label>
                    <!--<label class="btn btn-default {{#ifeq menu.source 'markers'}}active{{/ifeq}}">-->
                        <!--<input type="radio" name="menu[source]" value="markers"  {{#ifeq menu.source 'markers'}}checked{{/ifeq}} data-live="change"/>-->
                        <!--Markers-->
                    <!--</label>-->
                    <label class="btn btn-default {{#ifeq menu.source 'database'}}active{{/ifeq}}">
                        <input type="radio" name="menu[source]" value="database"  {{#ifeq menu.source 'database'}}checked{{/ifeq}} data-live="change"/>
                        Database
                    </label>
                </div>
                <p class="help-block">
                    <em><span id="mapsvg-dir-object-2">Database Object</span></em> is passed to the template</a></em>.
                </p>
            </div>
        </div>


        <div class="form-group">
            <label class="col-sm-3 control-label">Location</label>
            <div class="col-sm-9">
                <!--<div class="radio">-->
                <!--<label>-->
                <!--<input type="radio" name="menu[location]" value="mapContainer" {{#ifeq menu.location 'mapContainer'}}checked{{/ifeq}} data-live="change"/>-->
                <!--Map container-->
                <!--</label>-->
                <!--</div>-->
                <div class="radio">
                    <label>
                        <input type="radio" name="menu[location]" value="leftSidebar" {{#ifeq menu.location 'leftSidebar'}}checked{{/ifeq}} data-live="change"/>
                        Left sidebar
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="menu[location]" value="rightSidebar" {{#ifeq menu.location 'rightSidebar'}}checked{{/ifeq}} data-live="change"/>
                        Right sidebar
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="menu[location]" value="header" {{#ifeq menu.location 'header'}}checked{{/ifeq}} data-live="change"/>
                        Header
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="menu[location]" value="footer" {{#ifeq menu.location 'footer'}}checked{{/ifeq}} data-live="change"/>
                        Footer
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="menu[location]" value="custom" {{#ifeq menu.location 'custom'}}checked{{/ifeq}} data-live="change"/>
                        Custom container
                    </label>
                </div>
                <p class="help-block">
                    Manage containers in the <a href="#tab_settings" class="mapsvg-tab-link">Settings</a> tab.
                </p>
            </div>
        </div>



        <div class="form-group" id="mapsvg-directory-container-id">
            <label class="col-sm-3 control-label">Custom container ID</label>
            <div class="col-sm-9">
                <div class="input-group">
                    <div class="input-group-addon">#</div>
                    <input class="form-control" name="menu[containerId]" value="{{menu.containerId}}" data-live="keyup"/>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">Sort by</label>
            <div class="col-sm-9">
                <select id="mapsvg-directory-sort-control" class="form-control" name="menu[sortBy]" data-live="change" >
                    <option>id</option>
                </select>
            </div>
        </div>
        <!--<div class="form-group">-->
        <!--<label class="col-sm-3 control-label">Sort method</label>-->
        <!--<div class="col-sm-9">-->
        <!--<div class="btn-group" data-toggle="buttons" id="mapsvg-directory-data-source">-->
        <!--<label class="btn btn-default {{#ifeq menu.sortMethod 'alphabetical'}}active{{/ifeq}}">-->
        <!--<input type="radio" name="menu[sortMethod]" value="alphabetical"  {{#ifeq menu.sortMethod 'alphabetical'}}checked{{/ifeq}} data-live="change"/>-->
        <!--Alphabetical-->
        <!--</label>-->
        <!--<label class="btn btn-default {{#ifeq menu.sortMethod 'numeric'}}active{{/ifeq}}">-->
        <!--<input type="radio" name="menu[sortMethod]" value="numeric"  {{#ifeq menu.sortMethod 'numeric'}}checked{{/ifeq}} data-live="change"/>-->
        <!--Numeric-->
        <!--</label>-->
        <!--</div>-->
        <!--</div>-->
        <!--</div>-->
        <div class="form-group">
            <label class="col-sm-3 control-label">Sort direction</label>
            <div class="col-sm-9">
                <div class="btn-group" data-toggle="buttons" id="mapsvg-directory-data-source">
                    <label class="btn btn-default {{#ifeq menu.sortDirection 'asc'}}active{{/ifeq}}">
                        <input type="radio" name="menu[sortDirection]" value="asc"  {{#ifeq menu.sortDirection 'asc'}}checked{{/ifeq}} data-live="change"/>
                        A ... Z
                    </label>
                    <label class="btn btn-default {{#ifeq menu.sortDirection 'desc'}}active{{/ifeq}}">
                        <input type="radio" name="menu[sortDirection]" value="desc"  {{#ifeq menu.sortDirection 'desc'}}checked{{/ifeq}} data-live="change"/>
                        Z ... A
                    </label>
                </div>
            </div>
        </div>


        <div class="form-group" id="mapsvg-directory-filterout">
            <label class="col-sm-3 control-label">Filter out</label>
            <div class="col-sm-9">
                <div class="row">
                    <div class="col-xs-6">
                        <select id="mapsvg-directory-filter-control" class="form-control" name="menu[filterout][field]" data-live="change">
                            <option>id</option>
                        </select>
                    </div>
                    <div id="mapsvg-filterout-extra" style="display: none">
                        <div class="col-xs-1" style="text-align: center;line-height: 34px;">
                            =
                        </div>
                        <div class="col-xs-5">
                            <input id="mapsvg-directory-filter-value-control"  type="text" class="form-control" value="{{menu.filterout.val}}" name="menu[filterout][val]"  data-live="keyup" />
                        </div>
                    </div>
                </div>
                <p class="help-block">
                    Objects matching the criteria will be excluded from the directory.
                </p>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">Mobile: show first</label>
            <div class="col-sm-9">
                <div class="btn-group" data-toggle="buttons">
                    <label class="btn btn-default {{#ifeq menu.showFirst "map"}}active{{/ifeq}}">
                        <input type="radio" name="menu[showFirst]" value="map"  {{#ifeq menu.showFirst "map"}}checked{{/ifeq}} data-live="change"/>
                        Map
                    </label>
                    <label class="btn btn-default {{#ifeq menu.showFirst "directory"}}active{{/ifeq}}">
                        <input type="radio" name="menu[showFirst]" value="directory"  {{#ifeq menu.showFirst "directory"}}checked{{/ifeq}} data-live="change"/>
                        Directory
                    </label>
                </div>
                <p class="help-block">
                    On mobile devices, if default directory container is used - only the map or the directory
                    is shown - not both at once. The view can be switched with buttons at the bottom.
                    Choose what should be shown first.
                </p>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">Mobile: directory min-height</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" value="{{menu.minHeight}}" name="menu[minHeight]" data-live="keyup" />
                Enter value in pixels (example: 400)
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">Mobile: switch to map view on click on a directory item</label>
            <div class="col-sm-9">
                <div class="btn-group" data-toggle="buttons">
                    <label class="btn btn-default {{#if menu.showMapOnClick}}active{{/if}}">
                        <input type="radio" name="menu[showMapOnClick]" value="1"  {{#if menu.showMapOnClick}}checked{{/if}} data-live="change"/>
                        On
                    </label>
                    <label class="btn btn-default {{#unless menu.showMapOnClick}}active{{/unless}}">
                        <input type="radio" name="menu[showMapOnClick]" value="0"  {{#unless menu.showMapOnClick}}checked{{/unless}} data-live="change"/>
                        Off
                    </label>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">"No results found" text</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" autocomplete="off" name="menu[noResultsText]" value="{{menu.noResultsText}}" data-live="keyup" />
            </div>
        </div>
    </form>

</script>