{% macro icon_size(option) %} {% if option == "Small" %}fa-lg{% elif option == "Medium" %}fa-2x{% elif option == "Large" %}fa-3x{% elif option == "Extra Large" %}fa-4x{% elif option == "Extra Extra Large" %}fa-5x{% endif %}{% endmacro %}
{% macro alignment(option) %} {% if option == "Centered" %}center-align{% endif %}{% endmacro %}
{% macro icon_color(option) %} {% if option == "Primary Color" %}iconColor-t1{% elif option == "Second Color" %}iconColor-t2{% elif option == "Third Color" %}iconColor-t3{% elif option == "Fourth Color" %}iconColor-t4{% endif %}{% endmacro %}
{% set table = 1043243 %}
{% set queryparam = "" %}
{% if module.content_type %}
{% set queryparam = queryparam ~ "&media_category="~module.content_type %}
{% endif %}

{% set all_media = hubdb_table_rows(table, queryparam) %}

<div class="row-fluid title-section">
  <div class="span12">
    <h2>{{ module.media_title }}</h2>
  </div>
</div>
<div class="row-fluid dd-media-section">
  {% for media in all_media  %}
  {% if loop.index <= module.number_of_items_to_display %}
  <div class="span4 widget-span generic-bucket{{ alignment(media.content_alignment.name) }} {{ media.type.name|lower }} cm-bu1">

    {% if media.type.name == "Icon" %}
    <div class="icon-block span12">
      <i class="fa {{ media.icon_class }} {{ icon_color(media.icon_color.name) }} {{ icon_size(media.icon_size) }}"></i>
    </div>
    {% endif %}
    {% if media.type.name == "Image" %}
    <div class="image-block span12">
        {% if media.relative_image_link|length > 4 %}
          <a href="{{ media.relative_image_link }}">
        {% endif %}
        <img src="{{ media.image.url }}" width="{{ media.image.width }}" height="{{ media.image.height }}" alt="{{ media.image.alt }}">
        {% if media.relative_image_link|length > 4 %}
          </a>
        {% endif %}
    </div>
    {% endif %}
    {% if media.type.name == "Video" %}
      <div class="video-block span12">
        {{ media.video_embed_text }}
      </div>
    {% endif %}
    <div class="span12{% if media.type.name != "Image" %} text-block{% endif %} thickFont-t1">
      <p>{{ media.name }}</p>
      {% if media.type.name == "Image" %}
      <p><a target="_blank" href="{{ media.image.url }}" download="{{ media.name|lower|replace(' ', '-') }}.png">Download</a></p>
      {% endif %}
    </div>
  </div>


  {% if loop.index|divisible(3) || loop.last %}
</div>
{% if loop.index < module.number_of_items_to_display %}
<div class="row-fluid">
  {% endif %}
  {% endif %}
  {% endif %}
  {% endfor %}

</div>

<style>
.dd-media-section .image-block img {
  max-width: 95%;
  margin: 0 auto;
  height: auto!important;
}
</style>