{% extends "::base.html.twig" %}

{% block contextual %}
{{ render(controller('NavigationBundle:Navigation:breadcrumb', { 'showHome': false })) }}
{% endblock %}

{% block content %}
<style>
@media (max-width:480px) {
  .narrations .col-xs-6 { width:100% }
}
</style>
<ul class="narrations row list-unstyled">
  {% for narration in narrations %}
  <li class="col-xs-6 col-sm-4 col-md-3">
    <div style="background:#fff; margin:20px 0; padding:10px; border-radius:10px; height:300px;">
    <h3 class="text-center"><a href="{{ path('quran_narration', { 'id': narration[0].id }) }}">{{ narration[0].name }}</a></h3>
    <p class="text-center" style="font:200 100%/2.0 GE_SS; color:#90a4ae;">{{ narration[0].description }}</p>
    <p class="text-center" style="font:bold 100%/2.0 Arial; color:#90a4ae;">{{ 'islamic_content.recitations'|trans }}: {{ narration.recitations_count }}</p>
    </div>
  </li>
  {% endfor %}
</ul>
{% endblock %}