{% 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="tableOfHistory" style="margin-bottom: unset">
    <thead>
    <tr>
        <th style="width: 10px">#</th>
        <th>Date</th>
        <th>Rate</th>
        <th>Motor</th>
        <th>Brakes</th>
        <th>Note</th>
    </tr>
    </thead>
    <tbody id="tableOfHistorys-body">
    {% set indexHistory = 0 %}
    {% for history in histories %}
        {% set indexHistory = indexHistory + 1 %}
        <tr >
            <td><span class="index" >{{ indexHistory }}</span>.</td>
            <td>{{ history.createdAt|date("d-m-Y") }} </td>
            <td> {{ starArray[history.rate]|raw }} </td>
            <td> {{ starArray[history.motor]|raw }} </td>
            <td> {{ starArray[history.brakes]|raw }} </td>
            <td>{{ history.description }} </td>
        </tr>
    {% endfor %}
    </tbody>
</table>