{% load i18n %}{% if touchpoint %}
<div class="csm-touchpoint" data-touchpoint="{{ touchpoint.slug }}">
    <style>
        .csm-touchpoint{border:1px solid rgba(128,128,128,.25);border-radius:.5rem;padding:1rem 1.25rem;
            margin:1rem 0;font-size:.9rem;position:relative;max-width:34rem}
        .csm-touchpoint__question{margin:0 0 .5rem;font-weight:600}
        .csm-touchpoint__optional{font-weight:400;opacity:.65}
        .csm-touchpoint__stars{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end}
        .csm-touchpoint__stars input{position:absolute;opacity:0;width:0;height:0}
        .csm-touchpoint__stars label{cursor:pointer;font-size:1.6rem;line-height:1;padding:0 .1rem;
            color:rgba(128,128,128,.4)}
        .csm-touchpoint__stars input:checked ~ label,
        .csm-touchpoint__stars label:hover,
        .csm-touchpoint__stars label:hover ~ label{color:#f6b100}
        .csm-touchpoint__stars input:focus-visible + label{outline:2px solid currentColor;outline-offset:2px}
        .csm-touchpoint__comment{width:100%;box-sizing:border-box;margin:.25rem 0 .75rem;padding:.5rem;
            border:1px solid rgba(128,128,128,.35);border-radius:.35rem;font:inherit;resize:vertical}
        .csm-touchpoint__dismiss{position:absolute;top:.4rem;right:.5rem;background:none;border:0;
            font-size:1.1rem;line-height:1;cursor:pointer;opacity:.5;padding:.25rem}
        .csm-touchpoint__dismiss:hover{opacity:1}
        .csm-touchpoint__submit{cursor:pointer}
    </style>

    <form method="post" action="{% url 'touchpoint_dismiss' touchpoint.slug %}">
        {% csrf_token %}
        <input type="hidden" name="next" value="{{ next }}">
        <button type="submit"
                class="csm-touchpoint__dismiss"
                aria-label="{% translate 'Dismiss' %}"
                title="{% translate 'Dismiss' %}">&times;</button>
    </form>

    <form method="post" action="{% url 'touchpoint_submit' touchpoint.slug %}">
        {% csrf_token %}
        <input type="hidden" name="next" value="{{ next }}">

        {% for item in fields %}
            <p class="csm-touchpoint__question">
                {{ item.field.label }}
                {% if not item.field.field.required %}
                    <span class="csm-touchpoint__optional">({% translate 'Optional' %})</span>
                {% endif %}
            </p>

            {% if item.kind == 'scale' %}
                <div class="csm-touchpoint__stars">
                    {% for value, label in item.field.field.choices reversed %}
                        <input type="radio"
                               id="{{ item.field.auto_id }}_{{ value }}"
                               name="{{ item.field.html_name }}"
                               value="{{ value }}"
                               {% if item.field.field.required %}required{% endif %}>
                        <label for="{{ item.field.auto_id }}_{{ value }}" title="{{ label }}">&#9733;</label>
                    {% endfor %}
                </div>
            {% elif item.kind == 'text' %}
                <textarea class="csm-touchpoint__comment"
                          name="{{ item.field.html_name }}"
                          rows="2"
                          {% if item.field.field.required %}required{% endif %}></textarea>
            {% else %}
                {{ item.field }}
            {% endif %}
        {% endfor %}

        <button type="submit" class="csm-touchpoint__submit">{% translate 'Send' %}</button>
    </form>
</div>
{% endif %}