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

<div>

  <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-7 b-l b-r-md">
        <section class="heading-title">
          <h1>{{ machine.name }}</h1>
        </section>
      </div>

      <div class="col-xs-12 col-sm-12 col-md-4 b-t hide-b-md">
        <section class="heading-actions wrapper">
          <reserve-button ng-hide="machine.disabled"
                          class-name="'btn btn-lg btn-warning bg-white b-2x rounded m-t-xs'"
                          current-user="currentUser"
                          machine-id="machine.id"
                          on-error="onError"
                          on-success="onSuccess"
                          on-reserve-machine="reserveMachine"
                          on-login-requested="onLoginRequest"
                          on-enroll-requested="onEnrollRequest">
          </reserve-button>

          <a ui-sref="app.admin.machines_edit({id: machine.id})" ng-if="isAuthorized('admin')" class="btn btn-lg btn-warning bg-white b-2x rounded m-t-xs"><i class="fa fa-edit"></i> {{ 'app.shared.buttons.edit' | translate }}</a>
          <a ng-click="delete(machine)" ng-if="isAuthorized('admin')" class="btn btn-lg btn-danger b-2x rounded no-b m-t-xs"><i class="fa fa-trash-o"></i></a>

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

  <div class="row no-gutter">
    <div class="col-sm-12 col-md-12 col-lg-8 b-r-lg">

      <div class="article wrapper-lg" >

        <div class="article-thumbnail" ng-if="machine.machine_image">
          <img ng-src="{{machine.machine_image}}" alt="{{machine.name}}" class="img-responsive">
        </div>

        <p class="intro" ng-bind-html="machine.description | toTrusted"></p>

      </div>

    </div>

    <div class="col-sm-12 col-md-12 col-lg-4">

      <div class="widget panel b-a m m-t-lg">
        <div class="panel-heading b-b small">
          <h3 translate>{{ 'app.public.machines_show.technical_specifications' }}</h3>
        </div>
        <div class="widget-content no-bg wrapper">
          <h3></h3>
          <p ng-bind-html="machine.spec | toTrusted"></p>
        </div>
      </div>

      <section class="widget panel b-a m" ng-if="machine.machine_files_attributes">
        <div class="panel-heading b-b">
          <span class="badge bg-warning pull-right">{{machine.machine_files_attributes.length}}</span>
          <h3 translate>{{ 'app.public.machines_show.files_to_download' }}</h3>
        </div>

          <ul class="widget-content list-group list-group-lg no-bg auto">
            <li ng-repeat="file in machine.machine_files_attributes" class="list-group-item no-b clearfix">
              <a target="_blank" ng-href="{{file.attachment_url}}"><i class="fa fa-arrow-circle-o-down"> </i> {{file.attachment | humanize : 25}}</a>
            </li>
          </ul>
      </section>

      <section class="widget panel b-a m" ng-if="machine.machine_projects">
        <div class="panel-heading b-b">
          <h3 translate>{{ 'app.public.machines_show.projects_using_the_machine' }}</h3>
        </div>

        <ul class="widget-content list-group list-group-lg no-bg auto">
          <li ng-repeat="project in machine.machine_projects" class="list-group-item no-b clearfix">
            <a ui-sref="app.public.projects_show({id:project.slug})"><i class="fa"> </i> {{project.name}}</a>
          </li>
        </ul>
      </section>

    </div>


  </div>

</div>