{% load i18n static %}
<button
  type="button"
  id="user-story-toggle"
  class="user-story-toggle"
  aria-haspopup="dialog"
  aria-controls="user-story-overlay"
  aria-expanded="false"
  aria-label="{% trans 'Share your feedback' %}"
>
  <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" aria-label="{% trans 'Close' %}" data-feedback-close></button>
    </div>
    <div class="card-body">
      <form
        id="user-story-form"
        method="post"
        action="{% url 'pages:user-story-submit' %}"
        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-aria-label="{% trans 'Copy feedback details to clipboard' %}"
      >
        {% csrf_token %}
        <input type="hidden" name="path" value="{{ request.get_full_path|default:'/' }}">
        {% if request.user.is_authenticated %}
          <div class="mb-3">
            <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>
        {% else %}
          <div class="mb-3">
            <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 class="form-text">{% trans 'We may contact you via email if your feedback is utilized.' %}</div>
          </div>
        {% endif %}
        <div class="mb-3">
          <span class="form-label d-block" id="user-story-rating-group-label">
            {% blocktrans trimmed with link_start='<a href="#" class="user-story-copy-link" data-feedback-copy role="button">'|safe link_end='</a>'|safe %}
              Your experience on {{ link_start }}this page{{ link_end }}
            {% endblocktrans %}
          </span>
          <div class="user-story-feedback-options">
            <div class="user-story-rating" role="radiogroup" aria-labelledby="user-story-title">
              <input type="radio" id="user-story-rating-5" name="rating" value="5" required>
              <label for="user-story-rating-5" title="{% trans 'Requires no improvement' %}" 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 'Serviceable' %}" 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 'Minor functional issues' %}" 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 'Negative user experience' %}" 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 'Requires urgent attention' %}" aria-label="{% trans '1 star' %}">★</label>
            </div>
            <span
              class="user-story-rating-hint"
              id="user-story-rating-hint"
              data-rating-message-0="{% trans 'Select a rating' %}"
              data-rating-message-1="{% trans 'Requires urgent attention' %}"
              data-rating-message-2="{% trans 'Negative user experience' %}"
              data-rating-message-3="{% trans 'Minor functional issues' %}"
              data-rating-message-4="{% trans 'Serviceable' %}"
              data-rating-message-5="{% trans 'Requires no improvement' %}"
            >
              {% 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"
            maxlength="400"
            placeholder="{% trans 'Share details about your experience (max 400 characters)' %}"
            required
          ></textarea>
          <div class="form-text">
            <span id="user-story-char-count">0</span>/400
          </div>
        </div>
        <button type="submit" class="btn btn-primary w-100 py-2">
          {% trans 'Submit feedback' %}
        </button>
        <div id="user-story-success" class="alert alert-success user-story-alert mt-3 d-none" role="status" hidden>
          {% trans 'Thank you! Your feedback has been sent.' %}
        </div>
        <div id="user-story-error" class="alert alert-danger user-story-alert mt-3 d-none" role="alert" hidden></div>
      </form>
    </div>
  </div>
</div>
<script src="{% static 'pages/js/user_story_feedback.js' %}" defer></script>