<div id="layerControls">
  <div class="card">
    <div class="btn btn-secondary btn-block btn-sm" title="Style controls for the layer(s)"
        data-toggle="collapse" data-target="#layer-style"
        ng-click="heatmap.setOpenSection('#layer-style')">
      Style
    </div>
    <div id="layer-style" class="card-body collapse" data-parent="#layerControls">
      <table>
        <tbody>
          <tr title="Sets the color algorithm for the layer(s)">
            <td>Colors:</td>
            <td class="w-100">
              <select class="custom-select" ng-model="gradient" ng-change="heatmap.onGradientChange()"
              ng-options="grad.title for grad in gradients">
              </select>
            </td>
          </tr>
          <tr title="Sets the opacity of the heatmap">
            <td>Opacity:</td>
            <td class="w-100">
              <slider min="0" max="1" step="0.02" value="opacity" name="opacity"></slider>
            </td>
          </tr>
          <tr title="Sets the size of each shape (not applied to ellipses)">
            <td>Size:</td>
            <td class="w-100">
              <slider min="3" max="10" step="1" value="size" name="size" live="false"></slider>
            </td>
          </tr>
          <tr title="Sets the number of colocated features for maximum intensity">
            <td>Intensity:</td>
            <td class="w-100">
              <div class="form-row align-items-center">
                <div class="col-3">
                  <spinner min="1" max="heatmap.maxIntensity" step="1" value="intensity" live="false" name="intensity"></spinner>
                </div>
                <div class="col">
                  <slider min="1" max="heatmap.maxIntensity" step="1" value="intensity" live="false" name="intensity"></slider>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
