TRML Bike Points.liquid

<div class="layout layout--row flex flex--center">
  <div class="item">
    <div class="meta"></div>
    <div class="content">
      <span class="value value--xsmall">{{ IDX_0.commonName }}</span>
      <span class="label flex flex--row">
        {% for attrs in IDX_0.additionalProperties %}
        {%- if attrs.key == "NbEmptyDocks"-%}
        <span class="label">⬜ {{attrs.value | number_with_delimiter}}</span>
        {%- endif -%}
        {%- if attrs.key == "NbBikes"-%}
        <span class="label label--inverted">🚲 {{attrs.value | number_with_delimiter}}</span>
        {%- endif -%}
        {% endfor %}
      </span>
    </div>
  </div>
  <div class="item">
    <div class="meta"></div>
    <div class="content">
      <span class="value value--xsmall">{{ IDX_1.commonName }}</span>
      <span class="label flex flex--row">
        {% for attrs in IDX_1.additionalProperties %}
        {%- if attrs.key == "NbEmptyDocks"-%}
        <span class="label">⬜ {{attrs.value | number_with_delimiter}}</span>
        {%- endif -%}
        {%- if attrs.key == "NbBikes"-%}
        <span class="label label--inverted">🚲 {{attrs.value | number_with_delimiter}}</span>
        {%- endif -%}
        {% endfor %}
      </span>
    </div>
  </div>
  <div class="item">
    <div class="meta"></div>
    <div class="content">
      <span class="value value--xsmall">{{ IDX_2.commonName }}</span>
      <span class="label flex flex--row">
        {% for attrs in IDX_2.additionalProperties %}
        {%- if attrs.key == "NbEmptyDocks"-%}
        <span class="label">⬜ {{attrs.value | number_with_delimiter}}</span>
        {%- endif -%}
        {%- if attrs.key == "NbBikes"-%}
        <span class="label label--inverted">🚲 {{attrs.value | number_with_delimiter}}</span>
        {%- endif -%}
        {% endfor %}
      </span>
    </div>
  </div>
</div>

<div class="title_bar">
  <img class="image" src="https://upload.wikimedia.org/wikipedia/commons/d/dc/Cycle_Hire_Logo.svg">
  <span class="title">Transport for London</span>
  <span class="instance">Dock Status</span>
</div>