<!DOCTYPE html>
<html>
  <head>
    {{>head}}
  </head>
  <body id="samples">
  
    {{>menu}}

    <div class="okta-sign-in-form ui center aligned relaxed grid">
      <div class="row">
        <div id="page-title-header" class="ui header">
          <h2>{{title}}</h2>
        </div>
      </div>

      <div class="row">
        {{>formMessages}}
      </div>

      <div class="row">
        <form id="challenge-authenticator-form" class="ui large form" action="{{action}}" method="POST">
          <div class="field">
          {{#contextualData.enrolledQuestion}}
            <div class="ui small header">{{contextualData.enrolledQuestion.question}}</div>
          {{/contextualData.enrolledQuestion}}
          {{^contextualData.enrolledQuestion}}
            <div class="field">
              <label>
                <input type="radio" name="enroll-method" value="choose-question" checked onclick="changeMethod(event)" />
                Choose a security question
              </label>
            </div>
            <div class="field">
              <label>
                <input type="radio" name="enroll-method" value="create-question" onclick="changeMethod(event)" />
                Create my own security question
              </label>
            </div>
            <div id="create-question" class="field hidden">
              <div class="ui labeled input">
                <div class="ui label">Create my own security question</div>
                <input id="security-question-question" type="{{type}}" name="question" autoComplete="off" />
              </div>  
            </div>
            <div id="choose-question" class="field">
              <select name="questionKey">
              {{#contextualData.questions}}
                <option value="{{questionKey}}">{{question}}</option>
              {{/contextualData.questions}}
              </select>
            </div>
          {{/contextualData.enrolledQuestion}}
          </div>
          <div class="field">
            <div class="ui labeled input">
              <div class="ui label">
                Answer
              </div>
              {{#input}}
                <input id="security-question-answer" type="{{type}}" name="{{name}}" autoComplete="off" required />
              {{/input}}
            </div>
          </div>
          <button id="submit-button" class="ui fluid large primary submit button" type="submit">
            Verify
          </button>
        </form>
      </div>

      {{>cancel}}

    </div>

    <script type="text/javascript">
      function changeMethod(event) {
        const value = event.target.value;
        console.log(value);
        var createQuestionEl = document.getElementById('create-question');
        var chooseQuestionEl = document.getElementById('choose-question');
        if (value === 'choose-question') { 
          createQuestionEl.classList.add('hidden');
          chooseQuestionEl.classList.remove('hidden');
        } else if (value === 'create-question') {
          createQuestionEl.classList.remove('hidden');
          chooseQuestionEl.classList.add('hidden');
        }
      }
    </script>
  </body>
</html>
