{% macro display_album(a, edit_mode) %}
  <a href="{{ url('sas:album', album_id=a.id) }}">
    {% if a.file %}
      {% set img = a.get_download_url() %}
      {% set alt = a.name %}
    {% elif a.children.filter(is_folder=False, is_moderated=True).exists() %}
      {% set picture = a.children.filter(is_folder=False).first().as_picture %}
      {% set img = picture.get_download_thumb_url()  %}
      {% set alt = picture.name %}
    {% else %}
      {% set img = static('core/img/sas.jpg') %}
      {% set alt = "sas.jpg" %}
    {% endif %}
    <div
      class="album{% if not a.is_moderated %} not_moderated{% endif %}"
    >
      <img src="{{ img }}" alt="{{ alt }}" loading="lazy" />
      {% if not a.is_moderated %}
        <div class="overlay">&nbsp;</div>
        <div class="text">{% trans %}To be moderated{% endtrans %}</div>
      {% else %}
        <div class="text">{{ a.name }}</div>
      {% endif %}
    </div>
    {% if edit_mode %}
      <input type="checkbox" name="file_list" value="{{ a.id }}">
    {% endif %}
  </a>
{% endmacro %}

{% macro print_path(file) %}
  {% if file and file.parent %}
    {{ print_path(file.parent) }}
    <a href="{{ url('sas:album', album_id=file.id) }}">{{ file.get_display_name() }}</a> /
  {% endif %}
{% endmacro %}

{# Helper macro to create a download button for a
  record of albums with alpine.

  Note:
    This requires importing `bundled/sas/pictures-download-index.ts`

  Parameters:
    name (str): name displayed on the button
    pictures (str): an alpine variable or function
      which holds the images this button should download.
      It must be different from "downloadPictures", or it won't work.
 #}
{% macro download_button(name, pictures) %}
  <div x-data="pictures_download()" x-modelable="downloadPictures" x-model="{{ pictures }}">
    <div x-show="downloadPictures.length > 0" x-cloak>
      <button
        :disabled="isDownloading"
        class="btn btn-blue {% if name == "" %}btn-no-text{% endif %}"
        @click="downloadZip()"
      >
        <i class="fa fa-download"></i>{{ name }}
      </button>
      <progress x-ref="progress" x-show="isDownloading"></progress>
    </div>
  </div>
{% endmacro %}
