list_machines.html

<div class="panel-body">
    <div class="col-lg-12">
      <div ng-show="!pingbe" class="alert alert-danger" ng-cloak>
        <strong>Error!</strong> Backend no available!
      </div>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Machine Name</th>
                    <th>Base</th>
                    <th>Active</th>
                    <th>Actions</th>

                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="machine in list_machines">
                    <td>
                        <a data-toggle="modal" data-target="#modal{{machine.id}}" title="VM guest">{{machine.name}}</a>
                    </td>
                    <td>
                        <i ng-show="{{machine.is_base}}" class="fa fa-check" aria-hidden="true"></i>

                        <a ng-hide="{{machine.is_base}}" ng-click="prepare(machine.id)" href="" title="Prepare base"><i  class="fa fa-times" aria-hidden="true"></i></a>
                    </td>
                    <td>
                        <a ng-show="{{machine.is_active}}" ng-click="shutdown(machine.id)"><i class="fa fa-check" aria-hidden="true"></i></a>

                        <a ng-show="{{!machine.is_active}}" ng-click="start(machine.id)"><i class="fa fa-times" aria-hidden="true"></i></td></a>
                    <td>
                        <a class="btn btn-primary btn-sm" href="/machine/manage/{{machine.id}}.html">Manage</a>

                        <a class="btn btn-primary btn-sm" href="/machine/view/{{machine.id}}.html"><i class="fa fa-desktop" aria-hidden="true"></i>&nbsp View</a>

                        <a ng-show="{{machine.is_base}}" class="btn btn-primary btn-sm" href="/machine/clone/{{machine.id}}.html"><i class="fa fa-files-o" aria-hidden="true"></i>&nbsp Clone</a>

                        <button type="button" ng-click="screenshot(machine.id)" ng-show="{{machine.is_active}}" class="btn btn-primary btn-sm"><i class="fa fa-camera" aria-hidden="true"></i>&nbspScreenshot</button>

                        <button type="button" ng-click="shutdown(machine.id)" ng-show="{{machine.is_active}}" class="btn btn-warning btn-sm"></strong><i class="fa fa-power-off" aria-hidden="true"></i>&nbsp ShutDown</button>


                        <i id="spinn{{machine.id}}" class="fa fa-spinner fa-spin fa-fw" style="float: right; display: none;"></i>

                        <span style="float:right;" ng-show="{{machine.is_paused && machine.is_active}}" class="label label-warning">Paused</span>
                    </td>

                </tr>
            </tbody>
        </table>
        <div ng-repeat="machine in list_machines">
        <div id="modal{{machine.id}}" class="modal fade" role="dialog">
          <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">
                    {{machine.name}}
                </h4>
              </div>
              <div class="modal-body">
                <div style="width:100%; margin-bottom:10px;">
                    <img src="/img/screenshots/{{machine.id}}.png" width="400" alt="No screenshot available for this machine">
                </div>

                <div style="width:100%; margin-bottom:10px;">
                    <a class="btn btn-primary btn-sm" href="/machine/view/{{machine.id}}.html"><i class="fa fa-desktop" aria-hidden="true"></i>&nbsp View</a>

                    <button type="button" ng-click="start(machine.id)" ng-hide="{{machine.is_active}}" class="btn btn-success btn-sm"><i class="fa fa-play" aria-hidden="true"></i>&nbsp Start</button>

                    <button type="button" ng-click="resume(machine.id)" ng-show="{{machine.is_active && machine.is_paused}}" class="btn btn-success btn-sm"><i class="fa fa-repeat" aria-hidden="true"></i>&nbsp Resume</button>

                    <button type="button" ng-click="pause(machine.id)" ng-show="{{machine.is_active && !machine.is_paused}}" class="btn btn-success btn-sm"><i class="fa fa-pause" aria-hidden="true"></i>&nbsp Pause</button>
                </div>

                <div style="width:100%; margin-bottom:10px;">
                    <a ng-show="{{machine.is_base}}" class="btn btn-primary btn-sm" href="/machine/clone/{{machine.id}}.html"><i class="fa fa-files-o" aria-hidden="true"></i>&nbsp Clone</a>

                    <button type="button" ng-click="prepare(machine.id)" class="btn btn-primary btn-sm"><i class="fa fa-plus" aria-hidden="true"></i>&nbsp Prepare Base</button>

                    <button type="button" ng-click="screenshot(machine.id)" ng-show="{{machine.is_active}}" class="btn btn-primary btn-sm"><i class="fa fa-camera" aria-hidden="true"></i>&nbsp Screenshot</button>

                    <button type="button" ng-click="shutdown(machine.id)" ng-show="{{machine.is_active}}" class="btn btn-warning btn-sm"></strong><i class="fa fa-power-off" aria-hidden="true"></i>&nbsp ShutDown</button>
                    <button type="button" ng-click="removeb(machine.id)" ng-show="{{machine.is_base}}" class="btn btn-warning btn-sm"><i class="fa fa-trash-o" aria-hidden="true"></i>&nbsp Remove Base</button>
                    <a  class="btn btn-danger btn-sm" href="/machine/remove/{{machine.id}}.html"><strong>&nbsp;<i class="fa fa-trash-o" aria-hidden="true"></i></strong> Delete</a>
                </div>




              </div>
              <div class="modal-footer">

                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>

          </div>
        </div>
        </div>
    </div>
</div>