{% load i18n %}
{% if entity.metadata.park_and_ride %}
<!--googleoff: all-->
<div class="section">
  <div class="header">
    <h2>{% trans "Car Park Information" %}</h2>
  </div>
  <div class="section-content">
    <div class="bubble pad-5 park-and-ride">
      {% if not entity.metadata.park_and_ride.unavailable %}
	  	{# Translators: As in, car parking spaces #}
      	{% trans "Spaces" %}: {{ entity.metadata.park_and_ride.spaces }} / {{ entity.metadata.park_and_ride.capacity }}
      	<div class="capacity-bar">
        	<div class="capacity-bar-red" style="width: {{ entity.metadata.park_and_ride.percentage }}%;">&nbsp;</div>
      	</div>
      {% else %}
      	<p><em>{% trans "Space information currently unavailable" %}</em></p>
	  	{# Translators: As in, car parking spaces #}
      	<p>{% trans "Spaces" %}: ? / {{ entity.metadata.park_and_ride.capacity }}</p>
      {% endif %}
    </div>
  </div>
</div>
<!--googleon: all-->
{% endif %}
