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

<script type="text/x-handlebars-template" data-name="main">
  <form class=" mapsvg-view-padding">
      <div class="form-group row mb-3">
          <label class="col-md-3 col-form-label">Templates</label>
          <div class="col-md-9"><a href="#" class="mapsvg-template-link" data-template="detailsViewRegion">Region
              Details View template</a>
              <br> <a href="#" class="mapsvg-template-link" data-template="detailsView">DB Object Details View
                  template</a>
              <br>CSS class: <a href="#tab_css" class="mapsvg-tab-link">.mapsvg-details-container</a>
          </div>
      </div>
      <div class="form-group row mb-3">
          <label class="col-md-3 col-form-label">Location</label>
          <div class="col-md-9">
              <div class="form-check">
                  <input class="form-check-input" type="radio" name="detailsView[location]" value="map"
                         {{#ifeq detailsView.location 'map'}}checked{{/ifeq}} data-live="change">
                  <label class="form-check-label">
                      Map
                      container</label>
              </div>
              <div class="form-check">
                  <input class="form-check-input" type="radio" name="detailsView[location]" value="fullscreen"
                         {{#ifeq detailsView.location 'fullscreen'}}checked{{/ifeq}} data-live="change">
                  <label class="form-check-label">
                      Fullscreen</label>
              </div>
              <div class="form-check">
                  <input class="form-check-input" type="radio" name="detailsView[location]" value="leftSidebar"
                         {{#ifeq
                                 detailsView.location 'leftSidebar'}}checked{{/ifeq}} data-live="change">
                  <label class="form-check-label">
                      Left
                      sidebar</label>
              </div>
              <div class="form-check">
                  <input class="form-check-input" type="radio" name="detailsView[location]" value="rightSidebar"
                         {{#ifeq detailsView.location 'rightSidebar'}}checked{{/ifeq}}
                         data-live="change">
                  <label class="form-check-label">
                      Right sidebar</label>
              </div>
              <div class="form-check">
                  <input class="form-check-input" type="radio" name="detailsView[location]" value="header" {{#ifeq
                          detailsView.location 'header'}}checked{{/ifeq}} data-live="change">
                  <label class="form-check-label">
                      Header</label>
              </div>
              <div class="form-check">
                  <input class="form-check-input" type="radio" name="detailsView[location]" value="footer" {{#ifeq
                          detailsView.location 'footer'}}checked{{/ifeq}} data-live="change">
                  <label class="form-check-label">
                      Footer</label>
              </div>
              <div class="form-check">
                  <input class="form-check-input" type="radio" name="detailsView[location]" value="custom" {{#ifeq
                          detailsView.location 'custom'}}checked{{/ifeq}} data-live="change">
                  <label class="form-check-label">
                      Custom
                      container</label>
              </div>
              <p class="form-text">Manage containers in the <a href="#tab_settings"
                                                               class="mapsvg-tab-link">Settings</a> tab.</p>
          </div>
      </div>
      <div class="form-group row mb-3" id="mapsvg-directory-container-id">
          <label class="col-md-3 col-form-label">Custom container ID</label>
          <div class="col-md-9">
              <div class="input-group">
                  <div class="input-group-prepend ">
                      <span class="input-group-text">#</span>
                  </div>

                  <input class="form-control" name="detailsView[containerId]" value="{{detailsView.containerId}}"
                         data-live="keyup">
              </div>
          </div>
      </div>
      <div class="form-group row mb-3">
          <label class="col-md-3 col-form-label">Width</label>
          <div class="col-md-9">
              <input type="text" class="form-control" value="{{detailsView.width}}"
                     name="detailsView[width]" data-live="keyup">
              <p class="form-text">Enter value in pixels (example: <i>200px</i>) or in percents (example: <i>100%</i>).
              </p>
          </div>
      </div>
      <div class="form-group row mb-3">
          <label class="col-md-3 col-form-label">Auto height</label>
          <div class="col-md-9">
              <div class=" form-switch form-switch-md">
                  <input type="checkbox" name="detailsView[autoresize]" class="form-check-input"
                         {{#if detailsView.autoresize}}checked{{/if}} data-live="change">
              </div>
          </div>
      </div>
      <div class="form-group row mb-3" id="mapsvg-directory-container-id">
          <label class="col-md-3 col-form-label">Margin</label>
          <div class="col-md-9">
              <input class="form-control" name="detailsView[margin]" value="{{detailsView.margin}}"
                     data-live="keyup">
              <p class="form-text">Margins in CSS format. Examples:
                  <br>"10px" (all margins 10px)
                  <br>"5%" (all margins 5%)
                  <br>"10px 20px" (top-bottom: 10px, left-right: 20px)
                  <br>"10px 20px 10px 20px" (left 10px, top 20px, right 10px, bottom
                  20px)</p>
          </div>
      </div>
      <div class="form-group row mb-3">
          <label class="col-md-3 col-form-label">Fullscreen on mobile devices</label>
          <div class="col-md-9">
              <div class=" form-switch form-switch-md">
                  <input type="checkbox" name="detailsView[mobileFullscreen]" class="form-check-input"
                         {{#if detailsView.mobileFullscreen}}checked{{/if}} data-live="change">
              </div>
          </div>
      </div>
  </form>
</script>
