fab-manager/app/frontend/templates/machines/index.html

<section class="heading b-b">
  <div class="row no-gutter">
    <div class="col-xs-2 col-sm-2 col-md-1">
      <section class="heading-btn">
        <a href="#" ng-click="backPrevLocation($event)"><i class="fas fa-long-arrow-alt-left "></i></a>
      </section>
    </div>
    <div class="col-xs-10 col-sm-10 col-md-8 b-l b-r-md">
      <section class="heading-title">
        <h1 translate>{{ 'app.public.machines_list.the_fablab_s_machines' }}</h1>
      </section>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-3 b-t hide-b-md" ng-if="isAuthorized('admin')">
      <section class="heading-actions wrapper">
        <a class="btn btn-lg btn-warning bg-white b-2x rounded m-t-xs" ui-sref="app.admin.machines_new" role="button" translate>{{ 'app.public.machines_list.add_a_machine' }}</a>
      </section>
    </div>
  </div>
</section>


<section class="m-lg machines-list"
         ui-tour="machines"
         ui-tour-backdrop="true"
         ui-tour-template-url="'/shared/tour-step-template.html'"
         ui-tour-use-hotkeys="true"
         ui-tour-scroll-parent-id="content-main"
         post-render="setupMachinesTour">

  <div class="row">
    <div class="col-md-3 form-group">
      <div class="input-group m-l-lg m-b">
        <span class="input-group-addon"><i class="fa fa-filter"></i></span>
        <select ng-model="machineFiltering" class="form-control">
          <option ng-repeat="status in filterDisabled" value="{{status}}" translate>{{ 'app.public.machines_list.status_'+status }}</option>
        </select>
      </div>
    </div>
    <div class="col-md-3 col-md-offset-6 m-t-n row-centered" ng-if="isAuthorized(['admin', 'manager'])">
      <a role="button" ui-sref="app.admin.calendar" class="btn btn-lg btn-default rounded m-t-sm text-sm">
        <i class="fa fa-calendar-check-o m-r" aria-hidden="true"></i><span translate>{{ 'app.public.machines_list.new_availability' }}</span>
      </a>
    </div>
  </div>


    <div class="col-xs-12 col-sm-6 col-lg-4 reservable-card" ng-class="{'disabled-reservable' : machine.disabled && machineFiltering === 'all'}" ng-repeat="machine in machines | filterDisabled:machineFiltering">
      <div class="widget panel panel-default">
        <div class="panel-heading picture" ng-if="!machine.machine_image" ng-click="showMachine(machine)">
          <img src="data:image/png;base64," data-src="holder.js/100%x100%/text:&#xf03e;/font:'Font Awesome 5 Free'/icon" bs-holder class="img-responsive">
        </div>
        <div class="panel-heading picture" style="background-image:url({{machine.machine_image}})" ng-if="machine.machine_image" ng-click="showMachine(machine)">
        </div>
        <div class="panel-body">
          <h1 class="text-center m-b">{{machine.name}}</h1>
        </div>
        <div class="panel-footer no-padder">

          <div class="text-center clearfix">
            <div class="col-sm-6 b-r no-padder">
               <div class="btn btn-default btn-block no-b padder-v red reserve-button" ng-click="reserveMachine(machine, $event)" ng-hide="machine.disabled">
                 <i class="fa fa-bookmark m-r-xs"></i>
                 <span class="hidden-sm" translate>{{ 'app.public.machines_list.book' }}</span>
               </div>
            </div>
            <div class="no-padder" ng-class="{'col-sm-6': !machine.disabled}">
                <div class="btn btn-default btn-block padder-v no-b red show-button" ng-click="showMachine(machine)">
                  <i class="fa fa-eye m-r-xs"></i>
                  <span class="hidden-sm" translate>{{ 'app.shared.buttons.consult' }}</span>
                </div>
            </div>
          </div>

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


</section>