{% load i18n wagtailadmin_tags %}
{% comment %}

    Variables accepted by this template:

    - `page` - A wagtail page object
    - `classes` - String of extra css classes to pass to this component
{% endcomment %}

{% if page.live and page.url is not None %}
    {% test_page_is_public page as is_public %}

    <a href="{{ page.url }}" target="_blank" rel="noreferrer"
        class="
            page-status-tag
            u-text-uppercase
            w-inline-flex
            w-items-center
            w-justify-center
            w-whitespace-nowrap
            w-px-1
            w-ml-3
            w-text-[0.6875rem]
            w-rounded-sm
            w-bg-transparent
            w-text-grey-400
            w-border
            w-border-grey-100
            w-no-underline
            w-font-semibold
            hover:w-border-primary
            hover:w-text-primary
            w-transition"
        data-tippy-offset="[0, 13]"
        aria-label="{% if is_public %}{% trans 'Visible to all. Visit the live page' %}{% else %}{% trans 'Private. Visit the live page' %}{% endif %}"
        data-tippy-content="{% if is_public %}{% trans 'Visible to all' %}{% else %}{% trans 'Private' %}{% endif %}"
        data-tippy-placement="bottom">

        {% with icon_classes='privacy-indicator-icon w-w-4 w-h-4 w-mr-1' %}
            {% if is_public %}
                {% icon name="view" class_name=icon_classes %}
            {% else %}
                {% icon name="no-view" class_name=icon_classes %}
            {% endif %}
        {% endwith %}

        {% trans 'Live' %}
    </a>
{% endif %}
