{% props page: String, state: String = "", action: String = "/feedback", report_href: String = "" %}
{# state: "" asks, "open" shows the report form, "thanks" confirms; page is the URL the feedback is about #}
{%- if state == "thanks" %}
<div class="ui-feedback" data-ui="feedback"><div class="ui-feedback-thanks" role="status"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>Thank you for your feedback</div></div>
{%- else %}{% if state == "open" %}
<div data-ui="feedback">
<div class="ui-feedback" data-state="open"><div class="ui-feedback-q">Help us improve this page</div><a class="ui-btn" data-variant="ghost" data-size="sm" href="{{ page }}">Cancel</a></div>
<form class="ui-feedback-form" method="post" action="{{ action }}">
{{ csrf_field() }}
<input type="hidden" name="feedback[page]" value="{{ page }}">
<p class="ui-muted">Don't include personal or financial information, like your National Insurance number or card details.</p>
<div class="ui-field"><label class="ui-label" for="feedback_doing">What were you trying to do?</label><input class="ui-input" id="feedback_doing" name="feedback[doing]"></div>
<div class="ui-field"><label class="ui-label" for="feedback_wrong">What went wrong?</label><textarea class="ui-textarea" id="feedback_wrong" name="feedback[wrong]"></textarea></div>
<div><button class="ui-btn">Send</button></div>
</form>
</div>
{%- else %}
<div class="ui-feedback" data-ui="feedback">
<div class="ui-feedback-q">Is this page useful?
<form class="ui-cluster" method="post" action="{{ action }}">{{ csrf_field() }}<input type="hidden" name="feedback[page]" value="{{ page }}"><button class="ui-btn" data-variant="outline" data-size="sm" name="feedback[useful]" value="yes">Yes</button><button class="ui-btn" data-variant="outline" data-size="sm" name="feedback[useful]" value="no">No</button></form>
</div>
<a href="{% if report_href.is_empty() %}?feedback=open{% else %}{{ report_href }}{% end %}">Report a problem with this page</a>
</div>
{%- end %}{% end %}