macros.njk

{% macro sortableTableHeader(name, id, sortDirection, sortBy) %}

{% set upArrow %}
    <svg class="inline-block h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
    </svg>
{%endset%}

{% set downArrow %}
    <svg class="inline-block h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
    </svg>
{%endset%}
    
    
{% set sortingOnThisParam = id === sortBy %}
{% set linkParams = "?sortBy=" + id + "&sortDirection=asc" %}
{%set ariaSort = "none"%}

{%if sortingOnThisParam and sortDirection === "asc"%}
    {% set linkParams = "?sortBy=" + id + "&sortDirection=desc" %}
    {%set ariaSort = "ascending"%}
{%endif%}

{%if sortingOnThisParam and sortDirection === "desc"%}
    {% set linkParams = "?sortBy=" + id + "&sortDirection=asc" %}
    {%set ariaSort = "descending"%}
{%endif%}



<th class="py-2 pl-2" scope="col" aria-sort="{{ariaSort}}"><a href="/{{linkParams}}"> {{name}}

    <span class="text-xs ml-1 whitespace-nowrap">
        {% if sortDirection === "asc" and sortingOnThisParam %}
        <div class="w-full">
            {{upArrow | safe}}
        </div>
        {% elseif sortDirection === 'desc' and sortingOnThisParam %}
        <div class="w-full">
            {{downArrow | safe}}
        </div>
        {% elseif id !== sortBy %}
        <div class="w-full">
            {{upArrow | safe}}
            {{downArrow | safe}}
        </div>
        {% endif %}
    </span>
</a>
</th>
{% endmacro %}

{% macro tooltip(id, mainText, tooltipText) %}
<div aria-describedby="{{ id }}" class="group relative inline-block">
  <span class="border-dotted border-b">{{ mainText }}</span>
  <div role="tooltip" id="{{ id }}" class="invisible group-focus:visible group-hover:visible absolute -top-8 left-2/4 -translate-x-2/4 text-center z-30 py-0.5 px-2 bg-stone-800 text-white rounded-full after:content-[' '] after:absolute after:top-full after:left-2/4 after:-ml-[4px] after:border-4 after:border-transparent after:border-t-stone-800">
    {{ tooltipText }}
  </div>
</div>
{% endmacro %}