{# LIBRARIES #}
{{ attach_library('ui_patterns/sa_calendar_cell.sa_calendar_cell_lib') }}
{{ attach_library('ui_patterns/libraries.bs_popover') }}
{{ attach_library('ui_patterns/bs_popover.popover_lib') }}

{# VARIABLES #}
{% set data_nids = alterations|column('nid')|join('|') %}
{% set date_text = date_text|default("") %}

{% set attributes = attributes|default(create_attribute())
  .setAttribute('data-date', date_text|date("l j F y"))
  .setAttribute('role', 'gridcell')
%}
{% if alterations is not empty %}
  {% set attributes = attributes.setAttribute('tabindex', '0').setAttribute('role', 'button') %}
  {% set attributes = attributes.setAttribute('aria-label', date_text|date("l j F y")) %}
{% endif %}

{% if data_nids %}
  {% set attributes = attributes.setAttribute('data-nids', data_nids) %}
{% endif %}

{% set attributes_pop = attributes_pop|default(create_attribute())
.setAttribute('data-bs-trigger', 'focus')
.setAttribute('data-bs-container', 'body')
.setAttribute('data-bs-html', 'true')
.setAttribute('data-bs-toggle', 'popover')
.setAttribute('data-bs-placement', 'top') %}

{% set class = class|default("") %}
{% set class = [class, 'sac-day'] %}

{# TEMPLATE #}
<div {{ attributes.addClass(class) }}>
  {% if alterations is not empty %}
    <div class="sac-day-dots">
      {% for alt in alterations %}
        {% if alt.url and alt.label %}
          {% set attributes_pop = attributes_pop.setAttribute('data-bs-content', "<a href='#{alt.url}'>#{alt.label}</a>")
            .setAttribute('data-url', alt.url)
          %}
        {% endif %}
        <button role="button" aria-label="{{ alt.label }}" {{ attributes_pop.addClass(['incident-dot', 'red-tooltip', 'icon-button']) }}></button>
      {% endfor %}
    </div>
  {% endif %}

  {% if date_text is not empty %}
    <div class="sac-day-disp">
      <span class="day-number">{{ date_text|date('d') }}</span>
      {% if alterations is not empty %}
        <i class="{{ global_icon_down|default('fas fa-chevron-down') }} arrow belir"></i>
      {% endif %}
    </div>
  {% endif %}
</div>
