{% macro news_moderation_alert(news, user, alpineState = None) %}
    {# An alert to display on top of unpublished news,
    with actions to either publish or delete them.

    The current state of the alert is accessible through
    the given `alpineState` variable.
    This state is a `AlertState`, as defined in `moderation-alert-index.ts`

    This comes in three flavours :
    - You can pass the `News` object itself to the macro.
      In this case, if `request.user` can publish news,
      it will perform an additional db query to know if it is a recurring event.
    - You can also give only the news id.
      In this case, a server request will be issued to know
      if it is a recurring event.
    - Finally, you can pass the name of an alpine variable, which value is the id.
      In this case, a server request will be issued to know
      if it is a recurring event.

    Example with full `News` object :
    ```jinja
    <div x-data="{state: AlertState.PENDING}">
      {{ news_moderation_alert(news, user, "state") }}
    </div>
    ```
    With an id :
    ```jinja
    <div x-data="{state: AlertState.PENDING}">
      {{ news_moderation_alert(news.id, user, "state") }}
    </div>
    ```
    An with an alpine variable
    ```jinja
    <div x-data="{state: AlertState.PENDING, newsId: {{ news.id }}">
      {{ news_moderation_alert("newsId", user, "state") }}
    </div>
    ```


    Args:
        news: (News | int | string)
          Either the `News` object to which this alert is related,
          or its id, or the name of an Alpine which value is its id
        user: The request.user
        alpineState: An alpine variable name

    Warning:
        If you use this macro, you must also include `moderation-alert-index.ts`
        in your template.
    #}
  <div
    {% if news is integer or news is string %}
      x-data="moderationAlert({{ news }})"
    {% else %}
      x-data="moderationAlert({{ news.id }})"
    {% endif %}
    {# the news-moderated is received when a moderation alert is deleted or moderated #}
    @news-moderated.window="dispatchModeration($event)"
    {% if alpineState %}
      x-model="{{ alpineState }}"
      x-modelable="state"
    {% endif %}
  >
    <template x-if="state === AlertState.PENDING">
      <div class="alert alert-yellow">
        <div class="alert-main">
          <strong>{% trans %}Waiting publication{% endtrans %}</strong>
          <p>
            {% trans trimmed %}
              This news isn't published and is visible
              only by its author and the communication admins.
            {% endtrans %}
          </p>
          <p>
            {% trans trimmed %}
              It will stay hidden for other users until it has been published.
            {% endtrans %}
          </p>
          {% if user.has_perm("com.moderate_news") %}
            {# This is an additional query for each non-moderated news,
            but it will be executed only for admin users, and only one time
            (if they do their job and moderated news as soon as they see them),
            so it's still reasonable #}
            <div
              {% if news is integer or news is string %}
                x-data="{ nbEvents: 0 }"
                x-init="nbEvents = await nbToPublish()"
              {% else %}
                x-data="{ nbEvents: {{ news.dates.count() }} }"
              {% endif %}
            >
              <template x-if="nbEvents > 1">
                <div>
                  <br>
                  <strong>{% trans %}Weekly event{% endtrans %}</strong>
                  <p x-text="weeklyEventWarningMessage(nbEvents)"></p>
                </div>
              </template>
            </div>
          {% endif %}
        </div>
        {% if user.has_perm("com.moderate_news") %}
          <span class="alert-aside" :aria-busy="loading">
            <button class="btn btn-green" @click="publishNews()" :disabled="loading">
              <i class="fa fa-check"></i> {% trans %}Publish{% endtrans %}
            </button>
        {% endif %}
        {% if user.has_perm("com.delete_news") %}
          <button class="btn btn-red" @click="deleteNews()" :disabled="loading">
            <i class="fa fa-trash-can"></i> {% trans %}Delete{% endtrans %}
          </button>
          </span>
        {% endif %}
      </div>
    </template>
    <template x-if="state === AlertState.PUBLISHED">
      <div class="alert alert-green">
        {% trans %}News published{% endtrans %}
      </div>
    </template>
    <template x-if="state === AlertState.DELETED">
      <div class="alert alert-red">
        {% trans %}News deleted{% endtrans %}
      </div>
    </template>
  </div>
{% endmacro %}