@import com.gu.contentatom.renderer.utils.Implicits._
@(atom: com.gu.contentatom.thrift.Atom
, data: com.gu.contentatom.thrift.atom.storyquestions.StoryQuestionsAtom
)(implicit conf: com.gu.contentatom.renderer.ArticleConfiguration)

<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>

  @for(
    listId <- data.listId
  ) { 
    <div class="atom__view atom__view--padded" 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. Would you like to get notified when it’s ready?</p>

      <form action="@{conf.ajaxUrl}/story-questions/answers/signup" id="js-atom--readerquestions__subscribe" class="atom--readerquestions__form">
        <div class="atom__form-field atom__form-field--inline">
          <input class="ui" type="email" name="email" placeholder="Email address" required>
          <input type="hidden" name="listId" value="@listId">
          <button type="submit" class="ui atom__button atom__button--rounded">Sign up</button>
        </div>
      </form>
    </div>
  }

  <div class="atom__view atom__view--padded" hidden>
    <p class="atom--readerquestions__heading"><strong>Thank you for your interest</strong></p>
    <p class="atom--readerquestions__description">We’ll send you the answer soon.</p>
  </div>
</div>