fewieden/MMM-Fuel

{% if not header %}
    <header class="align-left">
        {% if config.iconHeader %}
            <i class="fa fa-car logo"></i>
        {% endif %}
            
        <span>{{ "FUEL_PRICES" | translate }}</span>
    </header>
{% endif %}
{% if not priceList %}
    <div class="dimmed light">{{ "LOADING" | translate | safe }}</div>
{% else %}
    <table class="small table align-left">
        <tr>
            <th>
                {% if sortByPrice %}
                    {{ "CHEAPEST_STATIONS" | translate }}
                {% else %}
                    {{ "CLOSEST_STATIONS" | translate }}
                {% endif %}
            </th>
            {% for type in config.types %}
                {% if includes(priceList.types, type)  %}
                    <th class="centered">
                        <span>{{ type | capitalizeFirstLetter }}</span>
                        {% if sortByPrice and config.sortBy == type %}
                            <i class="fa fa-long-arrow-down sort-by"></i>
                        {% endif %}
                    </th>
                {% endif %}
            {% endfor %}
            {% if config.showDistance %}
                <th class="centered">
                    <i class="fa fa-map-o"></i>
                    {% if not sortByPrice %}
                        <i class="fa fa-long-arrow-down sort-by"></i>
                    {% endif %}
                </th>
            {% endif %}
            {% if config.open %}
                <th class="centered"><i class="fa fa-clock-o"></i></th>
            {% endif %}
        </tr>
        {% for gasStation in gasStations %}
            {% set fadeStyle = loop.index0 | fade(loop.length) %}
            <tr style="{{ fadeStyle }}">
                <td>{{ gasStation.brand if config.showBrand else gasStation.name | shortenText | safe }}</td>
                {% for type in config.types %}
                    {% if includes(priceList.types, type)  %}
                        <td class="centered">{{ gasStation.prices[type] | formatPrice | safe }}</td>
                    {% endif %}
                {% endfor %}
                {% if config.showDistance %}
                    <td class="centered">{{ gasStation.distance | formatDistance }}</td>
                {% endif %}
                {% if config.open %}
                    <td class="centered">
                        <i class="fa fa-{{ "unlock" if gasStation.isOpen else "lock" }}"></i>
                    </td>
                {% endif %}
            </tr>
            {% if config.showAddress %}
                <tr style="{{ fadeStyle }}">
                    <td colspan="{{ 1 + config.types.length + (1 if config.showDistance else 0) + (1 if config.open else 0) }}" class="xsmall">
                        {% if not config.showAddressCity %}
                            {{ gasStation.street | shortenText | safe }}
                        {% else %}
                            {{ gasStation.address | shortenText | safe }}
                        {% endif %}
                    </td>
                </tr>
            {% endif %}
        {% endfor %}
    </table>
{% endif %}