{% set starArray = [
    '',
    ' <span class="fa fa-star" style="color: darkgray"></span> ',
    ' <span class="fa fa-star" style="color: #9d7e24"></span>
      <span class="fa fa-star" style="color: #9d7e24"></span> ',
    ' <span class="fa fa-star" style="color: #d9a713"></span>
      <span class="fa fa-star" style="color: #d9a713"></span>
      <span class="fa fa-star" style="color: #d9a713"></span> ',
    ' <span class="fa fa-star" style="color: #e7b00e"></span>
      <span class="fa fa-star" style="color: #e7b00e"></span>
      <span class="fa fa-star" style="color: #e7b00e"></span>
      <span class="fa fa-star" style="color: #e7b00e"></span> ',
    ' <span class="fa fa-star" style="color: gold"></span>
      <span class="fa fa-star" style="color: gold"></span>
      <span class="fa fa-star" style="color: gold"></span>
      <span class="fa fa-star" style="color: gold"></span>
      <span class="fa fa-star" style="color: gold"></span> ',

]

%}



<table class="border table table-striped table-head-fixed text-nowrap" id="tableOfLastBest" style="margin-bottom: unset">
    <thead>
    <tr>
        <th style="width: 10px">#</th>
        <th>Barcode</th>
        <th>Date</th>
        <th>Rate</th>
        <th>Motor</th>
        <th>Brakes</th>
        <th>Note</th>
        <th>Action</th>
    </tr>
    </thead>
    <tbody id="tableOfHistorys-body">
    {% set index = 0 %}
    {% for bike in bikes %}
        {% set index = index + 1 %}
        <tr >
            <td><span class="index" >{{ index }}</span>.</td>
            <td>{{ bike.barcode }} </td>
            <td>{{ bike.createdAt|date("d-m-Y") }} </td>
            <td> {{ starArray[bike.rate]|raw }} </td>
            <td> {{ starArray[bike.motor]|raw }} </td>
            <td> {{ starArray[bike.brakes]|raw }} </td>
            <td>{{ bike.description }} </td>
            <td>
                <button  class="btn btn-secondary btn-sm getHistoryBtn" data-barcode="{{ bike.barcode }}"   > <i class="fas fa-history"></i> History</button>
                <button  class="btn btn-success btn-sm addReview" data-barcode="{{ bike.barcode }}"   > <i class="fas fa-plus"></i> Review</button>
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>