{% extends "./wrapper.html" %}

{% load i18n %}

{% block wrapped %}
    {% translate "Was this page helpful?" as feedback_title%}
    {% translate "This page was helpful."  as feedback_positive %}
    {% translate "This page was not helpful." as feedback_negative %}

    <p class="feedback-title">{{ page.get_feedback_title|default:feedback_title }}</p>
    <form class="feedback-buttons" id="feedback-form" method="post" action="{% url "feedback:feedback" page.pk %}" hx-post="{% url "feedback:feedback" page.pk %}" hx-trigger="click" hx-target="#feedback-wrapper" hx-swap="outerHTML">
        {% csrf_token %}

        {% if errors %}
            <div class="feedback-errors">
                {% for error in errors.values %}
                    <p class="feedback-error">{{ error }}</p>
                {% endfor %}
            </div>
        {% endif %}
        
        <div class="feedback-tooltip">
            <button class="feedback-button" id="feedback-yes" name="positive" value="true" type="button" aria-label="{{ page.get_feedback_positive_text|default:feedback_positive }}">
                <svg xmlns="http://www.w3.org/2000/svg" class="happy" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
                    <path d="M4.285 9.567a.5.5 0 0 1 .683.183A3.5 3.5 0 0 0 8 11.5a3.5 3.5 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.5 4.5 0 0 1 8 12.5a4.5 4.5 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683M7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5m4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5"/>
                </svg>
            </button>
            <span class="feedback-tooltiptext noselect">{{ page.get_feedback_positive_text|default:feedback_positive }}</span>
        </div>
        <div class="feedback-tooltip">
            <button class="feedback-button" id="feedback-no" name="positive" value="false" type="button" aria-label="{{ page.get_feedback_negative_text|default:feedback_negative }}">
                <svg xmlns="http://www.w3.org/2000/svg" class="sad" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
                    <path d="M4.285 12.433a.5.5 0 0 0 .683-.183A3.5 3.5 0 0 1 8 10.5c1.295 0 2.426.703 3.032 1.75a.5.5 0 0 0 .866-.5A4.5 4.5 0 0 0 8 9.5a4.5 4.5 0 0 0-3.898 2.25.5.5 0 0 0 .183.683M7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5m4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5"/>
                </svg>
            </button>
            <span class="feedback-tooltiptext noselect">{{ page.get_feedback_negative_text|default:feedback_negative }}</span>
        </div>
        
    </form>
{% endblock %}
