{% macro review_prompt(slug, isModal, existingReview) %}
  {# Used for both adding and editing reviews, in page form and modal form. #}
  <mkt-prompt {% if isModal %}data-modal="review"{% endif %}>
    <form class="{{ existingReview and 'edit-review-form' or 'add-review-form' }}"
          {% if existingReview %}
            data-uri="{{ existingReview.resource_uri }}" data-slug="{{ slug }}"
          {% endif %}>
      {% if isModal %}
        <h3>{{ existingReview and _('Edit Review') or _('Leave a Review') }}</h3>
      {% endif %}
      <p class="rating-label">{{ _('Please select a star rating.') }}</p>
      <p class="simple-field rating">
        <label for="review-rating">{{ _('Rate:') }}</label>
        <select id="review-rating" name="rating" required>
          {% for i in range(1, 6) %}
            <option value="{{ i }}"
                    {{ 'selected' if existingReview and i == existingReview.rating }}>
              {{ i }}
            </option>
          {% endfor %}
        </select>
      </p>
      <p class="reviews--guideline">
        {{ _('Please read the <a href="{url}" target="_blank">Review Guidelines</a> for more details about rating apps.
              Reviews that do not meet these guidelines may be removed by our moderation team without notice.')
          |format(url='https://developer.mozilla.org/Marketplace/User_Review_Guidelines') }}
      </p>
      <textarea id="review-body" rows="2" cols="40" name="body"
                placeholder="{{ _('Tell us what you like about this app. Write like you’re telling a friend about your experience with the app. Give specific details, for example, What features did you like or dislike?') }}"
                required pattern="^[^\s]+$" maxlength="150">{{ existingReview.body }}</textarea>
      <input type="hidden" name="app" value="{{ slug }}" required>
      <footer class="form-footer only-logged-out c">
        <p>{{ _('Only users that are logged in may submit reviews.') }}</p>
      </footer>
      <div>
        <button>{{ _('Cancel') }}</button>
        <button>{{ existingReview and _('Update Review') or _('Submit Review') }}</button>
      </div>
    </form>
</mkt-prompt>
{% endmacro %}

<div class="main add-review mobile-margined">
  {{ review_prompt(slug) }}
</div>