<div class="hololayout row row-fluid">
  <div class="holoframe" id="display_area{{ id }}">
    <div id="_anim_img{{ id }}">
      {% block init_frame %}
      {{ init_html }}
      {% endblock %}
    </div>
  </div>
  <div class="holowidgets" id="widget_area{{ id }}">
    <form class="holoform well" id="form{{ id }}">
      {% for widget_data in widgets %}
      {% if widget_data['type'] == 'slider' %}
      <div class="form-group control-group holoformgroup" style='{{ widget_data['visibility'] }}'>
        <label for="textInput{{ id }}_{{ widget_data['dim'] }}">
          <strong>{{ widget_data['dim_label'] }}:</strong>
        </label>
        <div class="holowell">
          <div class="hologroup">
            <input type="text" class="holotext form-control input-small"
                   id="textInput{{ id }}_{{ widget_data['dim'] }}" value="" readonly>
          </div>
          <div class="holoslider"
               id="_anim_widget{{ id }}_{{ widget_data['dim'] }}"></div>
        </div>
      </div>
      {% elif widget_data['type']=='dropdown' %}
        <div class="form-group control-group holoformgroup" style='{{ widget_data['visibility'] }}'>
          <label for="textInput{{ id }}_{{ widget_data['dim'] }}"><strong>{{ widget_data['dim_label'] }}:</strong></label>
          <select class="holoselect form-control" id="_anim_widget{{ id }}_{{ widget_data['dim'] }}" >
          </select>
        </div>
        {% endif %}
        {% endfor %}
        </form>
    </div>
</div>
