{% load page_filters %}
{% load widget_tweaks %}
{% load static %}
{% load i18n %}
{% if permission_message %}
    {% if permission_message.level_tag.value == 'info' %}
        <div class="bg-blue-100 border-l-4 border-blue-500 text-blue-700 px-4 py-3 my-2"
             role="alert">
            <p>
                {{ permission_message.message }}
            </p>
        </div>
    {% endif %}
    {% if permission_message.level_tag.value == 'success' %}
        <div class="bg-green-100 border-l-4 border-green-500 text-green-800 px-4 py-3 my-2"
             role="alert">
            <p>
                {{ permission_message.message }}
            </p>
        </div>
    {% endif %}
    {% if permission_message.level_tag.value == 'warning' %}
        <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 px-4 py-3 my-2"
             role="alert">
            <p>
                {{ permission_message.message }}
            </p>
        </div>
    {% endif %}
    {% if permission_message.level_tag.value == 'error' %}
        <div class="bg-red-100 border-l-4 border-red-500 text-red-700 px-4 py-3 my-2"
             role="alert">
            <p>
                {{ permission_message.message }}
            </p>
        </div>
    {% endif %}
{% endif %}
<label for="{{ page_form.authors.id_for_label }}" class="secondary">
    {{ page_form.authors.label }}
</label>
<div class="help-text">
    {{ page_form.authors.help_text }}
</div>
<div>
    {% for user in page.authors.all %}
        <span class="inline-block rounded-full py-2 px-4 mx-2 my-1 bg-blue-500 text-white text-xl"
              title="{{ user.username }}">
            {{ user.full_user_name }}
            <a class="revoke-page-permission inline-block hover:text-red-500"
               href="{% url 'revoke_page_permission_ajax' region_slug=request.region.slug %}"
               data-user-id="{{ user.id }}"
               data-page-id="{{ page.id }}"
               data-permission="edit">
                <i icon-name="x-circle"></i>
            </a>
        </span>
    {% empty %}
    {% endfor %}
</div>
<div class="w-full flex flex-wrap mt-2">
    {% render_field page_form.authors %}
    <button class="btn grant-page-permission mt-2 w-full"
            data-url="{% url 'grant_page_permission_ajax' region_slug=request.region.slug %}"
            data-page-id="{{ page.id }}"
            data-permission="edit">
        <i icon-name="plus-circle" class="mr-2"></i> {% translate "Add to authors" %}
    </button>
</div>
<label for="{{ page_form.editors.id_for_label }}" class="secondary">
    {{ page_form.editors.label }}
</label>
<div class="help-text">
    {{ page_form.editors.help_text }}
</div>
<div>
    {% for user in page.editors.all %}
        <span class="inline-block rounded-full py-2 px-4 mx-2 my-1 bg-blue-500 text-white text-xl"
              title="{{ user.username }}">
            {{ user.full_user_name }}
            <a class="revoke-page-permission inline-block hover:text-red-500"
               href="{% url 'revoke_page_permission_ajax' region_slug=request.region.slug %}"
               data-user-id="{{ user.id }}"
               data-page-id="{{ page.id }}"
               data-permission="publish">
                <i icon-name="x-circle"></i>
            </a>
        </span>
    {% empty %}
    {% endfor %}
</div>
<div class="w-full flex flex-wrap mt-2">
    {% render_field page_form.editors %}
    <button class="btn grant-page-permission mt-2 w-full"
            data-url="{% url 'grant_page_permission_ajax' region_slug=request.region.slug %}"
            data-page-id="{{ page.id }}"
            data-permission="publish">
        <i icon-name="plus-circle" class="mr-2"></i> {% translate "Add to editors" %}
    </button>
</div>
