{#
Template for UnLondon cards.

Multiple cards.
At desktop in rows of 3 or 4 with a more button to display more than 1/2 rows.
At mobile all in one scrollable row.

block_title: the title of the block.
cards: array of cards.

coloured_bg: whether the block has a coloured background, boolean.
flush: whether this block should be flush to the one below it, boolean.
num_cols_lg: the number of cards in a row at large breakpoint.
num_cols_md: the number of cards in a row at medium breakpoint.
num_rows: the number of rows to display before adding the more button.
#}

{# EXTENDS #}
{% extends "@organisms/tm-ul/ul-base/ul-base.twig" %}

{% set num_cols = num_cols|default(4) %}
{% set num_cols_md = num_cols_md|default(0) %}
{% set num_cols_md = num_cols_md ? num_cols_md : num_cols %}
{% set num_rows = num_rows|default(1) %}
{% set rows = cards|batch(num_cols) %}
{% set total_num_rows = rows|length %}
{% set col_number = 12 / num_cols  %}
{% set col_number_md = 12 / num_cols_md  %}
{% set cards_class = cards_class|default('') %}

{% set content %}
  {% if rows and rows is iterable %}
    <div class="row">
      {% for row in rows %}
        {% for card in row %}
          <div class="col{% if col_number != num_cols_md %} col-lg-{{ col_number }}{% endif %} col-md-{{ col_number_md }}">
            {{ card }}
          </div>
        {% endfor %}
      {% endfor %}
    </div>
  {% endif %}
{% endset %}


{% block content_block %}
  {% if content or block_intro %}
    {{ attach_library('ui_patterns/ul_cards.ul_cards_lib') }}

    {% if block_title %}<h2 class="ul-c">{{ block_title }}</h2>{% endif %}

    {% if block_intro %}
      <div class="ul-intro">
        {{ block_intro }}
      </div>
    {% endif %}

    {% if content %}
      <div class="ul-cards {{ cards_class}} rows-{{ num_rows }} cols-{{ num_cols }}">
        {% if total_num_rows > num_rows %}
          {% include '@molecules/tm-bits/tm-bits-more-less.twig' with {
            'content': content,
          } only %}
        {% else %}
          {{ content|raw }}
        {% endif %}
      </div>
    {% endif %}
  {% endif %}
{% endblock %}
