<div class="vf-chatbot-feedback__form vf-u-margin__top--400">
  <div class="vf-chatbot-feedback__form-content vf-u-padding--400">
    <div class="vf-chatbot-feedback__form-content-header">
      <div class="vf-chatbot-feedback__title">Tell us more (optional)</div>
      <button role="button" class="vf-chatbot-feedback__form-close vf-button vf-button--icon vf-button--dismiss | vf-banner__button" type="button" aria-label="Close feedback form" data-vf-js-feedback-form-close>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <title>dismiss banner</title>
          <path d="M14.3,12.179a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.442L12.177,9.7a.25.25,0,0,1-.354,0L2.561.442A1.5,1.5,0,0,0,.439,2.563L9.7,11.825a.25.25,0,0,1,0,.354L.439,21.442a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,0,0,2.122-2.121Z" />
        </svg>
      </button>
    </div>
    <div class="vf-chatbot-feedback__options">
      {% set feedback_options = config.feedback_options or options %}
      {% for option in feedback_options %}
        <button class="vf-chatbot-feedback__option" data-feedback-option="{{option.id}}">
          {{option.label}}
        </button>
      {% endfor %}
    </div>
    <label id="vf-chatbot-feedback-comment-title" for="vf-chatbot-feedback-comment" class="vf-chatbot-feedback__comment-title">Comments</label>
    <textarea
        id="vf-chatbot-feedback-comment"
        aria-labelledby="vf-chatbot-feedback-comment-title"
        class="vf-chatbot-feedback__comment"
        rows="4"
      ></textarea>
    <button type="submit" class="vf-chatbot-feedback__submit vf-u-padding--200" data-vf-js-feedback-submit>
        Submit
      </button>
  </div>
</div>
