{% load l10n combo gnm assets %}
{% with arret=json.data %}
    <div class="tile tcl" data-keywords="bus metro tramway" data-tile-cache="30">
      <div class="tile-picture" style="background-image: url({% asset_url "picture:tcl" %})"></div>
      <div class="tile-head">
        <div class="tile-title">
          <h2>Arrêt {{arret.nom}}</h2>
          <span class="producer" style="background-image: url({% asset_url "logo:tcl" %})">TCL</span>
        </div>
      </div>
      {% include "combo/dashboard_cell_icons.html" %}
      <div class="tile-content">
        <table class="passings">
        {% for line in arret.passings_by_line|slice:":2" %}
        <tr>
                <td class="line-number {{ line.line_info.display_style }}">
                  {% if line.line_info.display_prefix %}
                  <span class="line-symbol"><span class="line-prefix">{{line.line_info.display_prefix}}</span><span class="line-suffix" style="background: {{line.line_info.display_suffix_color}}">{{line.line_info.display_suffix_text}}</span></span>
                  {% else %} {# fallback for unkown lines #}
                  <span>{{ line.ligne }}</span>
                  {% endif %}
                </td>
                {% if line.passings.0.direction %}
                <td class="line-direction"><span class="direction">{{line.passings.0.direction}}</span>
                   <div class="mobile-only">
                     <span class="passings">
                       {% for passing in line.passings %}<span>{{passing.delaipassage}}</span>{% endfor %}
                     </span>
                   </div>
                </td>
                <td class="passings"><span class="passings desktop-only">
                    {% for passing in line.passings %}<span>{{passing.delaipassage}}</span>{% endfor %}
                    </span></td>
                {% else %}
                <td class="line-arrow">→</td>
                <td class="line-libelle">{{line.line_info.direction}}
                   <div class="mobile-only">
                     <span class="passings"><i>Indisponible</i></span>
                   </div>
                </td>
                <td class="passings"><span class="passings desktop-only"><i>Indisponible</i></span></td>
                {% endif %}
        </tr>
        {% endfor %}
        </table>
      </div>
      <div class="tile-actions">
        <a class="action-goto" data-lat="{{arret.lat}}" data-lng="{{arret.lng}}" href="/m-y-rendre/?to={{cell.id}}">M’y rendre</a>
      </div>
    </div>
{% endwith %}
