@(atom: com.gu.contentatom.thrift.Atom
, data: com.gu.contentatom.thrift.atom.storyquestions.StoryQuestionsAtom
)

<div class="atom atom--readerquestions">
  <div class="atom__view">
    <p class="atom--readerquestions__heading"><strong>Need something explained?</strong></p>
    <p class="atom--readerquestions__description">Pick a question: We’ll answer the one that generates the most interest shortly</p>

    <div class="js-questions atom--readerquestions__questions atom--readerquestions__rows">
      @for(
        editorialQuestions <- data.editorialQuestions.toSeq;
        questionSet <- editorialQuestions.take(1);
        question <- questionSet.questions
      ) {
        <button class="clear js-question atom--readerquestions__question" data-question-id="@question.questionId" data-question-text="@question.questionText">
          <span class="atom--readerquestions__questionlabel">@question.questionText</span>
          <span class="atom--readerquestions__questionask atom__button atom__button--rounded" aria-hidden="true">Ask</span>
        </button>
      }
    </div>
  </div>

  <div class="atom__view" hidden>
    <p class="atom--readerquestions__heading"><strong>Thank you for participating</strong></p>
    <p class="atom--readerquestions__description">We’ll answer the one that generates the most interest shortly. How would you like to get notified when it’s ready?</p>
    <div class="js-notifications atom--readerquestions__notification atom--readerquestions__rows">
    </div>
  </div>

  <div class="atom__view atom__view--thankyou" hidden>
    <p class="atom--readerquestions__heading"><strong>Thank you for your interest</strong></p>
    <p class="atom--readerquestions__description">We’re actively developing these notification features but they are not yet built. We’re using your feedback to understand how you would like to be notified of the answers. Thanks again.</p>
  </div>
</div>