{% load widget_tweaks %}
<div id="cable-table">
    <div class="form-group">
      <label for="{{ form.plug.id_for_label }}" class="col-sm-2 control-label">Plug</label>
      <div class="col-sm-10">
        {% render_field form.plug|add_class:'form-control'%}
      </div>
    </div>
    <div class="form-group">
      <label for="{{ form.socket.id_for_label }}" class="col-sm-2 control-label">Socket</label>
      <div class="col-sm-10">
        {% render_field form.socket|add_class:'form-control'%}
      </div>
    </div>
    <div class="form-group">
      <label for="{{ form.length.id_for_label }}" class="col-sm-2 control-label">Length</label>
      <div class="col-sm-6">
        <div class="input-group">
          {% render_field form.length|add_class:'form-control' %}
          <span class="input-group-addon">{{ form.length.help_text }}</span>
        </div>
      </div>
      <div class="col-sm-4">
        <btn class="btn btn-danger btn-xs" onclick="setLength('5');">5m</btn>
        <btn class="btn btn-success btn-xs" onclick="setLength('10');">10m</btn>
        <btn class="btn btn-info btn-xs" onclick="setLength('20');">20m</btn>
      </div>
    </div>
    <div class="form-group">
      <label for="{{ form.csa.id_for_label }}" class="col-sm-2 control-label">Cross Sectional Area</label>
      <div class="col-sm-10">
        <div class="input-group">
          {% render_field form.csa|add_class:'form-control' value=object.csa %}
          <span class="input-group-addon">{{ form.csa.help_text }}</span>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label for="{{ form.circuits.id_for_label }}" class="col-sm-2 control-label">Circuits</label>
      <div class="col-sm-10">
        {% render_field form.circuits|add_class:'form-control' value=object.circuits %}
      </div>
    </div>
    <div class="form-group">
      <label for="{{ form.cores.id_for_label }}" class="col-sm-2 control-label">Cores</label>
      <div class="col-sm-10">
        {% render_field form.cores|add_class:'form-control' value=object.cores %}
      </div>
    </div>
</div>