{% load i18n %}
{% if feedback_ingestion_enabled %}
<button
  type="button"
  id="user-story-toggle"
  class="user-story-toggle"
  aria-haspopup="dialog"
  aria-controls="user-story-overlay"
  aria-expanded="false"
>
  <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
    <path
      fill="currentColor"
      fill-rule="evenodd"
      d="M11.049 2.927a1 1 0 011.902 0l1.563 4.813a1 1 0 00.95.69h5.063c.969 0 1.371 1.24.588 1.81l-4.096 2.977a1 1 0 00-.364 1.118l1.563 4.813c.3.921-.755 1.688-1.54 1.118l-4.096-2.977a1 1 0 00-1.175 0l-4.096 2.977c-.784.57-1.838-.197-1.539-1.118l1.563-4.813a1 1 0 00-.364-1.118L2.445 10.24c-.783-.57-.38-1.81.588-1.81h5.063a1 1 0 00.95-.69l1.563-4.813z"
      clip-rule="evenodd"
    ></path>
  </svg>
  <span class="visually-hidden">{% trans 'Share your feedback' %}</span>
</button>
<div
  id="user-story-overlay"
  class="user-story-overlay"
  role="dialog"
  aria-modal="true"
  aria-labelledby="user-story-title"
  hidden
>
  <div class="user-story-card card" tabindex="-1">
    <div class="card-header d-flex justify-content-between align-items-start">
      <div>
        <h5 class="card-title mb-1" id="user-story-title">{% trans 'Please provide feedback!' %}</h5>
        <p class="card-subtitle text-muted small mb-0">{% trans 'Tell us how this page worked for you.' %}</p>
      </div>
      <button type="button" class="btn-close" data-feedback-close>
        <span class="visually-hidden">{% trans "Close" %}</span>
      </button>
    </div>
    <div class="card-body">
      <form
        id="user-story-form"
        method="post"
        action="{% url 'pages:user-story-submit' %}"
        enctype="multipart/form-data"
        data-submit-error="{% trans 'We could not submit your feedback. Please try again.' %}"
        data-network-error="{% trans 'Network error. Please try again.' %}"
        data-copy-success="{% trans 'Copied!' %}"
        data-copy-error="{% trans 'Copy failed. Please try again.' %}"
        data-copy-staff-details="{% if request.user.is_staff %}1{% else %}0{% endif %}"
        data-autocomplete-url="{% url 'pages:user-story-autocomplete' %}"
      >
        {% csrf_token %}
        <input type="hidden" name="path" value="{{ request.get_full_path|default:'/' }}">
        <input type="hidden" name="messages" value="">
        <input type="hidden" name="feedback_context" value="">
      {% if request.user.is_authenticated %}
        <div class="user-story-contact-row mb-3">
          <div class="user-story-contact-name">
            <label for="user-story-name" class="form-label">{% trans 'Username' %}</label>
            <input
              type="text"
              class="form-control"
              id="user-story-name"
              name="name"
              maxlength="40"
              value="{{ request.user.username|slice:':40' }}"
              readonly
            >
          </div>
          {% include 'pages/includes/user_story_contact_optin_checkbox.html' with checkbox_wrapper_classes='user-story-chat-optin user-story-contact-optin' %}
        </div>
      {% else %}
        <div class="user-story-contact-row mb-3">
          <div class="user-story-contact-name">
            <label for="user-story-name" class="form-label">{% trans 'Email address' %}</label>
            <input
              type="email"
              class="form-control"
              id="user-story-name"
              name="name"
              maxlength="40"
              placeholder="{% trans 'name@example.com' %}"
              autocomplete="email"
              inputmode="email"
              required
            >
          </div>
          {% include 'pages/includes/user_story_contact_optin_checkbox.html' with checkbox_wrapper_classes='user-story-chat-optin user-story-contact-optin' %}
        </div>
      {% endif %}
        <div class="mb-3">
          <div class="user-story-rating-row">
            <span class="form-label d-block mb-0" id="user-story-rating-group-label">
              {% if request.user.is_authenticated %}
                {% blocktrans trimmed with link_start='<button type="button" class="user-story-copy-link btn btn-link p-0 align-baseline" data-feedback-copy>'|safe link_end='</button>'|safe %}
                  Please rate {{ link_start }}this page{{ link_end }}
                {% endblocktrans %}
              {% else %}
                {% trans 'Please rate this page' %}
              {% endif %}
            </span>
            <div class="user-story-rating" role="radiogroup" aria-labelledby="user-story-rating-group-label" aria-describedby="user-story-rating-hint">
              <input type="radio" id="user-story-rating-5" name="rating" value="5" required>
              <label for="user-story-rating-5" title="{% trans 'Meets all expectations' %}" aria-label="{% trans '5 stars' %}">★</label>
              <input type="radio" id="user-story-rating-4" name="rating" value="4">
              <label for="user-story-rating-4" title="{% trans 'Potential for improvement' %}" aria-label="{% trans '4 stars' %}">★</label>
              <input type="radio" id="user-story-rating-3" name="rating" value="3">
              <label for="user-story-rating-3" title="{% trans 'Negative user experience' %}" aria-label="{% trans '3 stars' %}">★</label>
              <input type="radio" id="user-story-rating-2" name="rating" value="2">
              <label for="user-story-rating-2" title="{% trans 'Partial loss of function' %}" aria-label="{% trans '2 stars' %}">★</label>
              <input type="radio" id="user-story-rating-1" name="rating" value="1">
              <label for="user-story-rating-1" title="{% trans 'Complete loss of function' %}" aria-label="{% trans '1 star' %}">★</label>
            </div>
          </div>
          <div class="user-story-feedback-options">
            <span
              class="user-story-rating-hint"
              id="user-story-rating-hint"
              data-rating-message-0="{% trans 'Select a rating' %}"
              data-rating-message-1="{% trans 'Complete loss of function' %}"
              data-rating-message-2="{% trans 'Partial loss of function' %}"
              data-rating-message-3="{% trans 'Negative user experience' %}"
              data-rating-message-4="{% trans 'Potential for improvement' %}"
              data-rating-message-5="{% trans 'Meets all expectations' %}"
            >
              {% trans 'Select a rating' %}
            </span>
          </div>
        </div>
        <div class="mb-3">
          <label for="user-story-comments" class="form-label">{% trans 'Comments' %}</label>
          <textarea
            class="form-control"
            id="user-story-comments"
            name="comments"
            rows="4"
            placeholder="{% trans 'Share details about your experience' %}"
            autocomplete="on"
            required
          ></textarea>
        </div>

        <button type="submit" class="btn btn-primary w-100 py-2">
          {% trans 'Submit feedback' %}
        </button>
        <output id="user-story-success" class="alert alert-success user-story-alert mt-3" hidden>
          {% trans 'Thank you! Your feedback has been sent.' %}
        </output>
        <div id="user-story-error" class="alert alert-danger user-story-alert mt-3" role="alert" hidden></div>
      </form>
    </div>
  </div>
</div>
{% endif %}