{% set non_important_text = "color: lightgrey;" %}

{% set important_text = "color: white !important;" %}

{% set main_text = "color: #F6F5F5 !important;" %}

{% set button_color = "#60CA9A !important" %}

{% macro kpi_name_link(kpi_link_prefix, point) -%}
    <strong>
        <a
            href="{{ kpi_link_prefix }}/{{ point.kpi_id }}"
            style="{{ important_text }} text-decoration: underline dotted lightgrey;"
        >{{point.kpi_name}}</a>
    </strong>
{%- endmacro %}

{% macro subdim_name_link(point, value_only=false) -%}
    <a
        href="{{ point.subdim_link() }}"
        style="{{ important_text }} text-decoration: underline dotted lightgrey;"
    >
        {% if value_only -%}
           <span>{{ point.subdim_formatted_value_only() }}</span><!--
     -->{% else -%}
            <span>{{ point.subdim_formatted() }}</span>
        {%- endif %}<!--
 --></a>
{%- endmacro %}

{% macro button_with_link(text, link) -%}
<a
    class="btn"
    href="{{ link }}"
    style="
        appearance: button;
        cursor: pointer;
        border-radius: 10px;
        border-width: 0;
        background-color: {{ button_color }};
        height: 2rem;
        line-height: 2rem;
        padding: 0 1rem;
        text-decoration: none;
        display: inline-block;
        color: black !important;
        align-self: center;
    "
>
    {{ text }}
</a>
{%- endmacro %}

{% macro anomaly_point_formatting(point, kpi_link_prefix=none) -%}
    {% set include_kpi_name = kpi_link_prefix is not none %}

    {% if point.previous_value is none or point.y == point.previous_value -%}
        <strong style="color: orange;">
            ∿ Anomalous behavior
        </strong>

        {% if include_kpi_name -%}
            <span style="{{ non_important_text }}">

                in

            </span>

            {{ kpi_name_link(kpi_link_prefix, point) }}

            {% if point.is_subdim %}
                {{ subdim_name_link(point) }}
            {% endif %}
        {% else -%}
            <span style="{{ non_important_text }}">

                detected

            </span>

            {% if point.is_subdim -%}
                <span style="{{ non_important_text }}">

                    in

                </span>

                {{ subdim_name_link(point) }}
            {%- endif %}
        {%- endif %}

        -

        {% if point.previous_value is none -%}
            <span style="{{ non_important_text }}">

                changed to

            </span>
            <strong style="{{ important_text }}">{{point.y_readable}}</strong>

            {% if point.is_hourly -%}
                <span style="{{ non_important_text }}">
                    at
                </span>
                <span style="{{ important_text }}">{{ point.anomaly_time_only }}</span>
            {%- endif %}
        {% else -%}
            {% if point.is_hourly %}
                <span style="{{ non_important_text }}">
                    with constant value
                </span>

                <strong style="{{ important_text }}">{{point.y_readable}}</strong>

                <span style="{{ non_important_text }}">
                    from
                </span>
                <span style="{{ important_text }}">{{ point.previous_point_time_only }}</span>

                <span style="{{ non_important_text }}">
                    to
                </span>
                <span style="{{ important_text }}">{{ point.anomaly_time_only }}</span>
            {% else %}
                <span style="{{ non_important_text }}">
                    with same value
                </span>

                <strong style="{{ important_text }}">{{point.y_readable}}</strong>

                <span style="{{ non_important_text }}">
                    as previous day
                </span>
            {% endif %}
        {%- endif %}

    {% else -%}
        {% if point.y > point.previous_value %}
            <strong style="color: rgb(6, 182, 212);">
                ↑ {{ point.formatted_change_percent }}
                Spike
            </strong>
        {% elif point.y < point.previous_value %}
            <strong style="color: orange;">
                ↓ {{ point.formatted_change_percent }}
                Drop
            </strong>
        {% endif %}

        {% if include_kpi_name %}
            <span style="{{ non_important_text }}">

                in

            </span>

            {{ kpi_name_link(kpi_link_prefix, point) }}

            {% if point.is_subdim %}
                {{ subdim_name_link(point) }}
            {% endif %}
        {% else %}
            <span style="{{ non_important_text }}">

                detected

            </span>

            {% if point.is_subdim %}
                <span style="{{ non_important_text }}">

                    in

                </span>

                {{ subdim_name_link(point) }}
            {% endif %}
        {% endif %}

        <span style="{{ non_important_text }}">

            -

            changed

        </span>

        <span style="{{ non_important_text }}">
            to
        </span>

        <strong style="{{ important_text }}">{{point.y_readable}}</strong>

        {% if point.previous_value_readable is not none -%}

            <span style="{{ non_important_text }}">
                from
            </span>
            <span style="{{ important_text }}">{{point.previous_value_readable}}</span>

        {%- endif %}

        <!--(<span style="{{ important_text }}">{{ point.formatted_change_percent }}</span>)--><!--

     -->{% if point.is_hourly -%}
            <span style="{{ non_important_text }}">
                from
            </span>
            <span style="{{ important_text }}">{{ point.previous_point_time_only }}</span>

            <span style="{{ non_important_text }}">
                to
            </span>
            <span style="{{ important_text }}">{{ point.anomaly_time_only }}</span>
        {%- endif %}
    {%- endif %}<!--

 -->{% if point.relevant_subdims -%}
        <ul>
            <li>
                <span style="{{ non_important_text }}">Reasons for change:</span>
                {% for point in point.top_relevant_subdims() %}
                {{ subdim_name_link(point, value_only=true) }}<!--
                 -->{% if not loop.last -%}
                    <span style="{{ non_important_text }}">,</span>
                    {%- endif %}
                {% endfor %}
            </li>
        </ul>
    {%- endif %}
{%- endmacro %}