{# @description An organisation's logo, or a placeholder organisation icon, in a box with a fixed aspect ratio. Any other attribute is passed to the box. #}
{# @prop aspect_ratio:text | default:"66%" | description:"The box's aspect ratio as a percentage. Empty for no fixed ratio." #}
{# @prop class:text | description:"Extra CSS classes for the outer element." #}
{# @prop organization:text | description:"The organisation to show." #}
{% load easy_icons easy_thumbnails_tags %}

<c-vars aspect_ratio="66%" class organization />
<div class="{{ class }}">
  <div class="{% if aspect_ratio %}ratio{% endif %} "
       {% if aspect_ratio %}style="--bs-aspect-ratio: {{ aspect_ratio }}"{% endif %}
       {{ attrs }}>
    {% if not organization.image %}
      {% icon "organization_svg" width="100%" height="unset" class="bg-secondary-subtle text-light" %}
    {% else %}
      <img src="{{ organization.image.url }}"
           class="object-fit-contain px-1"
           style="{{ img_style }}" />
    {% endif %}
  </div>
</div>