{% with pagetitle="Boards configuration" pageselected="boards" %}
{% include "common/layout-before.html" %}

      <div class="row">
        <div class="col-xs-12">
          <div class="box">

            <!-- /.box-header -->
            <div class="box-body no-padding">
              <table class="table table-condensed">
                <tr>
                  <th style="width: 15px">#</th>
                  <th>Plug name</th>
                  <th style="width: 30px">Status</th>
                  <th>Power load</th>
                  <th style="width: 100px">Command</th>
                </tr>

              {% for plug in pluglist %}
              <tr>
                <td>{{ plug.id }}</td>
                <td>{{ plug.description }}</td>
                <td>off</td>
                <td>
                  <div class="progress progress-xs">
                    <div class="progress-bar progress-bar-danger" style="width: 55%"></div>
                  </div>
                </td>
                <td>
                  <div class="btn-group">
                    <button type="button" class="btn btn-info">Toggle</button>
                    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                      <span class="caret"></span>
                      <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                      <li><a href="#">On</a></li>
                      <li><a href="#">Off</a></li>
                      <li class="divider"></li>
                      <li><a href="#">Edit</a></li>
                    </ul>
                  </div>

                </td>
              </tr>
            {% endfor %}               
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->

{% include "common/layout-after.html" %}
{% endwith %}